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'm using local sorting. I don't want my URL to be called to sort. I take it you're suggesting this because using dataSourceUrl automatically sets sorting to remote? That's an unexpected and undocumented (or at least not obviously documented) side-effect if so.
At this point I've ruled out using dataSourceUrl, I don't think it was intended to be used if you want to update the data in the grid unless you use the built-in filtering, which I cannot in this case.
That being said, the alternative I'm now trying to use is this:
-Set the datasource in the MVC Helper on the intial page load
-When the dropdown is changed, get new JSON data from my server using an ajax request
-Update the grid using the method you suggested:
$("#grid").igGrid("dataSourceObject", json);
$("#grid").igGrid("dataBind");
However, the grid still loses its sorting ability. If I click on the column headers at after dataBind is called, nothing happens. It seems like the dataBind method causes all of the grid's features, including sorting, to reset? Is this correct? If so, is there another workaround for this other than manually storing the grid's features on the client and then resetting them after every dataBind? This won't be too much work, I'll abstract it away and just never call databind directly, but I just want to check because it seems illogical that dataBind would behave this way. Side-effects are bad.
hi Josh,
if you have initially bound the grid to an URL, and then to an in-memory json object, in the way you've described it, i suggest to re-set the dataSource after the grid is rebound, in the following way:
$("#grid1").data("igGrid").options.dataSource = <url>;
so that next time you sort a column, it calls your initial URL.
If you can send me some of your code i can check it out and give other suggestions.
Thanks,
Angel
Thanks Angel. Same issue though, the grid loses all of it's display features despite the fact that we're only updating the data. Once I call dataBind, I can no longer sort the grid by clicking on the column headers.
Hi Josh,
Thanks for the detailed feedback. So you basically have the grid and filtering enabled, but you don't want any filter row inputs to be displayed, instead you'd like to re-render the grid based on a dropdown selection - and the dropdown is outside of the grid, something similar to this sample, i assume:
http://ko.infragistics.com/products/aspnet/sample/drop-down/sync-components
Please let me know if i understood correctly.
In this case you don't necessarily need to enable filtering and modify any URL parameters. you can bind the grid to JSON data, that comes from the server - you can call $.ajax({url: <your controller url>}) manually, and then set the data source like this and then rebind:
$("#grid").igGrid("dataSourceObject", json);$("#grid").igGrid("dataBind");
you can invoke this in your success callback.
So you need to handle the selection change event for your dropdown, and then invoke your controller, get the data and set it in the grid. I would prefer this approach.
Let me know if this helps. Thanks,
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.