如何在Kendo模板中動態設置列

Question

如何在Kendo模板中爲kendo網格動態設置列。在我的kendo網格中，列可根據用戶偏好動態更改。如何動態創建Kendo模板？我正在使用Kendo JavaScript，如果我能在那裏實現同樣的事情，我可以切換到Kendo MVC。是否有其他方法可以實現這一目標？

<script id="rowTemplate" type="text/x-kendo-template"> 
     <tr class="k-master-row"> 

      <td> 

        <div>#=column1#</div> 

      </td> 
      <td><span class="mydesign" title="column2#"</span></td> 
      <td>#column3#</td> 
      <td>#=column4#</td> 

     </tr> 
    </script> 

編輯：在Kendo網格中，我們動態地設置了列。現在問題是我們如何設置內容表和標題表的動態寬度。如果超過最大寬度，我們如何啓用水平滾動條。有沒有什麼辦法可以達到這個目標？

Answer 1

我沒有用MVC的劍道，但我仍然可以解釋如何使用常規的劍道功能來做到這一點。

基本上，您可以通過將html字符串傳遞給kendo.template來創建新的kendo模板實例。然後，您可以將新的模板實例分配到網格的rowTemplate（或altRowTemplate），然後撥打dataSource.read()強制更新網格。

您可以生成自己的html字符串或更新頁面中的現有模板，然後使用jquery的html()將其轉換爲字符串。

例：

var htmlTemplate = ''; 
if (userPreferences.likeRed) { 
    htmlTemplate ='<tr class="k-master-row"><td style="background-color:red">#column1#</td></tr>' 
} else { 
    htmlTemplate ='<tr class="k-master-row"><td style="background-color:green">#column1#</td></tr>' 
} 

$("#grid").data("kendoGrid").rowTemplate = kendo.template(htmlTemplate); 
$("#grid").data("kendoGrid").dataSource.read(); 

Answer 2

爲了格式化與有條件地選擇動作Kendo Grid列值可以使用下面的合適的例子之一。欲瞭解更多信息：How Do I Have Conditional Logic in a Column Client Template?

下面是一些使用示例如下。藉助此方法，您可以輕鬆生成不同的模板。

UI爲Javascript：

{ 
    field: "EmployeeName", type: "string", width: "55px", title: "Employee Name", 
     template: "#= GetEditTemplate(data) #" 
} 

UI用於MVC：

... 
columns.Bound(t => t.EmployeeName) 
     .Title("Status Name") 
     .Template(@<text></text>) 
     .ClientTemplate("#= GetEditTemplate(data)#") 
     .Width("55px"); 
... 

實施例I：在這個例子中，Model被傳遞到Javascript方法通過使用「數據」屬性和模型屬性用於「if」條件。

<script> 
//Change the color of the cell value according to the given condition 
function GetEditTemplate(data) { 
    var html;  
    if (data.StatusID == 1) { 
     html = kendo.format(
     //"<a class=\"k-button\" href='" + '@Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a> ", 
     "<span class='text-success'>" + 
     data.EmployeeName 
     + "</span>" 
     ); 
    } 
    else { 
     html = kendo.format(
     //"<a class=\"k-button\" href='" + '@Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a> ", 
     "<span class='text-danger'>Cancel</span>" 
     ); 
    } 
    return html; 
} 
</script> 

例二：

<script> 
function Getvalue(value) { 
    // console.log(value); 
    if (value && value != null && value.indexOf("A") == 0) 
     return "<b style='color:red'>" + value + "</b>"; 
    else 
     return ""; 
} 

$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     dataSource: localDataSource, 
     columns: [ 
      { 
       field: "FirstName", 
       title: "First Name", template: '#=Getvalue(FirstName)#' 
      } 
     ], 
    }); 
}); 
</script> 

希望這有助於...

Answer 3

這將在ASP.NET MVC /剃鬚刀工作，如果你準備集合的動態列定義，然後將它們放入cshtml的視圖模型中。然後遍歷集合並插入與數據源，標題標題，期望寬度等匹配的字段名稱。

 $("#grid-quick").kendoGrid({ 
     pageable: { 
      pageSizes: [10, 20, 50, 100] 
     }, 
     sortable: { mode: "multiple" }, 
     columns: [ 
      @{ 
       foreach (var col in Model.Columns) 
       { 
        @:{ field: "@col.Name.Replace(".","_")", width: "@col.Width" + "px" }, 
       } 
      } 
     ], 
     filterable: false, 
     dataSource: { 
      serverPaging: true, 
      serverSorting: true, 
      pageSize: 20, 
      type: 'aspnetmvc-ajax', 
      schema: { 
       data: "Data", 
       total: "Total", 
       model: { 
        fields: { 
         @{ 
          foreach (var col in Model.Columns) 
          { 
           @: "@col.Name.Replace(".","_")" : { type: "string" }, 
          } 
         } 
        } 
       } 
      }, 
      transport: { 
       read: { 
        url: oVariables.baseURL + "Query/DynamicResults", 
        dataType: "json", 
        type: "post" 
       } 
      } 
     } 
    });