jqGrid tableToGrid “options” parameter

Question

Basics

Hi all, I have see the tableToGrid method (by Peter Romianowski) defined as tableToGrid(selector, options) on the jqGrid wiki, but cannot find anywhere that has documentation of the options

Does anyone know about these or where to find them? EDIT: Thanks Oleg, resolved!

More

What Im actually trying to do is encase the resulting jqGrid in a form, which will submit the checkbox values that are in a column of the table. My problem is that the tableToGrid method appears to be removing the name property from the checkbox elements and hence they are not being submitted with the form post.

Answer 1

RESOLVED

The jqGrid tableToGrid method will find the value of the checkboxes in the original table and automatically implement the multiSelect: true option on the resulting jqGrid, showing intrinsic checkboxes. To get a list of the selected rows IDs, simply call

$('#grid').getGridParam('selarrrow')

Answer 2

Like you can read on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:table_to_jqgrid the options parameter of tableToGrid method is nothing more as the options of the jqGrid which you create (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options).

If I undesnand your main problem carrect, you have some data received from the server as an answer on the form submit. And you want to place this data in a grid. To make this you can use more direct way with using datatype: 'local' of jqGrid. Here is an example:

var grid = jQuery('#list').jqGrid({
    caption: 'Testclusters',
    height: 'auto',
    gridview: true,
    rownumbers: true,
    sortable: true,
    datatype: 'local',
    viewrecords: true,
    pager: '#pager',
    pgbuttons: false,
    pginput: false,
    rownumbers: true,
    colNames: ['Name', 'Testtiefe', 'Std', 'FachlicheTests', 'RowVersion'],
    colModel: [
        { name: 'Name', index: 'Name', width: 120 },
        { name: 'TesttiefeName', width: 180 },
        { name: 'Std', width: 21, formatter: 'checkbox', align: 'center' },
        { name: 'IsFachlicheTests', width: 21, formatter: 'checkbox', align: 'center' },
        { name: 'RowVersion', width: 50, hidden: true }
                ]
}).navGrid('#pager', { edit: false, add: false, del: false, refresh: true, view: false, search: false })
  .navButtonAdd('#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
      onClickButton: function() {
          jQuery('#list').jqGrid('columnChooser');
      }
});
grid.jqGrid('gridResize');
var myData = [
    { Name: "VIA XP", TesttiefeName: "Alle SW-Produkte", Std:true, IsFachlicheTests:false, RowVersion: "20FC31" },
    { Name: "KUBUS", TesttiefeName: "Alle SW-Produkte", Std:false, IsFachlicheTests:true, RowVersion: "20FC32" }
];

for (var i = 0; i <= myData.length; i++) {
    grid.addRowData(i + 1, myData[i]);
}

First of all you create an empty jqGrid and then fill it with respect of addRowData method.

Moreover if you have many checkboxes inside of jqGrid, it can be interesting for you to look at my example from Vertical text inside table headers using a JavaScript-based SVG library and see results on http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO1.htm.

Answer 3

Change column width for any number of columns

In this case after the jqgrid getting build you can just go to the table getting generated and manually change all the column widths of column header and the respective data without righting some tedious code.

        var tabColWidths ='70px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px';

function reDefineColWidth(){
        var widthsArr = tabColWidths.split('|');

    for(var j=0; j < widthsArr.length ; j++ ){
            $('.ui-jqgrid-labels > th:eq('+j+')').css('width',widthsArr[j]);
            $('#grid tr').find('td:eq('+j+')').each(function(){$(this).css('width',widthsArr[j]);})
        }
}