Column Headers are Wrong After Entering Filter Criteria

[JasonD5150Participant]

I’m seeing column header corruption on a wide grid that scrolls horizontally. I scroll the grid to the far right, and then back to the first column. Once the first column is displayed I enter a filter criteria in the first column’s filter. Once the grid re-draws the filtered data, the column header labels will be incorrect and the filter indicator will be on the wrong column.

It’s easy to recreate with this JSFiddle:

1. Scroll the grid to the far right
2. Scroll back to the first column
3. Enter text in the first column filter field

Here’s the grid code I’m using:

   $(function () {
      var _jsonData = {
         "selected": false,
         "errorColumn": null,
         "displayOrder": null,
         "version": null,
         "data": [{
            "taxId": "123123123",
            "accountNumber": 38403,
            "tradeName": "MEMORY LANE",
            "reportPeriod": "201401",
            "billOfLadingNumber": "1",
            "billOfLadingDate": 1391151600000,
            "productCategory": "DIESEL",
            "scheduleCode": "2A",
            "grossGallons": 1137243,
            "sellerTaxId": "000888999",
            "sellerTradeName": "WAYNE ENTERPRISES",
            "buyerTaxId": null,
            "buyerTradeName": null,
            "originCity": "MISSOULA",
            "relatedCrossMatchSchedule": null
         }, {
            "taxId": "900900900",
            "accountNumber": 38403,
            "tradeName": "WAYNE ENTERPRISES",
            "reportPeriod": "201401",
            "billOfLadingNumber": "10",
            "billOfLadingDate": 1391151600000,
            "productCategory": "DYEDDIESEL",
            "scheduleCode": "10Y",
            "grossGallons": 184887,
            "sellerTaxId": null,
            "sellerTradeName": null,
            "buyerTaxId": "888999000",
            "buyerTradeName": "BIG DOLLAR BUYER",
            "originCity": "BOZEMAN",
            "relatedCrossMatchSchedule": null
         }]
      };
      var _dataAdapter = new $.jqx.dataAdapter({
         localdata: _jsonData,
         datatype: "json",
         datafields: [
            {name: 'taxId', type: 'string'},
            {name: 'accountNumber', type: 'number'},
            {name: 'tradeName', type: 'string'},
            {name: 'reportPeriod', type: 'string', map: "reportPeriod.reportYearPeriod"},
            {name: 'billOfLadingNumber', type: 'string'},
            {name: 'billOfLadingDate', type: 'date'},
            {name: 'productCategory', type: 'string'},
            {name: 'scheduleCode', type: 'string'},
            {name: 'grossGallons', type: 'number'},
            {name: 'sellerTaxId', type: 'string'},
            {name: 'sellerTradeName', type: 'string'},
            {name: 'buyerTaxId', type: 'string'},
            {name: 'buyerTradeName', type: 'string'},
            {name: 'originCity', type: 'string'},
            {name: 'relatedScheduleCode', type: 'string', map: 'relatedCrossMatchSchedule.scheduleCode'},
            {name: 'relatedGrossGallons', type: 'number', map: 'relatedCrossMatchSchedule.grossGallons'},
            {name: 'relatedSellerTaxId', type: 'string', map: 'relatedCrossMatchSchedule.sellerTaxId'},
            {name: 'relatedSellerTradeName', type: 'string', map: 'relatedCrossMatchSchedule.sellerTradeName'},
            {name: 'relatedBuyerTaxId', type: 'string', map: 'relatedCrossMatchSchedule.buyerTaxId'},
            {name: 'relatedBuyerTradeName', type: 'string', map: 'relatedCrossMatchSchedule.buyerTradeName'}
         ]
      });
      $("#crossMatchListGrid").jqxGrid({
         source: _dataAdapter,
         showfilterrow: true,
         filterable: true,
         columns: [
            {text: 'Trade Name', datafield: 'tradeName', width: 140},
            {text: 'Tax ID', datafield: 'taxId', width: 140},
            {text: 'Account', datafield: 'accountNumber', width: 140},
            {text: 'BOL', datafield: 'billOfLadingNumber', width: 140},
            {text: 'BOL Date', datafield: 'billOfLadingDate', cellsformat: "d", width: 140},
            {text: 'Product', datafield: 'productCategory', width: 140},
            {text: 'Schedule', datafield: 'scheduleCode', width: 140},
            {text: 'Seller Name', datafield: 'sellerTradeName', width: 140},
            {text: 'Seller ID', datafield: 'sellerTaxId', width: 140},
            {text: 'Buyer Name', datafield: 'buyerTradeName', width: 140},
            {text: 'Buyer ID', datafield: 'buyerTaxId', width: 140},
            {text: 'Origin', datafield: 'originCity', width: 140},
            {text: 'Gallons', datafield: 'grossGallons', width: 80},
            {text: 'Cross Schedule', datafield: 'relatedScheduleCode', width: 80},
            {text: 'Cross Seller Name', datafield: 'relatedSellerTradeName', width: 140},
            {text: 'Cross Seller ID', datafield: 'relatedSellerTaxId', width: 140},
            {text: 'Cross Buyer Name', datafield: 'relatedBuyerTradeName', width: 140},
            {text: 'Cross Buyer', datafield: 'relatedBuyerTaxId', width: 140},
            {text: 'Cross Gallons', datafield: 'relatedGrossGallons', width: 80}
         ]
      });
   });

Thanks!
Jason

[DimitarParticipant]

Hello Jason,

Thank you for your feedback. We were able to reproduce this issue and have created a work item about it. This behaviour does not occur if you use the standard filter menu instead of the filter row, however.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts