jQuery UI Widgets Forums Grid Update a checkedlist filter and maintain selected value if it exists


This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 9 years, 11 months ago.

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

  • gombbc

    We use checkedlist filters in our grids for certain columns. These columns are not static and thus could change often. We would like to update data in the grid will maintaining any selected filters which still exist in the data set.

    Is there a simple way to achieve this type of update allowing the library to do the heavy lifting? Or, will we need to achieve it via a custom filtering approach (and is that even possible)?


    One more option, would it be possible to preserve the filters for only certain columns when calling updatebounddata?

    Peter Stoev

    Hi gombbc,

    You can use the “filteritems” property of your column to update the DropDownList filter items.


     var data = generatedata(500);
     var source = {
         localdata: data,
         datafields: [{
             name: 'firstname',
             type: 'string'
         }, {
             name: 'lastname',
             type: 'string'
         }, {
             name: 'productname',
             type: 'string'
         }, {
             name: 'date',
             type: 'date'
         }, {
             name: 'quantity',
             type: 'number'
         }, {
             name: 'price',
             type: 'number'
         datatype: "array"
     var addfilter = function () {
         var filtergroup = new $.jqx.filter();
         var filter_or_operator = 1;
         var filtervalue = 'Beate';
         var filtercondition = 'contains';
         var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
         filtervalue = 'Andrew';
         filtercondition = 'starts_with';
         var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
         filtergroup.addfilter(filter_or_operator, filter1);
         filtergroup.addfilter(filter_or_operator, filter2);
         // add the filters.
         $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
         // apply the filters.
     var adapter = new $.jqx.dataAdapter(source);
         width: 500,
         theme: 'energyblue',
         showfilterrow: true,
         source: adapter,
         filterable: true,
         sortable: true,
         ready: function () {
             source.localdata = generatedata(5);
              $("#jqxgrid").jqxGrid('setcolumnproperty', 'productname', 'filteritems', ['Cappuccino', 'Caramel Latte']);
         autoshowfiltericon: true,
         columns: [{
             text: 'First Name',
             datafield: 'firstname',
             width: 90
         }, {
             text: 'Last Name',
             datafield: 'lastname',
             width: 90
         }, {
             text: 'Product',
             datafield: 'productname',
             width: 170,
             filtertype: 'checkedlist'
         }, {
             text: 'Order Date',
             datafield: 'date',
             width: 160,
             cellsformat: 'dd-MMMM-yyyy'
         }, {
             text: 'Quantity',
             datafield: 'quantity',
             width: 80,
             cellsalign: 'right'
         }, {
             text: 'Unit Price',
             datafield: 'price',
             cellsalign: 'right',
             cellsformat: 'c2'

    Best Regards,
    Peter Stoev

    jQWidgets Team

    • This reply was modified 9 years, 11 months ago by  Peter Stoev.
    • This reply was modified 9 years, 11 months ago by  Peter Stoev.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.