jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Column Headers are Wrong After Entering Filter Criteria
Tagged: column, filter, filter row, grid, horizontally, jqxgrid, scroll
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 2 months ago.
-
Author
-
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:
- Scroll the grid to the far right
- Scroll back to the first column
- 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!
JasonHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.