Kendo Scheduler:在运行时动态定义资源

时间:2015-07-07 16:54:11

标签: asp.net-mvc kendo-ui kendo-scheduler

关于Kendo Scheduler小部件,我使用MVC Razor Helper,但我需要用户能够定义他们自己的"资源"在元数据中,然后让调度程序基于此配置进行渲染。

我见过的所有示例都要求开发人员在设计时知道要绑定的资源(例如RoomID,OwnerID,Attendeed),使用以下添加资源的方式....

.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" } 
            });
     })

但是,在设计时,我不知道资源是什么(例如RoomID,Attendees)。我只知道一旦应用程序运行并查询元数据/数据库。 即我希望能够通过优选地进行Ajax调用来构建资源,或者可能通过循环存储在ViewBag变量中的集合来构建资源。 如下所示:

.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" } 
            });
           }            
     })

请告诉我这是否有意义,或者我是否需要提供更多信息......

由于

乔恩

1 个答案:

答案 0 :(得分:0)

              $("#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;
          };