We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need dynamic paging dropdown for grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142310 Jan 27,2019 09:47 PM UTC Jan 29,2019 04:39 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Sharmila
Asked On January 27, 2019 09:47 PM UTC

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 [Syncfusion]
Replied On January 28, 2019 10:58 AM UTC

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 
 
 
Refer our help documentation for your reference 
 
 
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
Replied On January 28, 2019 03:03 PM UTC

Thanks. The newly implemented paging list works fine.

Vignesh Natarajan [Syncfusion]
Replied On January 29, 2019 04:39 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;