Update a checkedlist filter and maintain selected value if it exists

[gombbcParticipant]

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)?

[gombbcParticipant]

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

[Peter StoevKeymaster]

Hi gombbc,

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

Example:

 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.
     $("#jqxgrid").jqxGrid('applyfilters');
 }
 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     showfilterrow: true,
     source: adapter,
     filterable: true,
     sortable: true,
     ready: function () {
         addfilter();
         source.localdata = generatedata(5);
          $("#jqxgrid").jqxGrid('updatebounddata');
          $("#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
http://www.jqwidgets.com/

[Author]

Posts