jqGrid: Enable paging while converting HTML table to grid

Question

Been googling all this while on how to convert an html table to something pagable and sortable, and I have stumbled across jqGrid jquery plugin. I've learned so far that we have to call tableToGrid() to convert the table (which we pass as a jquery selector string to the method). I've also tried a host of other things, like for e.g:

tableToGrid('#GridView1');

$('#GridView1').jqGrid({
    rowNum: 10,
    pager: '#pager',
    rowList: [10,20,30]
});

But all these do not provide me with the proper result. Is paging possible when we convert an html table to grid?

Answer 1

You should try with

tableToGrid('#GridView1', {
    rowNum: 10,
    pager: '#pager',
    rowList: [10,20,30]
});

You can also add more jqGrid options as the second parameter of tableToGrid. You can also get reference to the colModel of the jqGrid after conversion with respect of

var cm = myGrid.getGridParam("colModel");

and then modify some parameters of the column model.

UPDATED: for example with the following code you can set some column data as edittype: "select".

for (var i = 0, l=cm.length; i < l; i += 1) {
    var colModelColumn = cm[i];
    // search for the clolumn with the name colModelColumnName.
    // variables colModelColumnName and selectedOptions are defined
    // in another code fragment above this one
    if (colModelColumn.name === colModelColumnName) {
        jQuery.extend(colModelColumn, { edittype: "select",
                                        editoptions: { value: selectedOptions }});
        break;
    }
}