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. Image for the cookie policy date

Asp.Net WebForms ejGrid OnDemand Paging with intial load on button click

Hi,

I'm looking for examples of how to use the OnDemand Paging features of the WebForms Grid. I have my data queries from MS SQL and I am converting my dataset into a list. That's not a problem. But I could only find one example that shows me how to use the OnDemand Paging for WebForms (http://www.syncfusion.com/forums/117447/error-serialize-json-in-grid) and it's rather confusing because there is some MVC code mixed in there, as well. Plus I need to be able to do all of this on a button click event, not the page load.

Can you guys help me with an example of some sort?

6 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team March 23, 2015 01:48 PM UTC

Hi Corey,

Thanks for using Syncfusion Products.

Your requirement has been achieved by using URL Adaptor. While using URL Adaptor we need to return the data as JSON and the JSON object must contain field name as “result” with its value as dataSource and one more field name as “count” with its value as dataSource total records count. We suggest you to use Skip and Take method to perform the OnDemand paging feature.

Please find the below code snippet :

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

<ej:Button ID="button" runat="server" Type="Button" Text="Button" OnClick="button_Click"></ej:Button>

<ej:Grid ID="Grid" runat="server" AllowSorting="True" AllowPaging="True" AllowGrouping="true" AllowResizing="true" AllowMultiSorting="true">

<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

<Columns>

<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="100" />

<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />

<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="100" />

<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="100" Format="{0:C}" />

<ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="100" Format="{0:MM/dd/yyyy}" />

<ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" />

</Columns>

</ej:Grid>

</asp:Content>

-----------------------------------------------------------------------------

public static object Data(int skip, int take)

{

var DataSource = OrderRepository.GetAllRecords();

DataResult ds = new DataResult();

ds.result = DataSource.Skip(skip).Take(take);

ds.count = ds.count = DataSource.Count();

return ds;

}

public class DataResult

{

public IEnumerable<EditableOrder> result { get; set; }

public int count { get; set; }

}

protected void button_Click(object Sender, ButtonEventArgs e)

{

this.Grid.DataManager = new DataSource();

this.Grid.DataManager.URL = "Default.aspx/Data";

this.Grid.DataManager.Adaptor = "UrlAdaptor";

this.Grid.DataBind();

}

}

For your convenience we have created a sample and sample can be downloaded from the below link :

Sample Link : http://www.syncfusion.com/downloads/support/forum/118588/Sample433455023.zip

Please get back to us if you have any further assistance,

Regards,

Prasanna Kumar N.S.V



CT Corey Thompson March 30, 2015 06:48 PM UTC

Thanks! That worked. 

Now I need to figure out how I can send a set of custom parameters in the web method calls.

Because we may pull incredible amounts of data, we are wanting to filter our queries in the database before pulling them. So I need to figure out a way to send the form control values with my requests.  Is there a way to send custom parameters with the skip and take? 


CT Corey Thompson March 30, 2015 07:03 PM UTC

Nevermind! I think I found a way! 

protected void button_Click(object Sender, ButtonEventArgs e)

{

this.Grid.DataManager = new DataSource();

this.Grid.DataManager.URL = "Default.aspx/Data?customvar=" + value;

this.Grid.DataManager.Adaptor = "UrlAdaptor";

this.Grid.DataBind();

}

 Then I check for httpcontext.current.request.querystring inside the web method.




PK Prasanna Kumar Viswanathan Syncfusion Team March 31, 2015 03:34 PM UTC

Hi Corey,

Thanks for the update.

We glad to know that you found the way. Please let us know if you have any concerns,

Regards,

Prasanna Kumar N.S.V


SM Shiran Mevorach August 27, 2015 09:39 AM UTC

Hi

after i write ejGrid OnDemand Paging
i try to sort and filter  and its not work ,

how i fix thi problem ?


BM Balaji Marimuthu Syncfusion Team August 28, 2015 09:22 AM UTC

Hi Corey, 

If we use UrlAdaptor in Grid (onDemand Paging) sorting and filtering operations will perform in server side only. So we need to perform the sorting, filtering operations in server side. Please refer to the sample and code example as below,

Sample: ServerSideOperation


       

        protected void button_Click(object Sender, ButtonEventArgs e)

        {

            this.FlatGrid.DataManager = new DataSource();

            this.FlatGrid.DataManager.URL = "Default.aspx/Data";

            this.FlatGrid.DataManager.Adaptor = "WebMethodAdaptor";

            this.FlatGrid.FilterSettings.FilterType = Syncfusion.JavaScript.FilterType.Menu;

            this.FlatGrid.DataBind();
        }



But in ASP.NET, we can perform the server side operations such as Paging (OnDemand Paging), sorting, filtering using WebMethodAdaptor and the parameter name should be value. 

[WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static object Data(Syncfusion.JavaScript.DataManager value)

        {


            IEnumerable Data = OrderRepository.GetAllRecords();

            DataResult ds = new DataResult();

            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();

            if (value.Sorted != null && value.Sorted.Count > 0) //Sorting

            {

                Data = operation.PerformSorting(Data, value.Sorted);

            }

            if (value.Where != null && value.Where.Count > 0) //Filtering

            {

                Data = operation.PerformWhereFilter(Data, value.Where, value.Where[0].Operator);

            }

            int count = Data.AsQueryable().Count();

            if (value.Skip != 0)

            {

                Data = operation.PerformSkip(Data, value.Skip);

            }

            if (value.Take != 0)

            {

                Data = operation.PerformTake(Data, value.Take);

            }

            ds.result = Data;

            if (value.Where == null)

                ds.count = OrderRepository.GetAllRecords().Count();

            else

                ds.count = count;

            return ds;


        }


public class DataResult

        {

            public IEnumerable result { get; set; }

            public int count { get; set; }

        }




Please refer to the Help document: 
https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations

Regards, 
Balaji Marimuthu



Loader.
Live Chat Icon For mobile
Up arrow icon