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.
Unfortunately, activation email could not send to your email. Please try again.

Example of bring lots of data for parts

Thread ID:

Created:

Updated:

Platform:

Replies:

128764 Feb 9,2017 03:28 PM Feb 13,2017 02:34 AM ASP.NET Web Forms 3
loading
Tags: Grid
Roimer Machacón Otero
Asked On February 9, 2017 03:28 PM

Hi, we're using syncfusion grid for bring data.

Now we want know if exist a form of bring a lots of data for parts. Example:

For the grid we bring around of 15000 registers in page of 10 registers, but this data makes us delay loading the page. This load slowly.

Our question is exist a form of bring the first 10 registers (or 20 registers - 2pages) but in the counter of registers show the total registers and after when we press in the number of the page go loading the other records.

Can help me with an example! Thanks!

Venkatesh Ayothi Raman [Syncfusion]
Replied On February 10, 2017 01:33 AM

Hi Roimer, 
Thanks for contacting Syncfusion support. 
We suggest you to use WebMethod adaptor to get the data from server side. In this, we can fetch the set of records from Grid using WebMethod adaptor feature. In this feature works like load on demand concept. For example, if we set PageSize as 50 then it will get the 50 records from server side and displaying it. And then if we click next page another set of 50 records gets from server side. Please refer to the code example and Help document, 
Code example
@Grid  
  
<ej:DataManager runat="server" ID="DataManager" URL="Default.aspx/DataSource" UpdateURL="Default.aspx/Update"  RemoveURL="Default.aspx/Remove" InsertURL="Default.aspx/Insert" Adaptor="WebMethodAdaptor"/> 
     
    <ej:Grid  runat="server"  ID="gridDistributors" EnableViewState="false" AllowPaging="true" Load="OnLoad" DataManagerID="DataManager" > 
           
        <Columns> 
  
           . . . 
         
        </Columns> 
       . . . 
    </ej:Grid> 
 
@Serve side[Default.aspx.cs page] 
[WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object DataSource(DataManager value) 
         {              
 
            IEnumerable data = GetAllRecords(); 
            var count = data.AsQueryable().Count(); 
            DataOperations ds = new DataOperations(); 
            data = ds.Execute(data, value); //here we can perform the Grid actions  such as paging,fitlering,sorting,etc..              
            return  value.RequiresCounts? new { result = data, count = count } : data as Object ; //the count must be returned along with response while we enabled the paging 
        } 

We have also prepared the sample based on your requirement that can be download from following link, 

Please refer to the knowledge base documentation for Data Manager operations in server side, 

Screenshot 1: “Initially Grid has been taken only 12 records” 
 
Screenshot 2:” While paging the grid has been taken another records and skip the before 12” 
 
Regards, 
Venkatesh Ayothiraman. 


Roimer Machacón Otero
Replied On February 10, 2017 09:34 AM

Thanks for the reply, now I've two questions:

  • This form apply for the version 14.3.0.49? (This version that we are using actually) 
  • Exist a form of pass a value as a parameter (Example from a textbox) for depending of this parameter bring the data (Becausa we are using the grid in a second level and the data depending of value in a textbox)



Venkatesh Ayothi Raman [Syncfusion]
Replied On February 13, 2017 02:34 AM

Hi Roimer, 
Thanks for the update. 
Query #1: This form apply for the version 14.3.0.49? (This version that we are using actually) 
Yes, we can use WebMethod adaptor in Essential Studio version 14.3.0.49
Query #2: Exist a form of pass a value as a parameter (Example from a textbox) for depending of this parameter bring the data (Becausa we are using the grid in a second level and the data depending of value in a textbox) 
We have achieved your requirement “Pass the parameter to controller and bound the data to client side” using addParams method and actionBegin event. This event triggers for every grid action before its starts and we will pass param’s value in this event.  
We have also created a sample based on your requirement which can be download from following link, 

Please refer to the below code example and Help documentation, 
Code Example: 
@buttons 
<input type="text" value=5 id="textvalue"  />   
 <input type="button" value="filter" id="btn"/> 
 
@Grid 
 
    <ej:Grid  runat="server"  ID="Grid" EnableViewState="false" AllowPaging="true"  DataManagerID="DataManager" > 
           <ClientSideEvents  ActionBegin="actionBegin" ></ClientSideEvents>  
        <Columns> 
  
            . . . 
        </Columns> 
            . . . 
    </ej:Grid> 
 
<action begin Event> 
 
function actionBegin(args) { 
        var value = $("#textvalue").val(); 
 
        this.model.query.addParams("EmpID", value);//Pass the additional parameter to controller 
        
    } 
 
<Default.aspx.cs page> 
[WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object DataSource(DataManager value, int EmpID) 
         {              
 
            IEnumerable data = GetAllRecords().Where(s => s.EmployeeID == EmpID).ToList(); //for demonstration purpose we have filtered the data based on the textbox value 
            var count = data.AsQueryable().Count(); 
            DataOperations ds = new DataOperations(); 
            data = ds.Execute(data, value); //here we can perform the Grid actions  such as paging,fitlering,sorting,etc..              
            return  value.RequiresCounts? new { result = data, count = count } : data as Object ; //the count must be returned along with response while we enabled the paging 
        } 
 
Help documentations: 

Also, if we enter a new value in input and pass the new parameter value to server side for filtering data source. This can be achieved by using grid refreshContent method. please refer to the following code example and Help documentation, 
Code Example
  $("#btn").click(function () { 
                var value = $("#textvalue").val(), gridobj; 
                gridobj = $("#MainContent_Grid").ejGrid("instance"); 
                gridobj.model.query.addParams("EmpID", value);//Passed a new value as parameter to controller 
                gridobj.refreshContent();//refresh grid datasource 
        
            }); 

Regards, 
Venkatesh Ayothiraman. 


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.

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.

;