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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131722 Jul 25,2017 07:25 AM Jul 30,2017 02:30 AM ASP.NET MVC 6
loading
Tags: Grid
Botyo Nikolov
Asked On July 25, 2017 07:25 AM

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.

Botyo Nikolov
Replied On July 26, 2017 10:26 AM

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?


Vignesh Natarajan [Syncfusion]
Replied On July 26, 2017 10:48 AM

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. 


Botyo Nikolov
Replied On July 26, 2017 11:10 AM

Hello Vignesh,

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

Best regards,

Botyo


Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 27, 2017 09:07 AM

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

Botyo Nikolov
Replied On July 27, 2017 09:27 AM

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 30, 2017 02:30 AM

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 


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.

;