Filtering timeline sections based on some condition

Scheduler
#1

Hi
i am loading the sections in timeline view using below property , how to filter the timeline sections on client side?
timeline.AddOptions(sections);

Similarly for events also i am unable to filter them using filter_view method like below
scheduler.filter_timeline = function(id,event){

   if(event.id !=3490) 
       return false;
   else
  {
       return true;
   }
}

scheduler.updateView();

#2

Hi,

Usually a go to approach is to use scheduler.serverList and scheduler.updateCollection methods, they allow you to switch the whole array of sections of the timeline.
For example,

Initialize:

scheduler.serverList("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",
  x_unit:	"minute",
  x_date:	"%H:%i",
  x_step:	30,
  x_size: 24,
  x_start: 16,
  x_length:	48,
  y_unit:	scheduler.serverList("sections"),
  y_property:	"section_id",
  render:"bar"
});

Update sections:

scheduler.updateCollection("sections", [
  {key:1, label:"James Smith"},
  {key:2, label:"John Williams"}
]);

Here is a live demo: http://snippet.dhtmlx.com/b3b9c815e

For a more complex example, you can check the snippet link at the end of this post: Display sections only if it has events in Timeline View : Filtering the Sections

Related docs:
https://docs.dhtmlx.com/scheduler/api__scheduler_serverlist.html
https://docs.dhtmlx.com/scheduler/api__scheduler_updatecollection.html

#4

Hi,
Thanks for the info, how to add the server list from the server side.
i was not getting the option to add y_unit from the server side(c#) and below code as well.
scheduler.serverList(“sections”, [
{key:1, label:“James Smith”},
{key:2, label:“John Williams”},
{key:3, label:“David Miller”},
{key:4, label:“Linda Brown”}
]);
Thanks,
L Sreedhar

#5

Hi,

do you use dhtmlxScheduler for ASP.NET (http://scheduler-net.com/) or a regular JS scheduler with ASP.NET backend (https://docs.dhtmlx.com/scheduler/howtostart_guides.html) ?

For javascript scheduler, you can initialize the client side with server lists being empty:

scheduler.serverList("sections", []);
scheduler.createTimelineView({
  name:	"timeline",
  x_unit:	"minute",
  x_date:	"%H:%i",
  x_step:	30,
  x_size: 24,
  x_start: 16,
  x_length:	48,
  y_unit:	scheduler.serverList("sections"),
  y_property:	"section_id",
  render:"bar"
});

Then, you either add your sections to the data in the format shown here - https://docs.dhtmlx.com/scheduler/data_formats.html#jsonwithcollections - and they will be applied automatically,
e.g. something like this:

https://docs.dhtmlx.com/scheduler/howtostart_dotnet.html#step4implementingwebapi

        public IEnumerable<WebAPIEvent> Get()
        {
            return new {
                data = db.SchedulerEvents
                  .ToList()
                  .Select(e => (WebAPIEvent)e),
                collections = new {
                   sections = new List<object>{
                      new { value = 1, label = "James Smith"},
                      new { value = 2, label = "John Williams"}
                   }
                }
            };
        }

or, you can load them via ajax request manually:

$.get("/url").then(function(data){
   // data - [{key:1, label:"James Smith"}, ...]
   scheduler.updateCollection("sections", data);
});

If you use Scheduler .NET, you can specify the server list for the timeline:

            var timeline = new TimelineView("timeline", "section_id") { 
                    RenderMode = TimelineView.RenderModes.Bar,
                    X_Unit = TimelineView.XScaleUnits.Day,
                    X_Size = 7,
                    X_Date = "%d"
            };

            timeline.ServerList = "sections";

And populate them in the data action:

        public ContentResult Data(DateTime from, DateTime to)
        {

            var sections = _GetSectionsByDate(from, to);
            var events = _GetEventsByDate(from, to);
   
            var data = new SchedulerAjaxData(events);

            data.ServerList.Add("sections", sections);

            return (data);
        }

You can find the sample in Scheduler.MVC5\Controllers\LoadTimelineSectionsController.cs of the samples package.
Loading options via ajax would also work, as well as updating sections on the client using scheduler.updateCollection