CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-asp.net-mvckendo-scheduler
jacobvoller.com
jacobvoller.com

Reputation: 516

Kendo UI Scheduler - How do I refresh / Show-hide/ filter the list of resources

I have a Kendo UI scheduler configured as a timeline (a single list of resources vertically on the left, and hours blocks horizontally along the top). I am able to initialize the scheduler with the correct resources but after render I want to modify the list (hide some of them), but have been unable to get the resource list to refresh it's self.

I've tried every combination of the following but none have been successful in refreshing the list.

var sched = $("#TimeLineView").data("kendoScheduler");
sched.resources[0].dataSource.read();
sched.resources[0].dataSource.sync();
sched.refresh();
sched.view(sched.view().name);

Initial Creation

$("#TimeLineView").kendoScheduler({
    date: new Date(),
    timezone: null,
    views: [
        {
            type: "timeline",
            majorTick: 60,
            minorTickCount: 1
        }
    ],
    currentTimeMarker: {
        updateInterval: 120000
    },
    group: {
        resources: ["Users"],
        orientation: "vertical"
    },
    resources: [
        {
            field: "UserId",
            name: "Users",
            dataSource: [
                { value: "Bob" },
                { value: "Rob" }
            ],
            multiple: true,
            title: "Users"
        }
    ],
    height: 500
});

Upvotes: 2

Views: 2502

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 10131

Here is the DEMO for filtering (showing/hiding) of scheduler resources.

Below is the code snippet from the DEMO that filters the resources:

HTML:

<input type="button" value="Only show Alex and Rob" id="btn" />
<input type="button" value="Show Everyone" id="showAll" />

JS:

$('#showAll').click(function() {
  var showOnly = [];//pass an empty array to show all the resources
  filterSchedulerResources(showOnly);
});

$("#btn").click(function() {
  var showOnly = ['Alex', 'Rob'];
  filterSchedulerResources(showOnly);

});

function filterSchedulerResources(showOnly)
{
  console.log('showOnly = ',showOnly);

  var filter = {
    logic: "or",
    filters: $.map(showOnly, function(value) {
      return {
        operator: "eq",
        field: "value",
        value: value
      };
    })
  };

  var scheduler = $("#scheduler").data("kendoScheduler");  
  //filter the resource data source 
  scheduler.resources[0].dataSource.filter(filter);  

  scheduler.view(scheduler.view().name); //refresh the currunt view  
}

Upvotes: 4

Related Questions