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..will that be reduced if i directly take title attribute of tag as i have the same data in both the tags?
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..
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire