Reputation: 3729
I saw this link at Ignore case while grouping . So I implemented it and it works great but for some reasons, it doesn't work with certain data.
If I group by Make and Make, there, Chevrolet Tahoe show 3 seperate "Tahoe" rows. How do you allow multiple grouping for it to work?
Source code is found at https://dealerapp-test.bookitout.com/testcase1.html that include jqgridData's data value as it doesn't fit here due to exceeding 30000 characters error. There on that webpage, open up Chevrolet then look for "Tahoe".
Short version here without the jqgridData's value...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- This force IE to use the latest version of HTML, CSS and JavaScript instead of being forced to use 1 specific IE version only -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>....</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.4/ui.jqgrid.css" />
<script type="text/javascript" src="scripts/jquery-v2.0.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="scripts/jqgrid-v4.5.4/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="scripts/jqgrid-v4.5.4/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jqgridSpreadsheetId = 'MyInventoryJqgrid_Spreadsheet';
var jqgridPagerId = 'MyInventoryJqgrid_Pager';
var jqgridData = "<<Data not included>>";
//jqgridSpreadsheetId.useJSON = true;
//jqGrid Plugin...
//http://www.trirand.com...
$('#'+jqgridSpreadsheetId).jqGrid({
//url: "jsonResult.json", //jqgridData, //'server.php?q=5',
//datatype: "json",
datatype: 'jsonstring', //'json',
datastr: jqgridData,
colNames: ['Id', 'Accepted-Id', 'Rejected-Message', 'Import Status', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory', 'Hidden-Inventory-Tracker-Location-Id', 'Inventory Tracker Location', 'Category'],
colModel:[
{name: 'Id', index: 'Id', sortable: false, width: 0, align: 'left', hidden: true, },
{name: 'AcceptedId', index: 'AcceptedId', sortable: false, width: 0, align: 'left', hidden: true,},
{name: 'RejectedMessage', index: 'RejectedMessage', sorttype: 'text', width: 60, align: 'center', hidden: true, },
{name: 'ImportStatus', index: 'ImportStatus', sorttype: 'text', width: 60, align: 'center' },
{name: 'StockNumber', index: 'StockNumber', sorttype: 'text', align: 'center'},
{name: 'Vin', index: 'Vin', sorttype: 'text', width: 190, align: 'center' },
{name: 'Year', index: 'Year', sorttype: 'int', align: 'center' },
{name: 'Make', index: 'Make', sorttype: 'text', align: 'center' },
{name: 'Model', index: 'Model', sorttype: 'text', align: 'center' },
{name: 'Trim', index: 'Trim', sorttype: 'text', align: 'center' },
{name: 'Mileage', index: 'Mileage', sorttype: 'int', align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '0' } },
{name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{name: 'StockDate', index: 'StockDate', sorttype: 'date', align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
{name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } },
{name: 'InventoryTrackerLocationId', sortable: false, width: 0, align: 'left', hidden: true,},
{name: 'InventoryTrackerLocation', index: 'InventoryTrackerLocation', sorttype: 'text', align: 'center' },
{name: 'Category', index: 'Category', sorttype: 'text', align: 'center' }
],
rowNum: 1000000000, //-1, //10, //06/13/2013 - It is reported that the use of "-1" broke jqGrid when loadonce:true is used. Alternatively, use the max # of rows...
rowList: [], //#[10,20,30], //Disable page size dropdown...
pager: '#'+jqgridPagerId,
pgbuttons: false, //Disable page control like next, back button...
pgtext: null, //Disable pager text line like "Page 0 of 10"...
viewrecords: false, //Disable current view record text like 'View 1-10 of 100'...
sortname: 'Make ASC, Model',
sortorder: 'ASC',
viewrecords: true,
sortorder: "desc",
ignoreCase: true, //This make the local-search and sorting of values be case insensitive...
caption: "Data Optimization",
height: 400,
grouping: true,
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [ function(x, y) { return String(x).toLowerCase() == String(y).toLowerCase(); } ] //Make it case insensitiive when grouping. (No more seperate column values of same word when groupped)...
}
});
});
</script>
</head>
<body>
<div><table id="MyInventoryJqgrid_Spreadsheet"></table></div>
<div id="MyInventoryJqgrid_Pager"></div>
</body>
</html>
Upvotes: 1
Views: 436
Reputation: 222007
You can fix the problem in very easy way. The property isInTheSameGroup
is array like the the property groupField
. So you can specify different rules how to group in different grouping level. If you want to makes case insensitive grouping on the both grouping levels you should change
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [
function(x, y) { return String(x).toLowerCase() == String(y).toLowerCase(); }
]
}
to
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [
function(x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); },
function(x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); }
]
}
or to
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [
caseInsensitiveCompare,
caseInsensitiveCompare
]
}
where caseInsensitiveCompare
are defined as
var caseInsensitiveCompare = function (x, y) {
return String(x).toLowerCase() === String(y).toLowerCase();
};
By the way the demo from the answer where I suggested the feature isInTheSameGroup
originally uses two level grouping and isInTheSameGroup
in the demo is array with two callback functions: one callback for one grouping level.
Upvotes: 1