jquery - Jqgrid - Uncaught RangeError: Maximum call stack size exceeded -

dynamic column width according content

i tried adjusting column width dynamically according content way ,by finding characters length of each row ,then getting max length out of , setting 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;                 (icol = 0; icol < n; icol++) {                             input = [];                             (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 working fine.

however slow , getting uncaught rangeerror: maximum call stack size exceeded

error when have more records 500.

can tweak above solution can faster?

here 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 finding max character size of div content..i tried directly taking title attribute of <td> way- rowdata = $(row.cells[icol]).attr('title'); - giving same error

colum model formatter fixed row height:

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

or how can reduce performace of code? please help..

the code posted wrong, i'm sure have other place of code origin of long title , long cell content.

the main error in code posted: you should don't make binding grid inside of loadcomplete. loadcomplete executed multiple times. on every execution add one more binding, wrong. instead of should move $("#grid").on("jqgridafterloadcomplete jqgridremapcolumns", function () {...}); , set before creating grid. should understand jqgridafterloadcomplete event triggered before loadcomplete every time. suppose produces recursion in way.

i strictly recommend migrate free jgrid (see here) or @ least use autowidthcolumns method published in jquery.jqgrid.autowidthcolumns.js (see here). see the answer more information , the old demo. need use $("#grid").jqgrid("autowidthcolumns"); before creating grid. required bindings ($("#grid").on("jqgridafterloadcomplete jqgridremapcolumns", function () {...});) method autowidthcolumns internally.