剣道UIスケジューラのグループリソースの順序を変更する

タイムラインをビューとして表示する剣道UIスケジューラがあります。私がしたいことは、グループリソースの順序を変更することですが、私はそれを行うことができません。私が試みたのは、グループ構成オプションでリソースの順序を変更することですが、順序を変更してもUIは同じです。グループ化順序は、resourcesプロパティから計算され、group.resourcesではなく計算されているようです。剣道UIスケジューラのグループリソースの順序を変更する

ここでは、剣道UIデモから取り出される基本ケースである：例で

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/scheduler/timeline"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.timezones.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="example" class="k-content"> 
 
    <div id="scheduler"></div> 
 
</div> 
 
<script> 
 
    $(function() { 
 
     $("#scheduler").kendoScheduler({ 
 
      date: new Date("2013/6/13"), 
 
      startTime: new Date("2013/6/13 07:00 AM"), 
 
      eventHeight: 50, 
 
      majorTick: 60, 
 
      views: [ 
 
       "timeline", 
 
      ], 
 
      timezone: "Etc/UTC", 
 
      dataSource: { 
 
       batch: true, 
 
       transport: { 
 
        read: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings", 
 
         dataType: "jsonp" 
 
        }, 
 
        update: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/update", 
 
         dataType: "jsonp" 
 
        }, 
 
        create: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/create", 
 
         dataType: "jsonp" 
 
        }, 
 
        destroy: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy", 
 
         dataType: "jsonp" 
 
        }, 
 
        parameterMap: function (options, operation) { 
 
         if (operation !== "read" && options.models) { 
 
          return { models: kendo.stringify(options.models) }; 
 
         } 
 
        } 
 
       }, 
 
       schema: { 
 
        model: { 
 
         id: "meetingID", 
 
         fields: { 
 
          meetingID: { from: "MeetingID", type: "number" }, 
 
          title: { from: "Title", defaultValue: "No title", validation: { required: true } }, 
 
          start: { type: "date", from: "Start" }, 
 
          end: { type: "date", from: "End" }, 
 
          startTimezone: { from: "StartTimezone" }, 
 
          endTimezone: { from: "EndTimezone" }, 
 
          description: { from: "Description" }, 
 
          recurrenceId: { from: "RecurrenceID" }, 
 
          recurrenceRule: { from: "RecurrenceRule" }, 
 
          recurrenceException: { from: "RecurrenceException" }, 
 
          roomId: { from: "RoomID", nullable: true }, 
 
          attendees: { from: "Attendees", nullable: true }, 
 
          isAllDay: { type: "boolean", from: "IsAllDay" } 
 
         } 
 
        } 
 
       } 
 
      }, 
 
      group: { 
 
       resources: ["Rooms", "Attendees"], 
 
       orientation: "vertical" 
 
      }, 
 
      resources: [ 
 
       { 
 
        field: "roomId", 
 
        name: "Rooms", 
 
        dataSource: [ 
 
         { text: "Meeting Room 101", value: 1, color: "#6eb3fa" }, 
 
         { text: "Meeting Room 201", value: 2, color: "#f58a8a" } 
 
        ], 
 
        title: "Room" 
 
       }, 
 
       { 
 
        field: "attendees", 
 
        name: "Attendees", 
 
        dataSource: [ 
 
         { text: "Alex", value: 1, color: "#f8a398" }, 
 
         { text: "Bob", value: 2, color: "#51a0ed" }, 
 
         { text: "Charlie", value: 3, color: "#56ca85" } 
 
        ], 
 
        multiple: true, 
 
        title: "Attendees" 
 
       } 
 
      ] 
 
     }); 
 
    }); 
 
</script> 
 

 
</body> 
 
</html>

Iが期待["Rooms", "Attendees"]から["Attendees", "Rooms"]にgroup.resources配列プロパティの順序を変更下回っUIのグループ化順序の変更はありませんが、何も起こらないようです。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/scheduler/timeline"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.timezones.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="example" class="k-content"> 
 
    <div id="scheduler"></div> 
 
</div> 
 
<script> 
 
    $(function() { 
 
     $("#scheduler").kendoScheduler({ 
 
      date: new Date("2013/6/13"), 
 
      startTime: new Date("2013/6/13 07:00 AM"), 
 
      eventHeight: 50, 
 
      majorTick: 60, 
 
      views: [ 
 
       "timeline" 
 
      ], 
 
      timezone: "Etc/UTC", 
 
      dataSource: { 
 
       batch: true, 
 
       transport: { 
 
        read: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings", 
 
         dataType: "jsonp" 
 
        }, 
 
        update: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/update", 
 
         dataType: "jsonp" 
 
        }, 
 
        create: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/create", 
 
         dataType: "jsonp" 
 
        }, 
 
        destroy: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy", 
 
         dataType: "jsonp" 
 
        }, 
 
        parameterMap: function (options, operation) { 
 
         if (operation !== "read" && options.models) { 
 
          return { models: kendo.stringify(options.models) }; 
 
         } 
 
        } 
 
       }, 
 
       schema: { 
 
        model: { 
 
         id: "meetingID", 
 
         fields: { 
 
          meetingID: { from: "MeetingID", type: "number" }, 
 
          title: { from: "Title", defaultValue: "No title", validation: { required: true } }, 
 
          start: { type: "date", from: "Start" }, 
 
          end: { type: "date", from: "End" }, 
 
          startTimezone: { from: "StartTimezone" }, 
 
          endTimezone: { from: "EndTimezone" }, 
 
          description: { from: "Description" }, 
 
          recurrenceId: { from: "RecurrenceID" }, 
 
          recurrenceRule: { from: "RecurrenceRule" }, 
 
          recurrenceException: { from: "RecurrenceException" }, 
 
          roomId: { from: "RoomID", nullable: true }, 
 
          attendees: { from: "Attendees", nullable: true }, 
 
          isAllDay: { type: "boolean", from: "IsAllDay" } 
 
         } 
 
        } 
 
       } 
 
      }, 
 
      group: { 
 
       resources: ["Attendees", "Rooms"], 
 
       orientation: "vertical" 
 
      }, 
 
      resources: [ 
 
       { 
 
        field: "roomId", 
 
        name: "Rooms", 
 
        dataSource: [ 
 
         { text: "Meeting Room 101", value: 1, color: "#6eb3fa" }, 
 
         { text: "Meeting Room 201", value: 2, color: "#f58a8a" } 
 
        ], 
 
        title: "Room" 
 
       }, 
 
       { 
 
        field: "attendees", 
 
        name: "Attendees", 
 
        dataSource: [ 
 
         { text: "Alex", value: 1, color: "#f8a398" }, 
 
         { text: "Bob", value: 2, color: "#51a0ed" }, 
 
         { text: "Charlie", value: 3, color: "#56ca85" } 
 
        ], 
 
        multiple: true, 
 
        title: "Attendees" 
 
       } 
 
      ] 
 
     }); 
 
    }); 
 
</script> 
 

 
</body> 
 
</html>

私もresourcesプロパティの順序を変更する場合、期待どおり変更が起こります

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/scheduler/timeline"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.timezones.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="example" class="k-content"> 
 
    <div id="scheduler"></div> 
 
</div> 
 
<script> 
 
    $(function() { 
 
     $("#scheduler").kendoScheduler({ 
 
      date: new Date("2013/6/13"), 
 
      startTime: new Date("2013/6/13 07:00 AM"), 
 
      eventHeight: 50, 
 
      majorTick: 60, 
 
      views: [ 
 
       "timeline" 
 
      ], 
 
      timezone: "Etc/UTC", 
 
      dataSource: { 
 
       batch: true, 
 
       transport: { 
 
        read: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings", 
 
         dataType: "jsonp" 
 
        }, 
 
        update: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/update", 
 
         dataType: "jsonp" 
 
        }, 
 
        create: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/create", 
 
         dataType: "jsonp" 
 
        }, 
 
        destroy: { 
 
         url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy", 
 
         dataType: "jsonp" 
 
        }, 
 
        parameterMap: function (options, operation) { 
 
         if (operation !== "read" && options.models) { 
 
          return { models: kendo.stringify(options.models) }; 
 
         } 
 
        } 
 
       }, 
 
       schema: { 
 
        model: { 
 
         id: "meetingID", 
 
         fields: { 
 
          meetingID: { from: "MeetingID", type: "number" }, 
 
          title: { from: "Title", defaultValue: "No title", validation: { required: true } }, 
 
          start: { type: "date", from: "Start" }, 
 
          end: { type: "date", from: "End" }, 
 
          startTimezone: { from: "StartTimezone" }, 
 
          endTimezone: { from: "EndTimezone" }, 
 
          description: { from: "Description" }, 
 
          recurrenceId: { from: "RecurrenceID" }, 
 
          recurrenceRule: { from: "RecurrenceRule" }, 
 
          recurrenceException: { from: "RecurrenceException" }, 
 
          roomId: { from: "RoomID", nullable: true }, 
 
          attendees: { from: "Attendees", nullable: true }, 
 
          isAllDay: { type: "boolean", from: "IsAllDay" } 
 
         } 
 
        } 
 
       } 
 
      }, 
 
      group: { 
 
       resources: ["Attendees", "Rooms"], 
 
       orientation: "vertical" 
 
      }, 
 
      resources: [ 
 
       { 
 
        field: "attendees", 
 
        name: "Attendees", 
 
        dataSource: [ 
 
         { text: "Alex", value: 1, color: "#f8a398" }, 
 
         { text: "Bob", value: 2, color: "#51a0ed" }, 
 
         { text: "Charlie", value: 3, color: "#56ca85" } 
 
        ], 
 
        multiple: true, 
 
        title: "Attendees" 
 
       }, 
 
       { 
 
        field: "roomId", 
 
        name: "Rooms", 
 
        dataSource: [ 
 
         { text: "Meeting Room 101", value: 1, color: "#6eb3fa" }, 
 
         { text: "Meeting Room 201", value: 2, color: "#f58a8a" } 
 
        ], 
 
        title: "Room" 
 
       } 
 
      ] 
 
     }); 
 
    }); 
 
</script> 
 

 
</body> 
 
</html>

どのように動的に同じ結果を達成することができますか？私はすでに試みていることはresourcesとgroup.resourcesと実行してスケジューラに再びそれらを割り当てる順序を変更することです：

var scheduler = $('#scheduler').data('kendoScheduler'); 
// Omitted resources and groupingResources computation 
scheduler.setOptions({resources: resources}); 
scheduler.setOptions({ 
    group: { 
     orientation: 'vertical', 
     resources: groupingResources 
    } 
    }); 
    scheduler.view(scheduler.view().name);

が、私はkendo.allからエラー

TypeError: d.dataSource.view is not a function

を取得します。 jsファイル。私は間違って何をしていますか？

出典

2017-05-15 Gabriele Ciech

このような場合、リソースのコレクションを更新してリセットし、ビューをリロードすることができます（例：dojo page）。ここでコアを働いていたコードがある私：私が欲しいのです

var resourceData = scheduler.resources[0].dataSource.data(); 
    var first = resourceData.shift(); 

    resourceData.push(first); 
    scheduler.resources[0].dataSource.data(resourceData); 

    scheduler.view(scheduler.view().name);

出典

2017-05-15 12:12:16

だけではなく、単に追加したり、リソースデータソースから項目を削除し、私も後に、スケジューラ・グループのリソースを変更するリソース配列 –

に新しいアイテムを追加します初期化はそのままではサポートされていません。ウィジェットを[破壊する]（http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods-destroy）し、新しいリソースで再初期化することをお勧めします。 –

剣道UIスケジューラのグループリソースの順序を変更する

答えて

関連する問題