Need dynamic paging dropdown for 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>

//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>

Reply | Reply with quote

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">

</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">

</ej:Grid>

function bound(args) {

// perform your action here

}

</script>

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Reply | Reply with quote

Sharmila

Replied On January 28, 2019 03:03 PM UTC

Thanks. The newly implemented paging list works fine.

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US