I would like to update my grid using datasourceurl, but allow local sorting that is maintained after the datasourceurl is updated. Is this possible?
Here's a basic scenario of what I'd like to happen:
-Grid is initially loaded.
-User sorts grid by clicking on a column header.
-User selects a different option from some dropdown.
-Grid's data is updated, but the sorting of the column is retained.
Here's what I've tried so far:
client-side:
var url = getNewUrlFromSomeDropDown();
$myGrid.igGrid('option', 'dataSource', url);
...which causes that url to be hit, which does something like this (MVC / C#):
server:
Example 1 (doesn't work at all, grid is blank):
public ActionResult _Employee_Grid(int someFilteringInt)
{ List<Employee> employees = GetEmployees(someFilteringInt); return Json(employees, JsonRequestBehavior.AllowGet);
}
Example 2 (Populates grid with new data, but the data is not sorted in any particular way, and the sorting arrows are lost.)
public ActionResult _Employee_Grid(int someFilteringInt) { List<Employee> employees = GetEmployees(someFilteringInt);
GridModel model = new GridModel(); GridSorting sorting = new GridSorting(); sorting.Mode = SortingMode.Single; model.Features.Add(sorting); model.DataSource = employees.AsQueryable<Employee>(); return model.GetData(); }
Also, in the 2nd example, I must add the sorting feature to the model, or else sorting is lost all together. This means that the GetData() method generates different JSON data depending on the features and properties of the grid? If so, this doesn't make sense IMO. GetData should have nothing to do with the grid's setup. It sort of defeats the purpose of only reloading the data instead of the entire grid.
Thanks in advance for any help!
I think maybe you're missing the point. Given what you've said, here's what I have to do in order to refresh the grid's data from an AJAX call that takes a value from my dropdown: (this took hours of reading, again, ugh)
-Enable remote filtering.
-Somehow hide the filtering textboxes below the column headers, because I don't actually want our users to be able to filter by columns, but this is the only way the IgGrid can refresh it's data apparently.
-When my dropdown changes, call the method igGridFiltering('filter', etc.). The "fieldName" here is just used so the grid will put it in the querystring, it doesn't actually have to exist in the grid, it's just a "workaround" to be able to pass querystring data.
-Either setup my MVC action to accept and parse OData, or parse it into a querystring in the $myGrid.data('igGrid').dataSource.settings.urlParamsEncoded event on the client, because that's what MVC accepts, querystrings.
-As before, my MVC action receives a querystring I can use, hits our Repository to get the updated data, and returns it in JSON.
-Voila, the grid is updated.
However, this REALLY smells. We're bastardizing the IgGrid's filtering functionality. Something as simple as refreshing the grid given a new dropdown selection is a common business need. There must be a better way to accomplish this?
I guess just using the datagridurl is not an option, but is there a way to update the grid's data without completely re-rendering the grid or losing it's features? Should I use the dataSourceObject option? I'm open to anything at this point.
Hi Josh,
You don't need to change anything in the url. The grid does that out of the box. All filtering, sorting, paging, params are encoded automatically in the URL. you can use a tool like Firebug to check this and see what the format is. By default OData is used. You can have a look at the following help topic which elaborates on this:
(Example for sorting url params):
http://es.infragistics.com/help/topic/58efbde9-eac8-40aa-9536-948ded4fd4be
If you still need to change something in the URL, before it is requested, you can use the urlParamsEncoding and urlParamsEncoded grid events, this forum topic can help:
http://es.infragistics.com/community/forums/t/65946.aspx
Regarding MVC and GetData - When the server is not aware of how the grid is configured, it does not know there is sorting. Therefore, when data is bound, the IQueryable won't be sorted, it will be just paged. when a feature is working remotely, the operations aren't performed on the client side, when data is returned. Imagine you have a million rows, and you have 20 records per page. I have remote paging and remote sorting enabled. if i change the page, the grid will first page 20 records, so only 20 records will get bound and sent to the client - and moreover, the IQueryable will be sorted. The grid will read the url params and see which columns have been sorted asc or Desc and apply that, on the server side. If sorting is local, though, nothing is sent in the URL.
That's why i have suggested that if you have a mix of local / remote features, and a remote request is done, you can force the grid to do the sorting locally, after the response arrives from the server.
Hope it helps. Thanks,
Angel
Thanks Angel. The reason I'm updating the datasource is because the grid is filtered by a dropdown, and I would like to retrieve new data based on this filtering. The only way I've seen how to accomplish this using the datasourceUrl is to change the parameter in my querystring to retrieve new results. I'm not changing the entire address, just the querystring parameter. What is the correct way to handle this, to update my grid's data based on a dropdown value?
Regarding the second scenario, I'm not doing a page refresh, I'm doing an AJAX call, so the browser keeps it's state, MVC is irrelevant. Of course the server is not aware of the grid's display properties, but why should it need to be if it's just returning data? All the server should need to do is return the data, and the IG Grid should update it's data, it's filtering and sorting properties are already there on the client. The fact that it's also updating it's sorting, filtering, and other display information when it gets new data must be because I'm not going about updating the data correctly, because it would be illogical to update the grid's properties every time you update the data.
So, how should I handle this? What is the correct way to handle this, to update my grid's data based on a dropdown value?
hi,
if you'd like to just rebind the grid, you should do:
$("#grid1").igGrid("dataBind");
your code tries to change the data source url, after the grid has been created. i am not sure why you need to do this and i wouldn't advise to do this at runtime. a New data source may imply new columns schema, etc. there is no guarantee your grid will function correctly.
regarding the second scenario, this is related to the fact that MVC is stateless. When you define your grid in the View, and do a subsequent remote request to a controller action, there is no info on the server about how your grid is configured, therefore GetData can only infer features and parameters from the URL. i mean that local sorting is not preserved when you do remote paging/filtering, etc. So if you have local sorting, and remote paging enabled, this is how the url could look like:
http://localhost:14991/samplesbrowser/grid/PagingGetData?controller=GridLocalSorting?page=1&pageSize=25
there is no sorting information encoded in the url. If it was set to remote, then the sorted columns would have been encoded in the URL, and GetData would apply sorting, apart from paging, on the server side.
What you can do, as a workaround, is to manually call sortColumn from the sorting API, after the response comes . You can do this by handling the dataRendered event. here is how you can sort a column programatically:
$("#grid1").igGridSorting("sortColumn", "SomeColumnKey");