Kendo Scheduler: dynamically defining resources at runtime

Question

Regarding the Kendo Scheduler widget, I'm using MVC Razor Helper but I need the user to be able to define their own "resources" in metadata, and then have the scheduler render based on this configuration.

All the examples I've seen require the developer to know the Resources to be bound at design time (e.g. RoomID, OwnerID, Attendeed), using the following style of adding the resources....

.Resources(resource =>
     {
        resource.Add(m => m.RoomID)
            .Title("Room")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] { 
                new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
                new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" } 
            });
        resource.Add(m => m.Attendees)
            .Title("Attendees")
            .Multiple(true)
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] { 
                new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                new { Text = "Charlie", Value = 3, Color = "#56ca85" } 
            });
     })

However, at design-time, I don't know what the resources are (e.g. RoomID, Attendees). I will only know that once the application runs and queries the metadata/database. i.e. I want to be able to construct the resources by preferably making an Ajax call, or perhaps by looping through a collection stored in a ViewBag variable.. Something like the following:

.Resources(resource =>
     {
       foreach(ResourceType resourceType in ViewBag.ResourceTypes)
       {
        resource.Add(resourceType.Name)
            .Title(resourceType.Name)
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] { 
                new { Text = "some text", Value = 1, Color = "#6eb3fa" },
                new { Text = "some other text", Value = 2, Color = "#f58a8a" } 
            });
           }            
     })

Let me know if this makes sense or if I need to provide more information...

Thanks

Jon

muthuvel muthuvel · Accepted Answer · 2015-08-26T08:55:11

              $("#people :checkbox").change(function (e) {
              var scheduler = $("#scheduler").data("kendoScheduler");
              var checkbobxObj = $(this);
              var resourceData = scheduler.resources[0].dataSource.data();
              var reourceMatched = jQuery.grep(resourceData, function (n, i) {
                  return (n.ResourceId == checkbobxObj.val());
              });

              if (reourceMatched.length == 0) {
                  scheduler.dataSource.options.serverFiltering = false;
                  scheduler.resources[0].dataSource.add({
                      ResourceId: checkbobxObj.val(),
                      ResourceName: checkbobxObj.prop("name")
                  });
                  // filter resource
                  filterResource();
              }
              else {
                  // filter resource
                  filterResource();
              }
          });

          filterResource = function () {
              var scheduler = $("#scheduler").data("kendoScheduler");
              var checked = $.map($("#people :checked"), function (checkbox) {
                  return parseInt($(checkbox).val());
              });
              var filter = {
                  logic: "or",
                  filters: $.map(checked, function (value) {
                      return {
                          operator: "eq",
                          field: "ResourceId",
                          value: value
                      };
                  })
              };
              //filter the resource data source
              scheduler.dataSource.options.serverFiltering = false;
              console.log("filter", filter);
              scheduler.resources[0].dataSource.filter(filter);
              scheduler.view(scheduler.view().name);
              scheduler.dataSource.options.serverFiltering = true;
          };

Kendo Scheduler: dynamically defining resources at runtime

1 Answers