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.

Performing Server-side Operations on Multi-Page Selections

Thread ID:

Created:

Updated:

Platform:

Replies:

131452 Jul 10,2017 03:06 PM Jul 28,2017 12:05 AM JavaScript 11
loading
Tags: ejGrid
Matt Abercrombie
Asked On July 10, 2017 03:06 PM

I'm using the multi-select checkbox ("select all") functionality, and I'm having some issues with what I'm trying to accomplish. I want to be able to pass all selected records to the server and perform an operation on them (any operation - specifics aren't relevant).

Scenario:
  1. I have 5 pages of data (200 records each) = 1000 records
  2. I filter the records (by customer, for example) = 750 records
  3. I select all 750 records and want to perform the server operation "Foo" on all of them. Alternatively, I may select 10 / 750 across 3 pages to submit.

Currently, I can only access one page of selected records (i.e., 200 out of filtered total) from the server - and I'm doing this via the "getSelectedRecords" client-side method of the grid and passing the result as a parameter to the controller action. If the client can only determine the selected records on the current page, how can I determine all selected records across all pages on the server?



Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 12, 2017 08:57 AM

Hi Matt, 

Thanks for contacting Syncfusion support.  

According to your requirement you need to get the selected records from all page when using checkbox selection. We have already discuss about this requirement in the below knowledgebase documentation  
 

 Refer the above KB documentation and still if you face any issue please get back to us. 

Regards, 
Prasanna Kumar N.S.V 


Matt Abercrombie
Replied On July 13, 2017 10:41 AM

Thank you. However, that only answers part of my question (note: I have a remote datasource in which the "select all" functionality on the client-side is not particularly useful).

If I filter data in the grid, I need to be able to pass the filtered result set back to a controller action. 

I guess the more specific question would be how do I apply the filtering options to my server-side datasource using the GridProperties instance, similar to the export process?


Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 14, 2017 08:54 AM

Hi Matt, 

         Queries 
                                                  Response 

I have a remote datasource in which the "select all" functionality on the client-side is not particularly useful” 


In knowledgeBase documentation we used local data in Grid. If we used local data in Grid we can get the whole data from the dataSource. If we bind remote dataSource then we can only get the current page of Grid. So, we suggest you to send the checkSelectedRowIndexes to server-side and get the selected records in server side.  


If I filter data in the grid, I need to be able to pass the filtered result set back to a controller action.” 


If you need the filtered data to the controller, use getFilteredRecords method of ejGrid. This method is used to get filtered record in Grid.  
 
For more information, refer the below help document. 
 


how do I apply the filtering options to my server-side datasource using the GridProperties instance” 


For applying filtering options in server-side, use the below code example:  

public ActionResult GridFeatures() 
        { 
            GridProperties grid = new GridProperties(); 
            List<Column> colList = new List<Column>(); 
            --- 
           grid.AllowPaging = true; 
            grid.AllowFiltering = true; 
            List<FilteredColumn> filter = new List<FilteredColumn>(); 
            filter.Add(new FilteredColumn() { Field = "OrderID", Value = 10248, Operator = FilterOperatorType.Equals, MatchCase = true }); 
            grid.FilterSettings.FilteredColumns = filter; 
            grid.DataSource = OrderRepository.GetAllRecords().ToList(); 
            return View(grid); 
        } 
 


Regards, 
Prasanna Kumar N.S.V 
 


Matt Abercrombie
Replied On July 18, 2017 09:58 AM

Thank you for your assistance.

1. I intend on using the checkSelectedRowIndexes, but I need the filtered result set first.

2. getFilteredRecords is a client-side method, with presumably the same drawbacks when using a remote data source (current page only)

3. You've misunderstood the filtering that I want to do on the server - I don't want to create a filter in the controller method. The filter settings need to originate on the client and be applied in the controller method. Please see below for what I want to accomplish.

In the DataOperations class, there is an Execute method that takes the unfiltered data source and a GridProperties instance. The GridProperties data source is what I need to get. The way this is done for the export process is below, but I cannot figure out how to do this for other controller methods.

To get the GridProperties instance for the export process:

     string gridModel = System.Web.HttpContext.Current.Request.Params["GridModel"];

     GridProperties gridProperty = ConvertGridObject(gridModel);

The ConvertGridObject is described here. The part that does not work is getting "GridModel" request parameter, as that request parameter does not exist. How can I pass this into the request?


Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 19, 2017 11:37 AM

Hi Matt, 

         Queries 
                                                    Response 

getFilteredRecords is a client-side method, with presumably the same drawbacks when using a remote data source (current page only)” 

The filter settings need to originate on the client and be applied in the controller method. Please see below for what I want to accomplish. 


Once we bind remote dataSource in Grid, we have loaded the Grid with only the paginated data as a load on demand concept. So, when we using getFilteredRecords is a client-side method we will get only the current page data. 
 
 
In the attached sample we are using URL adaptor and we initiate the filterSettings in client-side. Once we define the filterSettings in Grid, the DataManager class helps in binding the Grid queries passed to the server-side. Based on those queries you can perform server-side operation on the Grid data.  
 
The query parameters are serialized by the DataManager class and the server-side operations such as sorting, filtering, paging are performed by the PerformSortingPerfomWherFilterPerformSkip and PerformTake methods. In Server-side we able to get the whole data instead of current page.  
 
Find the code example:  
 
 
    $(function () { 
        var dataManager = ej.DataManager({ url: "/Grid/Data", adaptor: new ej.UrlAdaptor() }); 
 
        $("#Grid").ejGrid({ 
            dataSource: dataManager, 
            --- 
            allowFiltering: true, 
            filterSettings: {  filterType: "menu", filteredColumns: [{ field: "ShipCity", operator: "startswith", value: "r", predicate: "and", matchCase: true }] }, 
            columns: [ 
                   
                    ---- 
            ] 
        }); 
    }); 
 
------------------------------------------------ 
 
public ActionResult Data(DataManager dm) 
        { 
            IEnumerable Data = OrderRepository.GetAllRecords(); 
            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations(); 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                Data = operation.PerformSorting(Data, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator); 
            } 
            int count = Data.AsQueryable().Count(); 
            if (dm.Skip != 0) 
            { 
                Data = operation.PerformSkip(Data, dm.Skip); 
            } 
            if (dm.Take != 0) 
            { 
                Data = operation.PerformTake(Data, dm.Take); 
            } 
            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 
        } 
 



If we misunderstood your requirement, share the following details. 

1. Code example of a Grid. 

2. Essential Studio Version details. 

3. Please explain the requirement with more information.  

Regards, 
Prasanna Kumar  N.S.V 


Matt Abercrombie
Replied On July 19, 2017 12:05 PM

1. Any grid configuration with a remote data source will do. It must allow filtering, sorting, and multiselection.

2. I'm using the latest stable version 15.2.0.46.

3. With the aforementioned grid configuration, here is the scenario:

a. The user will sort and filter the grid.

b. The user will click a button that posts back to the controller. For example, say I have an "Assign" button that when clicked I want to take all of the records in the grid and assign them to a user. This operation must only be applied to the filtered, selected records across all pages. To accomplish this, I would want to make an ajax call to my controller's "Assign" method, passing in the results of checkSelectedRowIndexes. Within that controller method, I need to be able to obtain the GridProperties object based on the client filter and sort values set by the user (this should be very similar to how the GridProperties object is obtained when exporting, as I've already mentioned). With the GridProperties object, I should be able to call the DataOperations.Execute method with my IEnumerable data source and the GridProperties object. Presumably, this will provide me with the exact state of the grid on the client - filtered and sorted - as my working result set. Once I have that, I should be able to use the checkSelectedRowIndexes values to further filter my working result set to only those records that were selected. Once that is done, I can execute a method to perform the user assignment.

Again, the problem I am having is I cannot achieve this part. Please advise on how I can accomplish this.


Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 24, 2017 07:29 AM

Hi Matt, 

As per your suggestion we have created a sample in Grid. In this sample once we perform filtering or sorting in Grid and click a button we send the PostBack to the controller using the ajaxPost. In this ajaxPost we send the Grid model.  

In server-side we deserialize the Grid model using Syncfusion.JavaScript.Utils.DeserializeToModel and in this model we can get the GridProperties object based on the filter and sort values that we have done in client-side. With the GridProperties object, we call the DataOperations.Execute method with IEnumerable data source and the GridProperties object. In this execute method we can get the filtered and sorted data. If we send the checkSelectedRowIndexes to server-side using ajaxPost and we can get the selected records from the filtered data.  
 
Find the code example and sample:  
 
 
 
<button id="buttonnormal"> Query </button> 
<br /> 
 
<div id="Grid"></div> 
 
 
 
<script type="text/javascript"> 
    $(function () { 
        var dataManager = ej.DataManager({ url: "/Grid/Data", adaptor: new ej.UrlAdaptor() }); 
 
        $("#buttonnormal").ejButton({ 
            size: "mini", 
            showRoundedCorner: true, 
            click: "btnClick", 
        }); 
 
        $("#Grid").ejGrid({ 
            dataSource: dataManager, 
            ------------------- 
            columns: [ 
                   
                    ------------------------- 
            ] 
        }); 
    }); 
 
    function btnClick(args) { 
        var grid = $("#Grid").ejGrid("instance"); 
        grid.model.dataSource = null; 
        grid.model.query = null; 
 
        $.ajax({ 
            type: "POST", 
            url: "/Grid/DataSource", 
            data: { "model": JSON.stringify(grid.model) }, 
            success: function (response) { 
                ------ 
            } 
        }) 
    } 
</script> 
 
------------------------------------------------ 
public ActionResult DataSource(string model) 
        { 
            GridProperties gridModel = (GridProperties)Syncfusion.JavaScript.Utils.DeserializeToModel(typeof(GridProperties), model); 
            IEnumerable DataSource = OrderRepository.GetAllRecords().ToList(); 
            DataOperations dp = new DataOperations(); 
            IEnumerable FilteredData = dp.Execute(DataSource, gridModel); 
            return Json(model, JsonRequestBehavior.AllowGet); 
        } 
 

Regards, 
Prasanna Kumar N.S.V 


Matt Abercrombie
Replied On July 24, 2017 11:38 AM

Thank you. That looks like exactly what I want to accomplish, but I am getting an exception during the deserialization method. I've attached my model string.

The exception is: "booleanedit is not a valid value for EditingType"

The exception seems to stem from the "columns" property of the grid and one of the column definitions (see below).

{"type":"checkbox","width":50,"clipMode":"ellipsiswithtooltip","tooltip":"{{:value}}","visible":true,"showInColumnChooser":true,"allowResizing":true,"field":"","textAlign":"center","allowSorting":false,"allowFiltering":false,"allowGrouping":false,"editType":"booleanedit"}


Please advise.


Attachment: gridmodelstring_a2b56c59.zip

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 26, 2017 09:06 AM

Hi Matt, 

We can reproduce the mentioned issue when we mention editType in columns property. So, We have confirmed the issue with “Deserialization is not working fine when we mention editType in columns and logged a defect report. This issue will be included in Volume 3, Service Pack 1 2017 which has been scheduled to be rolled out at the end of August 2017. 

Regards, 
Prasanna Kumar N.S.V 


Matt Abercrombie
Replied On July 26, 2017 11:03 AM

I've attached a workaround for the aforementioned defect. After getting past that issue, I ran into another issue with the checkSelectedRowsIndexes array and multiselect. Here is a playground link to see the issue: http://jsplayground.syncfusion.com/4hgxka4y

Scenario:

  1. Filter the grid where "Ship Country = brazil". Total items is 83 across 9 pages.
  2. Check the "select all" checkbox. You will see the array output above the grid.
  3. Notice that the array output is wrong and shows 90 items, not 83. The last page's array should be [0, 1, 2], but instead has [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].
  4. Paging seems to correct the array output. I think additional filtering and sorting needs to clear the array as well.
I have been able to work past this issue as well by creating and maintaining my own list of selected indexes via appropriate events. I was also able to perform the necessary calculations to obtain a 1-dimensional array of indexes (i.e., range from 0 - 82 in relation to the above example), as the page information is not relevant for what I am trying to accomplish on the server.

As of now, I have workarounds for any remaining issues and I am able to accomplish my original goal - with a remote data source, pass all selected records to the server and perform an operation on all of them.

Thank you for your assistance.


Attachment: sfgridserializationdefectworkaround_355f841d.zip

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 28, 2017 12:05 AM

Hi Matt, 

We can reproduce the mentioned issue in the attached sample. We also consider this as a defect and This issue will be included in Volume 3, Service Pack 1 2017 which has been scheduled to be rolled out at the end of August 2017.  

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.

;