Filtering timeline sections

Scheduler Javascript
#1

Following the sample “09_api/09_filtering_events.html” I accomplished to filter events in my timeline. But now the question is… can I filter timeline sections in a similar way?

Thx

#2

Hello,
there is no built in way to do so, although it’s possible.
In order to do so, you should:

  1. load sections into the timeline via ‘scheduler.serverList’ method

[code]sections=[
{key:1, label:“James Smith”},
{key:2, label:“John Williams”},
{key:3, label:“David Miller”},
{key:4, label:“Linda Brown”}
];

scheduler.createTimelineView({
name: “timeline”,
…
y_unit: scheduler.serverList(“timeline”, sections),
…
});[/code]

  1. And implement a function that will filter the sections array and call scheduler.updateCollection in order to redraw scheduler with the new sections:

[code]function filterSections(){
var display = sections.slice();//sections - complete(unfiltered) list of timeline sections
for(var i=0; i < display.length; i++){
if(!allowSection(display[i])){
display.splice(i,1);
i–;
}
}
//update timeline reloads options and redraws the view
scheduler.updateCollection(“timeline”, display);
}

//function that defines whether the section will be displayed, based on the some criteria
function allowSection(section){
if(section.label.indexOf(“David”) > -1)//just an example, filter by string inclusion
return true;
return false;
}
[/code]
So you should define function that will do the filtering(return true/false that will determine is fection will be displayed) and call filterSections when needed

#3

Thx Aliaksandr. It seems a good way to do that but I don’t know if it works in my case because I can’t use the scheduler.serverList method to load sections. Since I explained in this post I have a TREE timeline, and the way of loading sections from database doesn’t let me use scheduler.serverList.

I load the sections like this: y_unit:<?php echo json_encode($seccions_tree); ?>,

Is this applicable without using serverList? Is there another way to do that?

Thx

#4

Hello,
i believe you still can use server lists.
You load sections by echoing js array on the page, so on the client there is no difference whether it is hardcoded array(as in my example) or the server side data.
Tree structure can be used with server list, since it wrapped into js array (serverList and updateCollection works with an arrays)

[code]//some variable to hold complete tree of sections
sections = <?php echo json_encode($seccions_tree); ?>;

//initialize server list with the tree,
//do .slice in order to make sure operations with the list won’t give any side effects on the list
scheduler.serverList(“timeline”, sections.slice());

//load options from the server list, not the variable directly
…
y_unit: scheduler.serverList(“timeline”),[/code]
The thing that will differ from code from my previous post is implementation of filterSections function, it should be modified in order to filter a tree structure

#5

It worked! Thx :smiley:

var filter_inputs = document.getElementById("filtre-seccions").getElementsByTagName("input"); for (var i=0; i<filter_inputs.length; i++) { var filter_input = filter_inputs[i]; filter_input.checked = true; filter_input.onchange = function() { var display = seccions.slice();//sections - complete(unfiltered) list of timeline sections for (var i=0; i < display.length; i++) { if (!this.checked && this.name == display[i].key) { display.splice(i,1); i--; } } //update timeline reloads options and redraws the view scheduler.updateCollection("timeline_seccions", display); } }