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

Server-Side paging, sorting, filtering. How to retrieve bookmark property from the action result.

Hello, I am trying to accomplish this goals:

1. Use server-side paging, sorting and filtering by linking the data source of the grid to an action.
     -The problem here is that I need a bookmark to determine from wich element I should start loading the new elements, becouse our server is not capable of "Skip and Take" operations. Then comes the second goal:
2. Send and recieve a bookmark for the last element loaded throught the DataManager.

Is this possible and how can I do this. Thanks in advance.

6 Replies

BN Botyo Nikolov July 26, 2017 02:26 PM UTC

I have managed to send the bookmark from the view to the action with custom DataManager and adding a parameter to the query. Now the problem is how to retrieve the bookmark from the action response?



VN Vignesh Natarajan Syncfusion Team July 26, 2017 02:48 PM UTC

Hi Botyo, 
  
Thanks for contacting Syncfusion support. 
We have analyzed your query. When your server is not capable to perform skip and take operations. You can get the Grid first and last records in server side using “addParams” method to fetch next set of records based on current last record. 
Please refer below documentation for your reference about addParams method. 
Using addParams method you can pass the current page first record to get previous page records And last records  to get next page records. 
Please refer the below code snippet how addParams method is used.  
function begin(args) { 
            if (!this.initialRender) { 
                var first = args.model.currentViewData[0]; 
                var last = args.model.currentViewData[11]; 
                args.model.query.addParams("first", JSON.stringify(first)); 
                args.model.query.addParams("last", JSON.stringify(last)); 
            } 
       } 

In above sample first record of the currentViewData (current page)is sent as string to datamanager similarly  last records can also be sent. So by passing first value we can get previous page records and by passing last record we can get next page records.  With help of these we can calculate how many records to be taken and those records can be passed as an value to datamanager . 
Above code snippet will execute in server side as below. 
 
  
  
Regards, 
Vignesh Natarajan. 



BN Botyo Nikolov July 26, 2017 03:10 PM UTC

Hello Vignesh,

Thanks for your response. Could you be more specific. I couldn't understand when should I call this function.

Best regards,

Botyo



PK Prasanna Kumar Viswanathan Syncfusion Team July 27, 2017 01:07 PM UTC

Hi Botyo, 

We regret for the inconvenience caused.  

We have used the addParams method in the actionBegin event of ejGrid. This event will be triggered for every grid action before its starts. In this event we check the condition with the initial rendering and pass the first record & last record of first page in addParams method.  
 
Find the code example:  
 
 
@(Html.EJ().Grid<object>("FlatGrid") 
            .Datasource(ds => ds.URL(@Url.Action("UrlDataSource")).Adaptor(AdaptorType.UrlAdaptor))            
             .AllowPaging()    /*Paging Enabled*/            
            .AllowScrolling()   
            .ClientSideEvents(p => p.ActionBegin("begin"))           
            .Columns(col => 
            { 
             ------------------- 
             })) 
    <script type="text/javascript"> 
        function begin(args) { 
            if (!this.initialRender) { 
                var first = args.model.currentViewData[0]; 
                var last = args.model.currentViewData[11]; 
                args.model.query.addParams("first", JSON.stringify(first)); 
                args.model.query.addParams("last", JSON.stringify(last)); 
            } 
       } 
    </script> 
 
Refer to the Help document for the actionBegin event. 


Regards, 
Prasanna Kumar N.S.V


BN Botyo Nikolov July 27, 2017 01:27 PM UTC

Hello Prasanna,
The code is working fine. I was wondering if it is possible to pass a Bookmark attribute in the json and get it in the view.
The Action will look like that:
public ActionResult GetData([FromBody]CustomDataManager dataManager)
        {
            var dataSource = new List<Order>();
            var bm = "";            
          if (!string.IsNullOrEmpty(dataManager.Bookmark))
            {
                bm = dataManager.Bookmark;
            }
            
            for (int i = 1; i <= dataManager.Take; i++)
            {
                dataSource.Add(new Order
                {
                    OrderId = i,
                    CustomerId = i,
                    ShipCity = "Sofia, Bulgaria",
                    ShipName = "John Smith",
                    Freight = i                    
                });
            }            
            return Json(new { result = dataSource, count = 640, Bookmark = "New Bookmark" }, JsonRequestBehavior.AllowGet);
        }
Regards,
Botyo


PK Prasanna Kumar Viswanathan Syncfusion Team July 30, 2017 06:30 AM UTC

Hi Botyo, 

Query : “Pass the bookmark attribute” 

Yes. It is possible to pass the bookmark attribute for the last element throughout the dataManager. To achieve your requirement, use processQuery and processResponse method.  

In processQuery method we convert the queries into string and pass it to the server-side using Ajax post. If you want to modify the queries format from grid depending on your service, extend the processQuery method. Using custom adaptor we have to extend the processQuery method. 

In server-side we have to extend the DataManager and add the bookmark attribute. In processQuery method we have to add the first and last elements in that bookmark attribute.  

Find the code example :  


public ActionResult Data(CustomDataManger dm) 
        { 
            --------------------- 
            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 
        } 
 
public class CustomDataManger : DataManager 
        { 
            public EditableOrder first { get; set; } 
            public EditableOrder last { get; set; } 
        } 
----------------------------------- 

@(Html.EJ().Grid<object>("HierarchyGrid") 
        .Datasource(ds => ds.URL("/Grid/Data").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.UrlAdaptor)) 
        ------------------------- 
        .ClientSideEvents(eve =>  eve.Load("load"))  
) 
 
<script> 
     
 
     
    function load(args) { 
        this.model.dataSource.adaptor = new customAdaptor(); 
    } 
 
    var customAdaptor = new ej.UrlAdaptor().extend({ 
        processQuery: function (dm, query, hierarchyFilters) { 
            var obj = ej.UrlAdaptor.prototype.processQuery(dm, query, hierarchyFilters); 
            var data = ej.parseJSON(obj.data); 
            var grid = $("#HierarchyGrid").ejGrid("instance"); 
            if (grid.model.pageSettings.currentPage > 1) { 
                data.first = grid.model.currentViewData[0]; 
                data.last = grid.model.currentViewData[grid.model.pageSettings.pageSize - 1]; 
            } 
 
            return { 
                data: JSON.stringify(data), 
                url: obj.url, 
                ejPvtData: obj.ejPvtData, 
                type: "POST", 
                contentType: "application/json; charset=utf-8" 
            } 
        } 
    }); 
</script> 

To pass a message to the client from the controller, use the custom adaptor in the grid. In the custom adaptor, the processResponse has to be overridden to process the data from the server. We have extended processResponse method of the ej.UrlAdaptor and we can receive the bookmark attribute.  

Find the code example:  



public ActionResult Data(CustomDataManger dm) 
        { 
            ------- 
            return Json(new { result = Data, count = count, Bookmark = "New Bookmark" }, JsonRequestBehavior.AllowGet); 
        } 
var customAdaptor = new ej.UrlAdaptor().extend({ 
        processQuery: function (dm, query, hierarchyFilters) { 
            ----------- 
        }, 
 
        processResponse: function (data, ds, query, xhr, request, changes) {               
            var bookMark = data.bookMark; 
             return data;                    
        }, 
    }); 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon