jQWidgets Forums

jQuery UI Widgets Forums Grid How to add date filter on range column

This topic contains 1 reply, has 1 voice, and was last updated by  Admir Hodžić 6 years, 2 months ago.

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

  • Admir Hodžić
    Participant

    I am trying to preload (init) filter on grid which showing filter row (showfilterrow: true) on date colun whit filter type set to range (filterType: 'range')
    Am I doing something wrong or it is impossible to set date range filter through api.
    Here is my fiddle JS Fiddle for preinitealied date filter

    Here is my code if fiddle stop working

    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 filtervalueFrom = new Date(2019,2,20);
        var filtervalueUpTo = new Date(2019,2,20);
    
        var filterconditionOd = 'GREATER_THAN_OR_EQUAL';
        var filterconditionDo = 'LESS_THAN_OR_EQUAL';
        var filterOd = filtergroup.createfilter('datefilter', filtervalueFrom, filterconditionOd);
        var filterDo = filtergroup.createfilter('datefilter', filtervalueUpTo, filterconditionDo);
        var filter_or_operator = 1;
        filtergroup.addfilter(filter_or_operator, filterOd);
        filtergroup.addfilter(filter_or_operator, filterDo);
        $("#jqxgrid").jqxGrid('addfilter', 'date', filtergroup);
        $("#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();
         },
         autoshowfiltericon: true,
         columns: [{
             text: 'First Name',
             datafield: 'firstname',
             filterType: 'checkedlist',
             filteritems: ["Beate", "Antoni"],
             width: 90
         }, {
             text: 'Last Name',
             datafield: 'lastname',
             filterType: 'checkedlist',
             width: 90
         }, {
             text: 'Product',
             datafield: 'productname',
             width: 170
         }, {
             text: 'Order Date',
             datafield: 'date',
             width: 160,
             cellsformat: 'dd.MM.yyyy',
             filterType: 'range'
         }, {
             text: 'Quantity',
             datafield: 'quantity',
             width: 80,
             cellsalign: 'right'
         }, {
             text: 'Unit Price',
             datafield: 'price',
             cellsalign: 'right',
             cellsformat: 'c2'
         }]
     });

    Admir Hodžić
    Participant

    Appologies for spaming,
    But looks like it date filter woks if you set one date end EQUAL condition

    http://jsfiddle.net/sp87xyc1/

     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 filtervalue = new Date(2019,2,18);
            var filtercondition = 'EQUAL';
            var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
            var filter_or_operator = 1;
            filtergroup.addfilter(filter_or_operator, filter1);
            $("#jqxgrid").jqxGrid('addfilter', 'date', filtergroup);
            $("#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();
         },
         autoshowfiltericon: true,
         columns: [{
             text: 'First Name',
             datafield: 'firstname',
             filterType: 'checkedlist',
             filteritems: ["Beate", "Antoni"],
             width: 90
         }, {
             text: 'Last Name',
             datafield: 'lastname',
             filterType: 'checkedlist',
             width: 90
         }, {
             text: 'Product',
             datafield: 'productname',
             width: 170
         }, {
             text: 'Order Date',
             datafield: 'date',
             width: 160,
             cellsformat: 'dd.MM.yyyy',
             filterType: 'range'
         }, {
             text: 'Quantity',
             datafield: 'quantity',
             width: 80,
             cellsalign: 'right'
         }, {
             text: 'Unit Price',
             datafield: 'price',
             cellsalign: 'right',
             cellsformat: 'c2'
         }]
     });
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.