Изменить значение сетки kendo на основе второго источника данных

Question

Я очень новичок в обоих кендо и javascript, так что извините любые упущения в знаниях. У меня есть сетка кендо с полем TicketStatusID. У меня есть другой независимый источник данных с TicketStatusID и TicketStatusName. Есть ли способ заменить TicketStatusID в моей сетке с TicketStatusName из моего другого источника данных?

вот моя сетка:

var commentsDatasource = new kendo.data.DataSource({ 
     type: "odata", 
     transport: { 
      read: { 
       //url: sBaseUrl, 
       url: baseUrl + "TicketIssueComment", 
       type: "get", 
       dataType: "json", 
       contentType: "application/json" 
      }, 
      create: { 
       url: baseUrl + "TicketIssueComment", 
       type: "post", 
       dataType: "json", 
       ContentType: 'application/json', 
       success: refresh 
      }, 
     }, 

     schema: { 
      data: "value", 
      total: function (data) { 
       return data['odata.count']; 
      }, 
      model: { 
       id: "TicketCommentID", 
       fields: { 
        TicketCommentID: { type: "number" }, 
        TicketID: { type: "number" }, 
        TicketCommentValue: { type: "string" }, 
        TicketCommentCreatedBy: { type: "string", defaultValue: "z13tas", editable: false }, 
        TicketCommentCreatedTS: { type: "date", editable: false }, 
        TicketStatusID: { type: "number", editable: false }, 
        //TicketStatusName: { type: "string", editable: false } 
       } 
      } 
     }, 
     filter: { field: "TicketID", operator: "eq", value: filterValue }, 

     pageSize: 50, 
     serverPaging: true, 
     serverFilering: true, 
     serverSorting: true, 
     sort: { field: "TicketID", dir: "asc" }, 
    }); 



    //-----------------KENDO GRID----------------- 
    $("#gridComments").kendoGrid({ 
     dataSource: commentsDatasource, 
     pageable: 
      { 
       refresh: true, 
       pageSizes: [10, 25, 50, 100], 
       buttonCount: 5 
      }, 
     //height: 300, 
     width: 300, 
     //sortable: true, 
     toolbar: ["create", "save", "cancel"], 
     scrollable: true, 
     reorderable: true, 
     editable: true, 
     selectable: "row", 
     resizable: true, 
     edit: function edit(e) { 
      if (e.model.isNew() == false) { 
       $('input[name=TicketCommentValue]').parent().html(e.model.TicketCommentValue); 
      } 
     }, 
     columns: [ 
      { field: "TicketCommentValue", title: "Comment", width: "500px" }, 
      { field: "TicketStatusID", title: "Status", width: "100px" }, 
      { field: "TicketCommentCreatedBy", title: "Created By", width: "100px" }, 
      { field: "TicketCommentCreatedTS", title: "Created Date", width: "150px", format: "{0:MM-dd-yyyy hh:mm tt}" } 
     ] 
    }); 

и вот мой второй источник данных:

var StatusDatasource = new kendo.data.DataSource({ 
    type: "odata", 
    transport: { 
     read: { 
      dataType: "json", 
      url: baseUrl + "TicketIssueStatusView", 
     } 
    }, 
    schema: { 
     data: "value", 
     total: function (data) { 
      return data['odata.count']; 
     }, 
     model: { 
      id: "TicketStatusID", 
      fields: { 
       TicketStatusID: { type: "number" }, 
       TicketStatusName: { type: "string" }, 
       TicketStatusDescription: { type: "string" }, 
       TicketStatusUpdatedTS: { type: "date" }, 
       TicketStatusUpdatedBy: { type: "string" }, 
      } 
     } 
    }, 
    serverFilering: true, 
    optionLabel: "--Select Value--" 
}); 

Я думаю, что может быть на что-то с этим решение здесь - http://demos.telerik.com/kendo-ui/grid/editing-custom - но документации Telerik в не дает никаких объяснений о том, как реализовать. Спасибо

Answer 1

Сделайте это из этого примера.

Добавить это поле, в котором вы хотите изменить сетку кендо.

$.ajax({ 
      cache: false, 
      type: "POST", 
      url: "@Html.Raw(Url.Action("assing", "Customer"))", 
      data: postData, 
      complete: function (data) { 
       //reload antoher grid 
       var grid = $('#Customer-grid').data('kendoGrid'); 
       grid.dataSource.read(); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(thrownError); 
      }, 
      traditional: true 
     }); 

из-за недостатка кода ваша проблема в решении проблемы.

var grid = $('#Customer-grid').data('kendoGrid'); 
grid.dataSource.read(); 

Answer 2

{ 
    field: "TicketStatusID", 
    title: "Status", 
    width: "100px", 
    template: #= StatusDatasource.get(data.TicketStatusID).TicketStatusName # 
} 

Помните ваш StatusDatasource должен быть верхний уровень, я имею в виду доступны windows.StatusDatasource, и как инициализируются и считывать данные до инициализации сетки (без первого условия будет ошибка, и без второго вы увидите undefined внутри столбца).