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.

It seems to me that the name of the checkbox in the column name of the corresponding column header of the grid. If it is not so, you needs probably to have an additional column in the grid with this kind on information. — Oleg, Apr 28 '10 at 13:36

score 7 · Answer 1 · edited May 23 '17 at 12:33

7

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.

edited May 23 '17 at 12:33

Community

1
1

answered Apr 28 '10 at 12:18

Oleg

220,925
34
403
798

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 Apr 28 '10 at 13:14
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 Apr 28 '10 at 13:33
2

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 Apr 29 '10 at 07:12
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 Apr 29 '10 at 08:08
1

I had same issue. I really want to generate html table "by hands" and then apply nice theme and sortable functions. I'm looking forward for an options to disable the "rewrite" of input ids. In the meantime, Tablesorter (http://tablesorter.com/docs/#Demo) seems to do the job more simply. – Stéphane Aug 02 '11 at 12:56
@Stéphane: Sorry, could you describe your requirements more detailed? Why you want to create the table yourself and not allow jqGrid to do this? Do you *really need* multi-column corting? jqGrid has the feature to sort any column but not two column at one. In case of one column sorted you don't need and additional "Tablesorter". – Oleg Aug 02 '11 at 13:04
1

Basically, I wanted to keep it simple, having only one view which generate the page (and not one for the main table, another to load the data). In addition, I don't want to configure the colModel and all other options in jqGrid with javascript. This is it. Please note I'm using more advanced jqGrid table in some other pages, with sorting, searching and filtering, but here I just needed to keep it simple. Any idea ? – Stéphane Aug 17 '11 at 14:17
@Stéphane: First of all the jqGrid should get the data from *controller* per ajax. It corresponds better to MVC design. What you other write is the question of the taste. If you will use `tableToGrid ` plugin you will have many restrictions and small problems. I don't really understand which question you ask and how I could help you. Probably it would be better if you describe all in a question. – Oleg Aug 17 '11 at 16:37

score 1 · Accepted Answer · answered May 04 '10 at 09:03

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

score 0 · Answer 3 · answered Nov 13 '13 at 12:48

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]);})
        }
}

jqGrid tableToGrid "options" parameter

3 Answers3

Linked