Jqgrid - Uncaught RangeError: Maximum call stack size exceeded

Question

Dynamic Column width According to Its Content

I tried adjusting the column width dynamically according to the content this way ,by finding characters length of each row ,then finally getting the max length out of it and setting it to grid column width.

loadComplete : function () {
                $("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
                var $this = $("#grid"),
                colModel = $this.jqGrid("getGridParam", "colModel"),
                iCol,
                iRow,
                rows,
                row,
                n = $.isArray(colModel) ? colModel.length : 0;
                var rowData = "";
                var rowDataLen="";
                var input = [];
                var divs = $( "div" );
                var colWidth=125;
                for (iCol = 0; iCol < n; iCol++) {
                            input = [];
                            for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
                                        row = rows[iRow];
                                        rowData = $(row.cells[iCol]).find(divs).html();
                                        if(rowData != undefined)
                                            rowDataLen = rowData.length;
                                        input.push(rowDataLen);
                            }
                            var finalWidth =  Math.max.apply(null, input);
                            if(finalWidth < colWidth)
                                finalWidth = colWidth;
                            $("#grid").jqGrid("setColWidth", iCol, finalWidth);
                            var gw = $("#grid").jqGrid('getGridParam','width');
                            $("#grid").jqGrid('setGridWidth',gw);
                       }                    
            });     
        },

and it is working fine.

However it is too slow and getting Uncaught RangeError: Maximum call stack size exceeded

error when I have more records like 500.

Can anyone help to tweak the above solution so that it can be faster?

Here is my HTML Code:

<td role="gridcell" style="text-align:left;" title="Hot-forged Hot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forged." aria-describedby="grid_test">
<div style="max-height: 120px">Hot-forged Hot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forged.</i><br><br><i>tttttttttttttttttttttttttttttttt</i></div></td>

I am actually finding the max character size of the div content..i also tried directly taking the title attribute of <td> this way- rowData = $(row.cells[iCol]).attr('title'); - but it is also giving the same error

colum model formatter for fixed row height:

formatter : function(cellvalue){ if(cellvalue == undefined || cellvalue == null) { cellvalue = ""; } return '' + cellvalue + ''; },

Or how can i reduce the performace of this code? Please help..

Answer 1

The code which you posted is wrong, but I'm sure that you have other place of your code which is the origin of long title and long cell content.

The main error in the code which you posted: you should don't make binding to the grid inside of loadComplete. loadComplete will be executed multiple times. On every execution you add one more binding, which is wrong. Instead of that you should move $("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...}); and set it before creating the grid. You should understand that jqGridAfterLoadComplete is event which will be triggered before loadComplete every time. I suppose that you produces recursion in some way.

I would strictly recommend you to migrate to free jGrid (see here) or at least to use autoWidthColumns method which I published in jQuery.jqGrid.autoWidthColumns.js (see here). See the answer for more information and the old demo. What you will need is just to use $("#grid").jqGrid("autoWidthColumns"); before creating the grid. All required bindings ($("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...});) do the method autoWidthColumns internally.