views:

1553

answers:

2

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.

+2  A: 

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 http://stackoverflow.com/questions/2705174/vertical-textes-inside-of-table-headers-with-respect-of-a-javascript-based-on-svg and see results on http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO1.htm.

Oleg
Thanks. Perhaps you can help further! The BASIC html table is drawn on the page and contains `checkboxes` allowing the user to select certain items and then submit their selection by sumbitting the containing `form` - problem is when I call `tableToGrid` on table, it messes up the name and id of the `checkboxes`. Do you know how to tell tableToGrid not to touch the contents of the `checkbox` cells?
Jimbo
The names of the vertical columns look like not very nice in Internet Explorer only. In all other modern browsers it looks like very good. Exactly about this problem I asked the question http://stackoverflow.com/questions/2705174/vertical-textes-inside-of-table-headers-with-respect-of-a-javascript-based-on-svg.I don't really understand why do you need a BASIC html table. I use permanently jqGrid direct which allows to modify some data from the table like checkboxes. Look at http://trirand.com/blog/jqgrid/jqgrid.html, choose "Row Editing" on the tree part and then "Input Types".
Oleg
A jqgrid table takes some time and code to construct, whilst tableToGrid on a basic html is one quick call. I only need the column sorting abilities (and pretty look) of jqgrid so no point in a pure jqgrid table. But as mentioned, these checkboxes cause a problem!
Jimbo
I can only repeat my recommendation to invest a little more time and use jqGrid really. Function `tableToGrid` like jqGrid don't support comboboxes with texts. So I recommend you read all information which you want to see in jqGrid from your page and save inside an object. Then delete your **basic** table and then create jqGrid with `datatype: 'local'` (see example from my answer) and fill the grid with information saved in the object before. It should work.
Oleg
A: 

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')
Jimbo