如何在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" 
       } 
      } 
     } 
    });