Case sensitive issue when multilevel grouping of 2 or more columns, using version 4.5.4

Question

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>

score 1 · Accepted Answer · edited May 23 '17 at 10:31

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.

Awesome!!! I knew it would have to be array but I wasn't sure until now. Thanks man! — fletchsod, Nov 18 '13 at 23:43

Case sensitive issue when multilevel grouping of 2 or more columns, using version 4.5.4

1 Answers1