劍道電網自定義列

Question

我有以下代碼：

  $("#grid").kendoGrid({ 
      dataSource: { 
       type: "odata", 
       data: scannedResult.targetList, 
       pageSize: 20 
      }, 
      height: 550, 
      groupable: true, 
      sortable: true, 
      pageable: { 
       refresh: true, 
       pageSizes: true, 
       buttonCount: 5 
      }, 
      columns: [{ 
       field: "proccess", 
       title: "Contact Name", 
       width: 200 
      }, { 
       field: "status", 
       title: "status" 
      }, { 
       field: "comment", 
       title: "comment" 
      }] 
     }); 

創建劍道簡單的網格。這裏的細節是我的plunker。

現在字段status可以是3個值中的1個：通過，失敗，跳過。我希望status列會顯示一個圖標而不是值。雖然代碼很簡單，但我不知道如何將該列設置爲自定義列。

有沒有辦法讓一列成爲自定義列？

Answer 1

您應該使用模板定義。例如：

• 定義模板。

<script id="status-template" type="text/kendo-templ"> 
    # if (data.status === 1) { # 
     <span>Status1</span> 
    # } else if (data.status === 2) { # 
     <span>Status 2</span> 
    # } else { # 
     <span>Status 3</span> 
    # } # 
</script> 

• 借鑑列定義

 columns: [{ 
      field: "proccess", 
      title: "Contact Name", 
      width: 200 
     }, { 
      field: "status", 
      title: "status", 
      template: $("#status-template").html() 
     }, { 
      field: "comment", 
      title: "comment" 
     }] 

看到它運行在這裏的模板：http://jsfiddle.net/OnaBai/5x8wt0f7/

顯然，模板可以發出任何HTML代碼，它mi ght be links，images ...

Answer 2

這已經得到了回答，但我想說明如何在連接到jQuery選擇器時讓人感到困惑。

// Custom Template that takes in entire Row object 
function statusTemplate(dataRow) { 
    return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`; 
} 

// Column definitions for grid 
columns: [{ 
    field: "proccess", 
    title: "Contact Name", 
    width: 200 
}, { 
    field: "status", 
    title: "status", 
    template: statusTemplate 
}, { 
    field: "comment", 
    title: "comment" 
}] 

http://jsfiddle.net/dentedio/hdokxme9/1/