I'm using free-jqgrid v4.15.5 and have a problem with Frozen column, Toolbar searching and Header grouping.
I had a similar question here and got the solution from Oleg
And the problem arises when I incorporate the frozen column feature into the example. The search field in the Date column does not appear and the position of Inv No is not good. Demo here
$(document).ready(function () {
var myData = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
myGrid = $("#list");
myGrid.jqGrid({
datatype: 'local',
data: myData,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', frozen: true },
{
name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', frozen: true,
formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
},
{ name: 'name', index: 'name', width: 70 },
{ name: 'amount', index: 'amount', width: 100, formatter: 'number', align: 'right' },
{ name: 'tax', index: 'tax', width: 70, formatter: 'number', align: 'right' },
{ name: 'total', index: 'total', width: 120, formatter: 'number', align: 'right' },
{
name: 'closed', index: 'closed', width: 110, align: 'center', formatter: 'checkbox',
edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' },
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:Yes;false:No' }
},
{
name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },
stype: 'select', searchoptions: { value: ':All;FE:FedEx;TN:TNT;IN:Intim' }
},
{ name: 'note', index: 'note', width: 100, sortable: false }
],
rowNum: 10,
rowList: [5, 10, 20],
//pager: '#pager',
gridview: true,
ignoreCase: true,
rownumbers: false,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
//caption: 'Just simple local grid',
height: '100%',
shrinkToFit: false,
width: 400
});
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
myGrid.jqGrid('setFrozenColumns');
myGrid.jqGrid('setGroupHeaders', {
useColSpanStyle: true, groupHeaders:
[
{ startColumnName: 'invdate', numberOfColumns: 5, titleText: "Group column 1" },
{ startColumnName: 'closed', numberOfColumns: 3, titleText: "Group column 2" },
]
});
myGrid.jqGrid('setGroupHeaders', {
useColSpanStyle: true, groupHeaders:
[
{ startColumnName: 'amount', numberOfColumns: 3, titleText: "Group column 3" },
]
});
$("#list_invdate,#list_closed,#list_ship_via,#list_note,#list_name").attr("rowspan", "2")
});
And can anyone solve this problem for me? Thanks so much.
P/s: Oleg, I'm looking forward to your response.
Sorry, but
setGroupHeaders
isn't really supported in common case ifsetGroupHeaders
will be called more a one time. As a workaround one can change the value ofrowspan
attributes or to set the height of rows of frozen columns. In your case, the following code added at the end of your demo can fix the problemSee https://plnkr.co/edit/sbDfCAg0h73G3Q3AaP2s?p=preview