javascript - Jqgrid Column width According to Its Content -

javascript - Jqgrid Column width According to Its Content -

i have many column in jqgrid.all columns showing space on both sides.i want column without spacing. column width should have width according content. have tried autowidth not working.

actual behavior looks like:

----------------------------------------------- | name | mobile | email | -----------------------------------------------

and need :

---------------------- |name|mobile no|email| ----------------------

here code

$("#list").jqgrid({ datatype: "local", data: mydata, colnames: ["name", "mobile", "email", "amount", "tax", "total", "closed", "shipped via", "notes"], colmodel: [ { name: "id", width: 65, align: "center", sorttype: "int", hidden: true }, { name: "invdate", width: 80, align: "center", sorttype: "date", formatter: "date", formatoptions: { newformat: "d-m-y" }, datefmt: "d-m-y" }, { name: "name", width: 70 }, { name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right" }, { name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right", hidden: true }, { name: "total", width: 65, formatter: "number", sorttype: "number", align: "right" }, { name: "closed", width: 75, align: "center", formatter: "checkbox", edittype: "checkbox", editoptions: { value: "yes:no", defaultvalue: "yes" } }, { name: "ship_via", width: 100, align: "center", formatter: "select", edittype: "select", editoptions: { value: "fe:fedex;tn:tnt;in:intim", defaultvalue: "intime" } }, { name: "note", width: 70, sortable: false } ], rownum: 10, rowlist: [5, 10, 20], pager: "#pager", rownumbers: true, sortname: "invdate", viewrecords: true, sortorder: "desc", caption: "test altrows", height: "auto" });

kindly solve problem.

the question old. jqgrid don't provide variable column width. uses fixed column width , width of every column set during creating grid before filling grid data. jqgrid don't provide method allows alter width of column after grid created.

nevertheless requirement stay. 1 need create grids columns width dynamically set based on content of texts in column.

i suggested in the answer setcolwidth method can alter column width after grid created. using method 1 can suggest implementation of requirements. created the demo demonstrates this. uses next code

class="lang-js prettyprint-override">$("#list").bind("jqgridafterloadcomplete", function () { var $this = $(this), icol, irow, rows, row, cm, colwidth, $cells = $this.find(">tbody>tr>td"), $colheaders = $(this.grid.hdiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"), colmodel = $this.jqgrid("getgridparam", "colmodel"), n = $.isarray(colmodel) ? colmodel.length : 0, idcolheadprexif = "jqgh_" + this.id + "_"; $cells.wrapinner("<span class='mywrapping'></span>"); $colheaders.wrapinner("<span class='mywrapping'></span>"); (icol = 0; icol < n; icol++) { cm = colmodel[icol]; colwidth = $("#" + idcolheadprexif + $.jgrid.jqid(cm.name) + ">.mywrapping").outerwidth() + 25; // 25px sorting icons (irow = 0, rows = this.rows; irow < rows.length; irow++) { row = rows[irow]; if ($(row).hasclass("jqgrow")) { colwidth = math.max(colwidth, $(row.cells[icol]).find(".mywrapping").outerwidth()); } } $this.jqgrid("setcolwidth", icol, colwidth); } });

first of wrap content of cells of grid , content of column headers within span: <span class='mywrapping'></span>. allows me calculate width of content of cells. goes through rows , rows , find max width utilize in phone call setcolwidth method.

be above solution first effort implement "autowidth" of columns based of content. not work in case of more sophisticated content of grid.

by way width of columns changed on sorting , on paging because maximal width of columns changed in case.

updated: if 1 uses columnchooser or other methods 1 need recalculate column width on more events jqgridafterloadcomplete. 1 need add together corresponding event name (event names divided spaces) in bind/on after "jqgridafterloadcomplete". illustration the answer demonstrates recalculation column widths after columnchooser. 1 uses $("#list1").on("jqgridafterloadcomplete jqgridremapcolumns", function () {...}); instead of $("#list").bind("jqgridafterloadcomplete", function () {...});

updated 2: functionality in included out-of-the-box in free jqgrid, fork of jqgrid, develop starting end of 2014. feature included in first version (v4.8) of free jqgrid. see the wiki. current version of free jqgrid 4.13.0. 1 don't need follow tricks described above , upgrade jqgrid current version of free jqgrid. 1 can include cmtemplate: { autoresizable: true } create columns auto-resizable , add together autoresizeonload: true alternative reset width of columns @ end of every loading. alternatively 1 can phone call autoresizeallcolumns() method whenever 1 want recalculate width of auto-resizable columns.

javascript jquery jqgrid