Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I have a requirement where I need to build a grid with dynamic columns. I am dealing with a large dataset so I would like to use server-side paging,sorting,filtering logic so that I render only a page-size. I think I got the basic functionality working but just wanted to get my approach reviewed.

I am using asp.net MVC. A action route will be the json datasource for the jqgrid.

Reference: http://stackoverflow.com/questions/5111653/problem-showing-jqgrid-with-dynamic-column-binding.

My Approach :

  1. First make an ajax call to get the dynamic col model and other grid params (rows,page etc) except data.
  2. Update grid params (url , datatype and mtype) to enable server-side paging, sorting etc.

I am using a flag in the query string to determine if I need the col model (or) the data.

As you can see, I need to make two requests to set up the grid. One to get the col model and another one to get data & to update it to enable server-side interaction for subsequent requests. Is this ok ? Please advice.

Update: I updated the code based on oleg's suggestions. @oleg - Thanks for the thorough review. I realized later that async:false is not required and result.data was not being used, thanks for pointing those out. I briefly looked at the other posts you pointed me to. In my scenario I am building a new grid each time, based on user input. So I am planning to go with this approach unless it has any major dis-advantages.

    $.ajax({
                url: firstFetchURL,
                dataType: "json",
                type: 'POST',
                beforeSend: function () {
                    $("#loadingDiv").show();
                },
                success: function (result) {

                    if (result) {

                        if (!result.Error) {

                            var colM = result.colModelList;
                            var colN = result.columnNames;

                            $("#myGrid").jqGrid('GridUnload');

                            $("#myGrid").jqGrid({
                                url: secondFetchURL,
                                datatype: 'json',
                                mtype: 'POST',
                                colModel: colM,
                                colNames: colN,
                                height: "auto",
                                rowNum: 10,
                                pager: '#myGridPager',
                                caption: "Dynamic Grid",
                                viewrecords: true,
                                gridview: true
                            });
                        }
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    if (xhr && thrownError) {
                        alert('Status: ' + xhr.status + ' Error: ' + thrownError);
                    }
                },
                complete: function () {
                    $("#loadingDiv").hide();
                }
            });

I saw a related post http://stackoverflow.com/questions/2277962/jqgrid-and-dynamic-column-binding but looking for some direction from experienced JQGrid users.

Thanks for your time.

share|improve this question
add comment

migrated from stackoverflow.com Jul 27 '11 at 22:36

This question came from our site for professional and enthusiast programmers.

1 Answer

up vote 2 down vote accepted

Small recommendations:

  1. It seems to me that you can remove async: false parameter for the $.ajax call.
  2. You can remove result.data from the data returned by the ajax call. (After that you should and the line with var colD = result.data). The data will be not really used because you call trigger('reloadGrid'); immediately.
  3. On the other side the values for sortname and sortorder parameters should be included in the data model (as the properties of result).
  4. You can use url: secondFetchURL, datatype: 'json', mtype: 'POST' parameters directly in the jqGrid definition ( in $("#myGrid").jqGrid({/*here*/});. No trigger('reloadGrid') will be needed.

UPDATED: Look at this and this answers. Probably the approach is what you need from the dynamic columns.

You can take a look in the answer in case if you will need to use custom formatters.

share|improve this answer
    
One issue with my approach is I need to make two requests to set up the grid the first time, one to get the col model and another for the data. Is it possible to extend the Json reader so that we can the col model server-side like the other parameters. { total: xxx, page: yyy, records: zzz, rows: [ ...], colModel: {....}, // is it possible to support this in jqgrid colNames: {....} // is it possible to support this in jqgrid } –  StudentForever Jul 28 '11 at 14:30
    
@StudentForever: It is not possible because many parts of grid are currently not dynamic. I have the same opinion as you in the subject. Some time before I made the feature request which was stayed unanswered. –  Oleg Jul 28 '11 at 14:46
    
Very interesting , Thanks. Any final thoughts on my approach on making two requests to initialize the dynamic jqgrid based on my requirement. Thanks a lot for your time. –  StudentForever Jul 28 '11 at 14:53
    
@StudentForever: You are welcome! If you have common (general) grid settings the usage of two asynchronous ajax calls (one inside of the success handler of another) I find the logical consequence from the possibilities which you has. It is clear enough and easy to understand and to manage. One additional tip: try to use not so much jqGrid settings in the colModel which you save in the database. Instead of that you can consider to use column templates. –  Oleg Jul 28 '11 at 15:34
    
Ok, Thanks. Will look into the column templates option. Thanks again for all your inputs. –  StudentForever Jul 28 '11 at 15:54
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.