Available in the Full Version

Pivot Grid - Remote Provider

This sample demonstrates a key benefit of using the remote provider feature of the igOlapXmlaDataSource: less network traffic.
Direct XMLA Access
Uploaded: 0KB, Downloaded: 0 KB
Remote XMLA Access
Uploaded: 0KB, Downloaded: 0 KB

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

All requests are proxied through the server application to avoid cross-domain problems. In addition, the data is translated to JSON, reducing the size of the response. NOTE: This sample requires an internet connection to access the OLAP data.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models

<!DOCTYPE html>

<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <script type="text/javascript">
        $.support.cors = true;
        $(function () {
            var dataSource,
            remoteDataSource,
            remoteSize = { u: 0, d: 0 },
            directSize = { u: 0, d: 0 },
            $directGrid = $("#directPivotGrid"),
            $remoteGrid = $("#remotePivotGrid"),
            toggleTupleMember = function (expand, pivotGrid, axisName, tupleIndex, memberIndex) {
                var friendlyAxisName = axisName == "Axis0" ? "columnAxis" : "rowAxis";
                if (expand) {
                    pivotGrid.igPivotGrid("expandTupleMember", friendlyAxisName, tupleIndex, memberIndex, true);
                }
                else {
                    pivotGrid.igPivotGrid("collapseTupleMember", friendlyAxisName, tupleIndex, memberIndex, true);
                }
            };

            $(document).ajaxComplete(function (event, request, settings) {
                if (settings.url.match("(.*/)?remote-xmla-provider-endpoint(.*)")) {
                    remoteSize.u += settings.data.length;
                    remoteSize.d += request.responseText.length;
                    $("#remoteSize").text("Uploaded: " + (remoteSize.u / 1024).toFixed(2) + " KB, Downloaded: " + (remoteSize.d / 1024).toFixed(2) + " KB").show();
                } else if (settings.url === "https://sampledata.infragistics.com/olap/msmdpump.dll") {
                    directSize.u += settings.data.length;
                    directSize.d += request.responseText.length;
                    $("#directSize").text("Uploaded: " + (directSize.u / 1024).toFixed(2) + " KB, Downloaded: " + (directSize.d / 1024).toFixed(2) + " KB").show();
                }
            });

            dataSource = new $.ig.OlapXmlaDataSource({
                serverUrl: 'https://sampledata.infragistics.com/olap/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works',
                rows: '[Date].[Calendar]',
                columns: '[Product].[Product Categories]',
                measures: '[Measures].[Internet Order Count]'
            });

            remoteDataSource = new $.ig.OlapXmlaDataSource({
                isRemote: true,
                serverUrl: '@Url.Action("remote-xmla-provider-endpoint")',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works',
                rows: '[Date].[Calendar]',
                columns: '[Product].[Product Categories]',
                measures: '[Measures].[Internet Order Count]'
            });

            $directGrid.igPivotGrid({
                dataSource: dataSource,
                width: "915px",
                height: "450px",
                hideFiltersDropArea: true,
                disableColumnsDropArea: true,
                disableRowsDropArea: true,
                disableMeasuresDropArea: true,
                tupleMemberExpanding: function (evt, ui) {
                    toggleTupleMember(true, $remoteGrid, ui.axisName, ui.tupleIndex, ui.memberIndex);
                },
                tupleMemberCollapsing: function (evt, ui) {
                    toggleTupleMember(false, $remoteGrid, ui.axisName, ui.tupleIndex, ui.memberIndex);
                }
            });

            $remoteGrid.igPivotGrid({
                dataSource: remoteDataSource,
                width: "915px",
                height: "450px",
                hideFiltersDropArea: true,
                disableColumnsDropArea: true,
                disableRowsDropArea: true,
                disableMeasuresDropArea: true,
                tupleMemberExpanding: function (evt, ui) {
                    toggleTupleMember(true, $directGrid, ui.axisName, ui.tupleIndex, ui.memberIndex);
                },
                tupleMemberCollapsing: function (evt, ui) {
                    toggleTupleMember(false, $directGrid, ui.axisName, ui.tupleIndex, ui.memberIndex);
                }
            });
        });
    </script>

    <h5>Direct XMLA Access</h5>
    <h5 id="directSize">Uploaded: 0KB, Downloaded: 0 KB</h5>
    <div id="directPivotGrid"></div>

    <h5>Remote XMLA Access</h5>
    <h5 id="remoteSize">Uploaded: 0KB, Downloaded: 0 KB</h5>
    <div id="remotePivotGrid"></div>
</body>
</html>