Justins Fat Tire

Since MVC has gotten so popular and for a good damn reason we've lost the venerable WebForms grids. However a great replacement is the jqGrid an extension of the jQuery UI. However it does take some setup in your View and I personally find their documentation horrendous. Below is a very basic jqGrid but you need an empty table with the id that matches what's in the grid and a div that's used for the pager. You'll notice these items have to match and the div MUST be below the table for the display to work correctly. I'm using an MVC controller to get the data for the grid back. Now this won't let you add, delete, edit, etc because that gets a lot more complicated. For me this is a pretty basic grid. You need to specify a url to get data, I almost always use json as my datatype, and a GET to the server. Whatever data your return needs to be in a JSON format that matches the format in the  jsonReader section of the grid. See another post of mine on how to return ...

So ever since MVC for asp.net started becoming all the rage, and for good reason! Many people have bemoaned the loss of the venerable DataGrid from WebForms. Well there are a few options out there. You have Teleriks Kendo UI suite which is great but costs money. There are a few other options but the best jqGrid a jQuery plugin. Now this grid can be a bit tricky to use. I personally find the documentation a bit short to put it politely. I've done enough grids now I'm getting the hang of it and want to share some pointers for other ASP.net MVC developers out there. Now let's assume in your View you have a nice jqGrid pointed to a controller action (I'll make another post about this as well). jqGrids are very powerful and support paging, grouping, filtering, sorting, etc. Now the bad part is you have to handle all that in your controller. This controller action will show you have to sort, page, and generally retrieve data. Now for the jqGrid to work correctly it needs ...

I've been working on a project that utilizes the Telerik Kendo UI grid. I've found that I have a need to change the values in the current row using client side tech (Javascript/jQuery). It's actually pretty easy to do. You get the grid, then the model bound to the grid and change the values on the model. This will refresh the values in the grid on the client side. You can save these new values in the Update controller action you define in the grid. // get the grid and model used to bind against the grid var grid = $("#AdminFalloutMappingGrid").data("kendoGrid"), model = grid.dataItem(this.element.closest("tr")); // get a value from the model, using the property name on the model var something = model.get("PropertyName"); // update the model using the Property Name model.set("PropertyName", "value");