Changes in slide menu can affect pivot grid?

Webix JS
#1

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

#2

Will the above scenario be possible ?

#3

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

#4

@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

#5

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;
   }
}
#6

@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

#7

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

#8

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

#9

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)

#10

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.