Geek Answers Handbook

How to split one cell by 2 in jqgrid?

You can get such a design through jqgrid

------------------------------- ---------- | S.N0 | order ID | Date | Amount | --------- ------- | | Location | Status| | ------------------------------ --------- | 1 | 45 | 1/1/11 | 100 | --------- -------- | | E123 | Done | | ------------------------------ ----------

Here, in 2X2 (second column, second row), I need to show the identifier and location of the order. The location value should appear below the order ID. Maybe?

+4
source share
1 answer

For a column, you can define a custom formatter that you can apply to any style you like. In this formatter, you have access to the values ​​of alll objects in the line. So, for your Order / Location formatting, you can combine these two types:

 function orderFmatter( cellvalue, options, rowObject ) { return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Location + "</div>"; }

You probably want to add classes to those divs so you can better style them to meet your needs. Regarding the definition of the column, you will need to declare customFormatter on one of the columns (note: the one that it is declared will be the value of the cell variable in the above function), the other column should be hidden, while it is needed as part of the rowObject. Example.

 { name: 'OrderID', index: 'OrderID', width: 90, formatter:orderFmatter}, { name: 'Location', index: 'Location', hidden: true},

Here is my complete sample:

 $("#grid").jqGrid({ datatype: "local", height: 250, colNames: ["SNO", "OrderID", "Location", "Date", "Status", "Amount"], colModel: [{ name: 'SNO', index: 'SNO', width: 60}, { name: 'OrderID', index: 'OrderID', width: 90, formatter:orderFmatter}, { name: 'Location', index: 'Location', hidden: true}, { name: 'Date', index: 'Date', width: 80, formatter:dateStatusFmatter}, { name: 'Status', index: 'Status', width: 80, hidden: true}, { name: 'Amount', index: 'Amount', width: 80} ], caption: "Qaru Example", }); function orderFmatter( cellvalue, options, rowObject ) { return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Location + "</div>"; } function dateStatusFmatter( cellvalue, options, rowObject ) { return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Status+ "</div>"; }

A violin is also available here .

It just leaves your headline, which is a little trickier and can get ugly. I suggest not doing the separation level on the header and doing something like Order Id/Location . This can be done by following these steps:

 jQuery("#grid").jqGrid('setLabel', 'OrderID', 'Order Id/Location');

Like in this fiddle .

If you absolutely need to set the title, as in your example, I can understand what I can understand, but this should get you started.

+5
source

More articles:


All Articles