Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    DataSource:
    Mode :
    Paging Type :
    <%@ Page Title="PivotGrid-Paging-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This demo for Syncfusion Essential JS1 for ASP.NET pivot grid control demonstrates the paging and virtual scrolling option to load large records." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="Paging.aspx.cs" Inherits="WebSampleBrowser.Paging" %>
    
    <%@ Register Assembly="Syncfusion.EJ.Pivot" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
    
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ControlsSection">
        <div class="control">
        <ej:PivotGrid ID="PivotGrid1" runat="server" EnableVirtualScrolling="true" ClientIDMode="Static">
            <DataSource>
                <Rows>
                    <ej:Field FieldName="Country" FieldCaption="Country"></ej:Field>
                    <ej:Field FieldName="State" FieldCaption="State"></ej:Field>
                </Rows>
                <Columns>
                    <ej:Field FieldName="Product" FieldCaption="Product"></ej:Field>
                </Columns>
                <Values>
                    <ej:Field FieldName="Amount" FieldCaption="Amount"></ej:Field>
                    <ej:Field FieldName="Quantity" FieldCaption="Quantity"></ej:Field>
                </Values>
                <PagerOptions CategoricalPageSize="5" SeriesPageSize="5" CategoricalCurrentPage="1" SeriesCurrentPage="1" />
            </DataSource>
            <ClientSideEvents Load="onLoad" />
        </ej:PivotGrid>
        </div>
    </asp:Content>
    
    <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="PropertySection">
        <div id="sampleProperties">
            <div class="prop-grid">
                <div class="row">
                    <table>
                        <tr>
                            <td class="chkrad">DataSource:
                            </td>
                            <td class="chkrad">
                                <input type="radio" name="dataSource" id="rdbRelational" checked="checked" /><label for="rdbRelational" class="radioBtnLabel">Relational</label>
                            </td>
                            <td class="chkrad" colspan="2">
                                <input type="radio" name="dataSource" id="rdbOlap" /><label for="rdbOlap" class="radioBtnLabel">OLAP</label>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <table>
                        <tr>
                            <td class=" chkrad">Mode :
                            </td>
                            <td class="chkrad">
                                <input type="radio" name="dataMode" id="rdbClient" checked /><label for="rdbClient" class="radioBtnLabel">Client</label>
                            </td>
                            <td class="chkrad" colspan="2">
                                <input type="radio" name="dataMode" id="rdbServer" /><label for="rdbServer" class="radioBtnLabel">Server</label>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <table>
                        <tr>
                            <td class="chkrad">Paging Type :
                            </td>
                            <td class="chkrad">
                                <input type="radio" name="type" id="vScrolling" checked="checked" /><label for="vScrolling" class="radioBtnLabel">Virtual Scrolling</label>
                            </td>
                            <td class="chkrad" colspan="2">
                                <input type="radio" name="type" id="paging" /><label for="paging" class="radioBtnLabel">Paging</label>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </asp:Content>
    
    <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="ScriptSection">
        <script type="text/javascript">
            var vScrolling, paging, rdbClient, rdbServer, rdbRelational, rdbOlap, pGridObj;
            $(function () {
                $("#sampleProperties").ejPropertiesPanel();
                $("#vScrolling,#paging,#rdbRelational,#rdbOlap,#rdbClient,#rdbServer").ejRadioButton({ change: "renderPivotGrid" });
                vScrolling = $('#vScrolling').data("ejRadioButton"); paging = $('#paging').data("ejRadioButton"); rdbClient = $('#rdbClient').data("ejRadioButton"); rdbServer = $('#rdbServer').data("ejRadioButton");
                rdbRelational = $('#rdbRelational').data("ejRadioButton"); rdbOlap = $('#rdbOlap').data("ejRadioButton");
            });
            function onLoad(args) {
                args.model.dataSource.data = pivot_dataset;
            };
            function renderPivotGrid(args) {
                $(".e-pivotgrid").remove();
                $(".e-pivotpager").remove();
                var clientData = "";
                if (rdbClient.model.checked) {
                    clientData = rdbRelational.model.checked ? {
                        data: pivot_dataset,
                        cube: "",
                        rows: [{ fieldName: "Country", fieldCaption: "Country" }, { fieldName: "State", fieldCaption: "State" }],
                        columns: [{ fieldName: "Product", fieldCaption: "Product" }],
                        values: [{ fieldName: "Amount", fieldCaption: "Amount" }, { fieldName: "Quantity", fieldCaption: "Quantity" }],
                        filters: [],
                        pagerOptions: {
                            categoricalPageSize: 5,
                            seriesPageSize: 5,
                            categoricalCurrentPage: 1,
                            seriesCurrentPage: 1
                        }
                    } : {
                        data: "//bi.syncfusion.com/olap/msmdpump.dll",
                        catalog: "Adventure Works DW 2008 SE", cube: "Adventure Works",
                        rows: [{ fieldName: "[Customer].[Customer Geography]" }], columns: [{ fieldName: "[Date].[Date]" }],
                        values: [{ measures: [{ fieldName: "[Measures].[Internet Sales Amount]" }], axis: "columns" }],
                        filters: [],
                        pagerOptions: {
                            categoricalPageSize: 5,
                            seriesPageSize: 5,
                            categoricalCurrentPage: 1,
                            seriesCurrentPage: 1
                        }
                    }
                }
                var gridPanel = ej.buildTag("div#PivotGrid", "", { height: paging.model.checked ? "auto" : "290px", width: "100%" })[0].outerHTML;
                if (paging.model.checked) {
                    var pagerDiv = ej.buildTag("div#Pager", "", { "margin-top": "10px" })[0].outerHTML;
                    $(gridPanel).appendTo(".control");
                    $(pagerDiv).appendTo(".control");
                    if (clientData == "")
                        $("#PivotGrid").ejPivotGrid({ url: rdbRelational.model.checked ? "../api/RelationalGrid" : "../api/Paging", enablePaging: true, customObject: { isPaging: true } });
                    else
                        $("#PivotGrid").ejPivotGrid({ dataSource: clientData, enablePaging: true });
                    $("#Pager").ejPivotPager({
                        mode: ej.PivotPager.Mode.Both,
                        targetControlID: "PivotGrid"
                    });
                }
                else {
    
                    $(gridPanel).appendTo(".control");
                    $(".control").children().eq(0).height("330");
                    if (clientData == "") {
                        $("#PivotGrid").ejPivotGrid({ url: rdbRelational.model.checked ? "../api/RelationalGrid" : "../api/Paging", enableVirtualScrolling: true, customObject: { isPaging: true } });
                    }
                    else {
                        $("#PivotGrid").ejPivotGrid({ dataSource: clientData, enableVirtualScrolling: true });
                    }
                }
            }
            window.loadPivotGridFrameTheme = function () {
                window.setTimeout(function () {
                    var pivotGridElement = $("#PivotGrid1").data("ejPivotGrid");
                    if (pivotGridElement && pivotGridElement.getJSONRecords() != null)
                        pivotGridElement.renderControlFromJSON();
                }, 2500);
            }
        </script>
    </asp:Content>
    
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="StyleSection">
        <style type="text/css">
            .e-pivotgrid {
                height: 330px;
                width: 100%;
                overflow: auto;
                float: left;
            }
    
            .radioBtnLabel {
                margin-left: 5px;
            }
    
            .row .cols-sample-area {
                width: 100%;
            }
    
            .cols-prop-area .content {
                width: auto;
            }
    
            .row .cols-prop-area {
                min-height: 170px;
                width: auto;
            }
        </style>
    </asp:Content>
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser
    {
        public partial class Paging : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
        }
    }
    using Syncfusion.JavaScript;
    using Syncfusion.Olap.Manager;
    using Syncfusion.Olap.Reports;
    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Web;
    using System.Web.Http;
    using System.Web.Script.Serialization;
    using OLAPUTILS = Syncfusion.JavaScript.Olap;
    
    namespace WebSampleBrowser
    {
        public class PagingController : ApiController
        {
            Syncfusion.JavaScript.PivotGrid htmlHelper = new Syncfusion.JavaScript.PivotGrid();
            public static int cultureIDInfoval = 1033;
            static string connectionString = ConfigurationManager.ConnectionStrings["Adventure Works"].ConnectionString + "locale identifier=" + cultureIDInfoval + ";";
            Syncfusion.JavaScript.PivotClient clientHelper = new Syncfusion.JavaScript.PivotClient();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
    
            [System.Web.Http.ActionName("InitializeGrid")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> InitializeGrid(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = null;
                dynamic customData = serializer.Deserialize<dynamic>(jsonResult["customObject"].ToString());
                var cultureIDInfo = new System.Globalization.CultureInfo(("en-US")).LCID;
                if (customData is Dictionary<string, object> && customData.ContainsKey("Language"))
                {
                    cultureIDInfo = new System.Globalization.CultureInfo((customData["Language"])).LCID;
                }
                connectionString = connectionString.Replace("" + cultureIDInfoval + "", "" + cultureIDInfo + "");
                cultureIDInfoval = cultureIDInfo;
                DataManager = new OlapDataManager(connectionString);
                DataManager.Culture = new System.Globalization.CultureInfo((cultureIDInfo));
                DataManager.OverrideDefaultFormatStrings = true;
                if (jsonResult.ContainsKey("currentReport") && jsonResult["currentReport"].ToString() != "")
                    DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                else
                    DataManager.SetCurrentReport(CreateOlapReport());
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), DataManager, jsonResult["gridLayout"].ToString(), Convert.ToBoolean(jsonResult["enablePivotFieldList"].ToString()));
            }
    
            [System.Web.Http.ActionName("DrillGrid")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> DrillGrid(Dictionary<string, object> jsonResult)
            {
                dynamic customData = serializer.Deserialize<dynamic>(jsonResult["customObject"].ToString());
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager = new OlapDataManager(connectionString);
                if (customData is Dictionary<string, object> && customData.ContainsKey("Language"))
                {
                    DataManager.Culture = new System.Globalization.CultureInfo((customData["Language"]));
                    DataManager.OverrideDefaultFormatStrings = true;
                }
                DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), connectionString, DataManager, jsonResult["cellPosition"].ToString(), jsonResult["headerInfo"].ToString(), jsonResult["layout"].ToString());
            }
    
            [System.Web.Http.ActionName("NodeDropped")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> NodeDropped(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), DataManager, jsonResult["dropType"].ToString(), jsonResult["nodeInfo"].ToString(), jsonResult["filterParams"].ToString(), jsonResult["gridLayout"].ToString(), true);
            }
    
            [System.Web.Http.ActionName("Filtering")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> Filtering(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), connectionString, DataManager, null, jsonResult["filterParams"].ToString(), jsonResult["gridLayout"].ToString());
            }
    
            [System.Web.Http.ActionName("FetchMembers")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> FetchMembers(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), DataManager, null, jsonResult["headerTag"].ToString());
            }
    
            [System.Web.Http.ActionName("Paging")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> Paging(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager.SetCurrentReport(htmlHelper.SetPaging(jsonResult["currentReport"].ToString(), jsonResult["pagingInfo"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), DataManager, jsonResult["layout"].ToString());
            }
    
            [System.Web.Http.ActionName("RemoveButton")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> RemoveButton(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), connectionString, DataManager, null, jsonResult["headerInfo"].ToString(), jsonResult["gridLayout"].ToString());
            }
    
            [System.Web.Http.ActionName("MemberExpanded")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> MemberExpanded(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                if (!string.IsNullOrEmpty(jsonResult["currentReport"].ToString()))
                    DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), DataManager, jsonResult["checkedStatus"].ToString(), jsonResult["parentNode"].ToString(), jsonResult["tag"].ToString(), jsonResult["cubeName"].ToString());
            }
    
            [System.Web.Http.ActionName("Export")]
            [System.Web.Http.HttpPost]
            public void Export()
            {
                string args = HttpContext.Current.Request.Form.GetValues(0)[0];
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                string fileName = "Sample";
                htmlHelper.ExportPivotGrid(DataManager, args, fileName, System.Web.HttpContext.Current.Response);
            }
    
            [System.Web.Http.ActionName("DeferUpdate")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> DeferUpdate(Dictionary<string, object> jsonResult)
            {
                OlapDataManager DataManager = new OlapDataManager(connectionString);
                DataManager.SetCurrentReport(OLAPUTILS.Utils.DeserializeOlapReport(jsonResult["currentReport"].ToString()));
                return htmlHelper.GetJsonData(jsonResult["action"].ToString(), connectionString, DataManager, null, jsonResult["filterParams"].ToString(), jsonResult.ContainsKey("gridLayout") ? jsonResult["gridLayout"].ToString() : null);
            }
    
            private OlapReport CreateOlapReport()
            {
                OlapReport olapReport = new OlapReport();
                olapReport.CurrentCubeName = "Adventure Works";
                olapReport.EnablePaging = true;
                olapReport.PagerOptions.SeriesPageSize = 5;
                olapReport.PagerOptions.CategoricalPageSize = 5;
    
                DimensionElement dimensionElement = new DimensionElement() { Name = "Customer" };
                dimensionElement.AddLevel("Customer", "Customer");
                olapReport.CategoricalElements.Add(dimensionElement);
    
                DimensionElement dimensionElementRow = new DimensionElement() { Name = "Customer", HierarchyName = "Customer" };
                dimensionElementRow.AddLevel("Customer Geography", "Country");
                olapReport.SeriesElements.Add(dimensionElementRow);
    
                MeasureElements measureElementColumn = new MeasureElements();
                measureElementColumn.Elements.Add(new MeasureElement { Name = "Internet Sales Amount" });
                olapReport.CategoricalElements.Add(measureElementColumn);
    
                return olapReport;
            }
        }
    }