Question

I was going through the documentation and source code of jqGrid 4.3.1 when it comes for the tableToGrid() function and I found that the ColModel and ColNames are ignored when included in the options object as they are constructed from HTML table layout.

My question is there a way to force tableToGrid() to accept those two arrays (ColModel,ColNames) rather than construct them out of the HTML table, especially if the the table columns are known in advance.

When I went through the code, I found this portion in the code for TableToGrid

function tableToGrid(selector, options) {
...
...
// Build up the columnModel and the data
var colModel = [];
var colNames = [];
jQuery('th', jQuery(this)).each(function() {
    if (colModel.length === 0 && selectable) {
        colModel.push({
            name: '__selection__',
            index: '__selection__',
            width: 0,
            hidden: true
        });
        colNames.push('__selection__');
    } else {
        colModel.push({
            name: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
            index: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
            width: jQuery(this).width() || 150
        });
        colNames.push(jQuery(this).html());
    }
});

However, my hack would consider these changes

    function tableToGrid(selector, options) {
...
...
// Build up the columnModel and the data
if(options.hasOwnProperty("colModel") && options.hasOwnProperty("colNames")) {
    var colModel = options.colModel;
    var colNames = options.colNames;
} else {
    var colModel = [];
    var colNames = [];
    jQuery('th', jQuery(this)).each(function() {
                    if (colModel.length === 0 && selectable) {
                    colModel.push({
                    name: '__selection__',
                    index: '__selection__',
                    width: 0,
                    hidden: true
                    });
                    colNames.push('__selection__');
                    } else {
                    colModel.push({
                    name: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
                    index: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
                    width: jQuery(this).width() || 150
                    });
                    colNames.push(jQuery(this).html());
                    }
    });
}

I just would like to know if there’s an easier way (may be an option I missed) that would enforce such behaviour without the need to adjust the source code.

The reason I am doing this in the first place is to force the datefmt option for some of the fields as they are ignored by the jQgrid causing issues with the search functionality. If @Oleg can give some insight about this, it will highly appreciated.

Cheers, N.

Answer 1

I think the main your problem is that you use tableToGrid at all. I find the question about the common usage or architecture as technical question.

If you have typed data like numbers, dates, currency and so on you want probably that the data will be correctly sorted, by jqGrid for example. Parsing of localized data from the HTML table and unformatting of the data is not the best way. You save your time if you would create jqGrid directly. You should provide the input data in data parameter. In the way the data will be easy and safe read, sorted and paged. You can easy include toolbar filtering or advanced searching or some other searching of filtering. All will good work only if you will provide jqGrid pure data.

See the answer for more information.