Need dynamic paging dropdown for grid

[Sharmila]

We are doing a POC to create a sample grid with dynamic paging using Syncfusion ASP.Net web forms grid control.

I need a paging dropdown to provide control for the user on the number of items displayed per page.

However, I ran into an issue while trying out the below code. 

I  am getting the below error

DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid

Is there a way I can add the databound function like this: <ej:grid ondatabound="databound()">?

Need a working sample code for this scenario.

I am doing the data binding in the .aspx.cs file like below.

FlatGrid.DataSource = sampleBO;
FlatGrid.DataBind();

.aspx code:

<ej:Grid ID="FlatGrid" runat="server" OnServerExcelExporting="FlatGrid_ServerExcelExporting" AllowPaging="True"

 AllowFiltering="True" AllowSorting="True" AllowMultiSorting="True"
 AllowGrouping="True" AllowResizing="True" AllowResizeToFit="True" AllowScrolling="true"
AllowReordering="True" CssClass="" DataSourceCachingMode="None" EnableLoadOnDemand="False" MinWidth="0">
 <ResizeSettings ResizeMode="NextColumn"></ResizeSettings>
 <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></EditSettings>
 <PageSettings ShowDefaults="true" EnableTemplates="true" Template="#template" />
  <ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport,add,edit,delete,update,cancel"></ToolbarSettings>
                            
 <FilterSettings FilterType="Menu"></FilterSettings>
  </ej:Grid>

<script type="text/javascript">

    //for dynamic paging

    $(function () {
        $("#Grid").ejGrid({
                allowPaging: true,
                dataBound: 'dataBound',
                pageSettings: { enableTemplates: true, template: "#template", showDefaults: true }
            });
        });
        var pagerData = [
            { text: "9", value: 9 },
            { text: "10", value: 10 },
            { text: "11", value: 11 },
            { text: "12", value: 12 },
        ];
        function dataBound(args) {
            $('#pager').ejDropDownList({
                change: "change",
                value: this.model.pageSettings.pageSize,
                dataSource: pagerData
            });
        }
        function change(args) {
            var gridObj = $("#Grid").ejGrid("instance");
            gridObj.option({ "pageSettings": { pageSize: parseInt(args.text) } });
            gridObj.getPager().find("input").ejDropDownList({
                selectedIndex: args.itemId,
                change: "change",
                dataSource: pagerData
            });
        }

    </script>
    <script type="text/x-jsrender" id="template">
        <div class="e-pagercontainer">
            <input type="text" id="pager" />
        </div>
    </script>

[Vignesh Natarajan]

Hi Sharmila, 

 

Thanks for using Syncfusion products. 

 

Query: “I need a paging dropdown to provide control for the user on the number of items displayed per page.” 

 

From your query, we understand that you want to render the dropdownlist in the Grid pager to change the page size dynamically. From 2017 Volume 3 release we have given support for pageSizeList in Grid pager which renders the dropdownlist in the pager and selecting a value from it will change the pageSize of Grid accordingly.  

 

Refer the below code example 

 

<ej:Grid ID="Projects_Grid" runat="server" AllowPaging="true">             

            <ClientSideEvents DataBound="bound" /> 

        </ej:Grid>     

 

 

public partial class GridFeatures : System.Web.UI.Page 

    { 

        List<Orders> order = new List<Orders>(); 

        public static List<int> pageList = new List<int>(); 

        protected void Page_Load(object sender, EventArgs e) 

        { 

            BindDataSource(); 

            pageList.Add(1); 

            pageList.Add(5); 

            pageList.Add(10); 

            pageList.Add(15); 

            pageList.Add(20); 

            this.Projects_Grid.PageSettings.PageSizeList = pageList; 

        } 

……………………………………. 

} 

 

Refer the below screenshot for output 

 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142310/ze/SyncfusionASPNETApp-364744444  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#members:pagesettings-pagesizelist  

 

Note: If you are suing older version then we suggest  you to achieve your requirement by rendering the dropdownlist using dataBound event as suggested below  

 

Query: “I  am getting the below error” && “Is there a way I can add the databound function like this: <ej:grid ondatabound="databound()">?” 

 

It is default behavior of the Grid to display a alert window. Because by default wither column or dataSource must be defined in order to render the grid properly. Since you have not defined the columns and dataSource for ejGrid (js code), alert window is shown. Either define the column or dataSource for the Grid.  

 

You can define the clientside events for Grid using below steps 

 

<ej:Grid ID="Projects_Grid" runat="server" AllowPaging="true">             

            <ClientSideEvents DataBound="bound" /> 

        </ej:Grid>     

 

     <script>  

     function bound(args) {  

        // perform your action here 

 }  

     

     </script> 

   

 

Please get back to us if you have further queries. 

 

 

Regards, 

Vignesh Natarajan 

[Sharmila]

Thanks. The newly implemented paging list works fine.

[Vignesh Natarajan]

Hi Sharmila, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution. 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan 

[?????? ?????????]

Good day, how to add "All" in drop down list? thanks

[Pon Selva Jeganathan]

Hi Customer, 

Thanks for contacting syncfusion forum. 

Query: how to add "All" in drop down list? 

 

We have already discussed about “Placing the Dropdown in the Pager which controls Page Size of the Grid”, in the following KB.  

  

https://www.syncfusion.com/kb/7695/how-to-place-dropdown-in-grids-pager-to-control-page-size  

  

Please follow the code example :.   

  

<script type="text/x-jsrender" id="template">  

    <div class="e-pagercontainer">  

        <input type="text" id="pager" />  

    </div>  

</script>  

  

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true" AllowSelection="true" AllowResizeToFit="true" OnServerExcelExporting="FlatGrid_ServerExcelExporting"> 

<PageSettings ShowDefaults="true" EnableTemplates="true" Template="#template" /> 

<ClientSideEvents DataBound="databound" /><ej:columns> 

….. 

</ej:Grid> 

   

    <script> 

      var pagerData = [ 

        { text: "9", value: 9 }, 

        { text: "10", value: 10 }, 

        { text: "11", value: 11 }, 

        { text: "12", value: 12 }, 

        { text: "All", value: 40 }, 

      ]; 

      function change(args) { 

        var gridObj = $("#FlatGrid").ejGrid("instance"); 

        gridObj.option({ "pageSettings": { pageSize: parseInt(args.value) } }); 

        gridObj.getPager().find("input").ejDropDownList({ 

          selectedIndex: args.itemId, 

          change: "change", 

          dataSource: pagerData 

        }); 

      } 

      function databound(args) { 

 

        $('#pager').ejDropDownList({ 

 

          change: "change", 

 

          value: this.model.pageSettings.pageSize, 

 

          dataSource: pagerData 

 

        }); 

 

Please refer to the below screenshot, 

 

  

 

Refer to the following API References.   

 https://help.syncfusion.com/api/js/ejgrid#members:pagesettings-pagesize  

  

Kindly get back to us for further assistance. 

Regards,
Pon selva