jquery - Jqgrid Editable Column width According to Its Content -
jquery - Jqgrid Editable Column width According to Its Content -
i have included code provided oleg in link.it works set size of column depending on content. problem facing right when set "editble: true" column value, span getting displayed along element.this span added individual cells acquire width of text nowadays in cells.now edit coloumn column value displayed is:
<span class="mywrapping">text</span>
please help.
you right. seems me more effective include wrapping <span>
temporary measure width of cell. in case wrapping span not remain in cells , no problems described ever seem more.
the demo provides modified version of implementation "autowidth" behavior in grid. uses next code
var autosizecolumn = function (icol) { var $this = $(this), irow, rows, row, colwidth, cm = typeof icol === "string" ? $this.jqgrid("getcolprop", icol) : $this.jqgrid("getgridparam", "colmodel")[icol], getouterwidth = function ($elem) { var $wrappingspan, width; $elem.wrapinner("<span class='mywrapping'></span>"); $wrappingspan = $elem.find(">.mywrapping"); width = $wrappingspan.outerwidth(); $elem.html($wrappingspan.html()); homecoming width; }; if (cm == null || cm.hidden) { return; // don't alter width of hidden columns } colwidth = getouterwidth($(this.grid.headers[icol].el).find(">div")) + 25; // 25px sorting icons (irow = 0, rows = this.rows; irow < rows.length; irow++) { row = rows[irow]; if ($(row).hasclass("jqgrow")) { colwidth = math.max(colwidth, getouterwidth($(row.cells[icol]))); } } $this.jqgrid("setcolwidth", icol, colwidth); }, autosizecolumns = function () { var $this = $(this), icol, colmodel = $this.jqgrid("getgridparam", "colmodel"), n = $.isarray(colmodel) ? colmodel.length : 0; (icol = 0; icol < n; icol++) { autosizecolumn.call(this, icol); } }; $grid.bind("jqgridafterloadcomplete jqgridremapcolumns jqgridinlineaftersaverow", autosizecolumns);
updated. alternatively 1 can utilize autowidthcolumns
plugin posted jquery.jqgrid.addcolumn.js
here. in case 1 needs include both jquery.jqgrid.setcolwidth.js
, jquery.jqgrid.autowidthcolumns.js
, create grid using $("#gridid").jqgrid("autowidthcolumns").jqgrid({/*option*/});
instead of standard $("#gridid").jqgrid({/*option*/});
.
the demo uses autowidthcolumns
plugin.
jquery html css jqgrid width
Comments
Post a Comment