Changes in slide menu can affect pivot grid?

My requirement is Based on the selection of options available in side menu , can it affect the same in pivot grid. Like selection of different options in one component results in desired result in other

Eg: In my side menu i have a drop down state with options:failed,Done.So if i select the failed option can the pivot grid display only the failed state rows on it ? ...In spite we already have a same in-build filter functionality with the pivot grid itself but we need it in side menu component

Comments

  • Will the above scenario be possible ?

  • edited June 2018

    Hi,

    If the field is already available in the resulting set, you can filter the inner Datatable with normal filter API:

    $$("pivot").$$("data").filter(field_name, value);
    

    https://snippet.webix.com/ia78z0ze

    Also, you can try pushing all the built-in filters into the side menu, like here: https://docs.webix.com/samples/61_pivot/06_filters/01_outer_filters.html

  • @Helga .. Thanks a lot helga ... The same scenario in the below snippet will it be possible if the sidemenu and the pivot grid components are in two different files ?

    https://docs.webix.com/samples/61_pivot/06_filters/01_outer_filters.html

  • edited June 2018

    Yep, just make sure to include a layout for filters into a side menu UI:

    { id: "chartFilters", rows:[]},
    

    And insert Pivot filters directly into it ( you need to point to it by its id):

    view:"pivot",
    on:{
        onViewInit: function(name, config){
          if(name == "filters" && $$("chartFilters"))
             webix.ui(config.elements, $$("chartFilters"));
          config.elements = false;
       }
    }
    
  • @Helga Thanks a lot helga ... The same scenario in the below snippet will it be possible if the sidemenu and the pivot grid components are in two different files ?
    https://snippet.webix.com/ia78z0ze

  • edited June 2018

    Yes, sure, once both files are inlcuded into an application in this or that way.

  • Thank u so much @Helga ....For the scenario in the below given snippet , filtering by date picker will work ?...I tired date picker filtering, but am not able to filter because of the date format mismatch i guess.My date format is "Date": "15/06/2018"

    https://snippet.webix.com/ia78z0ze

  • edited June 2018

    hi @Helga

    {
                view: "datepicker", id:"date1",value:getCOBDate(), label: "Date:", width: 300, name: "date", stringResult: true, format:"%d/%m/%y", on:{ 
                    onChange:function(newv){
                        console.log("date",newv);
                      $$("pivot").$$("data").filter(newv)
                    }
                  }
    
            }
    function getCOBDate(){
        var today = new Date();
        var yesterday = new Date(today);
        //console.log(today.getDay());
        //console.log(yesterday);
        if (today.getDay() == 0) {
            yesterday.setDate(today.getDate() - 2);
        }else if (today.getDay() == 1) {
            yesterday.setDate(today.getDate() - 3);
        }else{
            yesterday.setDate(today.getDate() - 1);
        }
        return yesterday
    }
    

    Am using the above snippet , to filter the pivot grid based on the date picker filter. But it is not working as expected..Am getting the below format for the
    console.log("date",newv); Is this bcos of this below format it is not able to filter ?

    date Mon Jun 18 2018 18:16:00 GMT+0530 (India Standard Time)
    bundle.main.js:14165 date Tue Jun 19 2018 00:00:00 GMT+0530 (India Standard Time)

  • Hello,

    When filtering dates, you need to use a filtering function, as by default the filter() method matches strings. And you need to compare date objects.

    The filterung function will look like this: https://snippet.webix.com/59w9alps

    In the sample I just compare dates as UNIX timestamps. If you need more advanced techniques, have a look at webix.Date methods.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!