jQWidgets Forums

jQuery UI Widgets Forums Grid Column Headers are Wrong After Entering Filter Criteria

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • JasonD5150
    Participant

    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


    Dimitar
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.