剣道UIグリッド - 動的列定義とデータソースをapi（web API）から返します

Question

私は剣道UIグリッドを使用しています（jqueryを使用しています）。私の要件は1つのグリッドがあり、UIの特定のイベント変更に基づいてモデル駆動型のアプローチを使用して、動的な列定義とデータを調整する必要があるということです。この場合、カスタムエディタ（ドロップダウン、マルチセレクション）にどのように対応できますか？以下のサンプルコード。

public class NameModel 
{ 

    [ColumnAttributes(Title = "FirstName", Width = "50px", field = "FirstName")] 
    public string FirstName { get; set; } 
    [ColumnAttributes(Title = "LastName", Width = "50px", field = "LastName")] 
    public string LastName { get; set; } 
} 

public class ColumnAttributes : Attribute 
{ 
    public string Title { get; set; } 
    public string Width { get; set; } 
    public string field { get; set; } 
    public string editor { get; set; } 
    public bool editable { get; set; } 
} 

// Main class used to return the grid data and columns based on the type 

public class CustomModelWrapper<T> 
    { 
     public string GridType { get; set; } 

     public List<T> GridData { get; set; } 

     public List<ColumnAttributes> ColumnHeaders { get; set; } 
    } 



// Jquery code to bind the 
$("#grid").removeData('kendoGrid'); 
     $("#grid").empty(); 
     var grid = $("#grid").kendoGrid({ 
      dataSource: data[0].GridData , 
      height: 500, 
      columns: data[0].ColumnHeaders, 
      editable: true, 
     }).data("kendoGrid"); 

Answer 1

このjsbinには剣道グリッドの回答があるようです。私もこれについての要件を持っており、この答えがあなたをうまく見つけることを願っています！

 var grid = $("#grid").kendoGrid({ 
    dataSource: { 
     data: gridData, 
     schema: { 
     model: model, 
     parse: parseFunction 
     } 
    }, 
    editable: true, 
    sortable: true 
    }); 

リンクを参照してください - http://jsbin.com/viqaxoxi/1/edit?html,js,output