5 JQGrid Related Things I Spent Too Long Looking For

  • Home
  • ASP.net
  • 5 JQGrid Related Things I Spent Too Long Looking For

It is a data-driven world. And if garbage in, is garbage out, then data in is data out. There are many ways to represent data to the user today as many languages and plugins have matured to include data as an integral part. But as more and more applications are moving towards the web platform, it is without question that JQGrid still remains a very highly used data presentation/interaction tool among developers. Although it is a mature plugin today, it is not without its woes, primarily due to recurrent bugs and labyrinthine documentation  One particular feature of JQGrid that is quite confusing to put together is the sub-grid  Oftentimes we find ourselves spending hours looking for a solution to a sub-grid issue, which turns out to be very simple, yet elusive.

Therefore, this is my compilation of the 10 JQGrid/Sub-grid related things that I spent too long looking for. I hope this will be useful.

1. Properly Implementing a JQGrid Sub-grid in ASP.Net MVC 3

Lot of examples and documentation I see related to the subgrid were either using local data in JavaScript or retrieving data from a PHP server-side code. It gets even more confusing because there is 1) the sub-grid  and 2) the sub-grid as a JQGrid. 1) is pretty much useless and has no functions other than just displaying the data. And it uses a string [][] matrix to represent rows and columns. Quite the pain if you are dealing with object models in your MVC app. 2) is just a JQGrid that is offset like a sub-grid and is a fully functional JQGrid. Surprisingly,  I found most people using 1)… Oh well. Here is how we can get the JQgrid as a sub-grid working. (I am assuming that you already know how to make a simple JQGrid work with your application. If not, take a peek at one of my earlier posts which talks about that.)

First thing, like with any other MVC task, we need a model! The simplest way to do this is make a GridViewModel, that looks something like this:

Once we are set with that, we need our controller. Assuming that you already have some controller built, we will only look at the methods that deal with receiving the POST data from the JQGrid and the sub-grid.

Now that we have the controller done, time to get the messy part done, the View. Assuming that you have rest of your view setup, here is the JQGrid part.

2. Changing some CSS Properties of the Grid

Let us make two small changes, yet two vary common things people do, so that you will get the point of this. We will change the background of a column of the sub-grid and remove the search and refresh buttons from the sub-grid navigation bar.

To remove the buttons, we will have to change the CSS behavior within the loadComplete event. To change the background, we can assign a CSS class to a particular column. Here is how it is done:

That’s about it!

3. Using Inline Editing

Similar to the GetMainData method, you need to had a method in your controller that handles the editing of data. After that, you only need to make a few changes. We will implement edit on double-click.

And that’s it. You are done!

4. Adding JQuery Auto-complete to Inline Edit Field

So now that we are editing inline, let us add an auto-complete that makes an ajax call to our server. Like with previous changes, you need a method in your controller that returns a Json list of things you want to show in the auto-complete list. Here is how it is done.

That’s it!

5. Scrolling to the Last Edit Postion on Grid Refresh

So the problem is that if you are editing a list of grid items and going down the list, you face an issue. If you are using inline edit, and then the grid refreshes after your edit, the grid scrolls up to the up. Then you have to scroll down, find the next item and repeat that for evry single row. Clearly, a horrible UI. We can fix that by keeping track of the last-scroll position and setting the page to that position everytime the grid reloads. Here is how we can do that:


Leave a Comment