Kendo Grid - динамический столбец и пользовательский шаблон

Question

У меня проблема с сеткой и специальным шаблоном кендо. Проблема заключается в том, мне нужно проверить значение столбца

• если значение == 1, мне нужно изменить его галочку
• Если значение == 0, мне нужно изменить его на иконку Удалить
• Если значение == -1. Мне нужно возвращать пустую HTML

Это пример кода: Fiddle

var myFields = { 
     no: { }, 
     section: { }, 
     service: { } 
    }; 
for(var x = 0 ; x < dataList.length; x++){ 
    myFields["data"+x] = { }; 
} 

    var no = 0; 
var myColumns = [ 
       { title: "No", locked: true, width: 50, template: function(e){return ++no; } }, 
       { field: "section", title: "Hole Section", locked: true, width: 130 }, 
       { field: "service", title: "Services", locked: true, width: 200 } 
       /* other columns ... */ 
      ]; 
for(var x = 0 ; x < dataList.length; x++){ 
    myColumns.push({ field: "data"+x, title: dataList[x], width: 100, locked: false}); 
} 

Answer 1

Вот Working Demo

Решение: Вы можете изменить ваши данные подаются в сетке , заменяя цифры значком. Я предпочитаю использовать FontAwesome Icons как очень легкий.

CDN для шрифта удивительный.

https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

изменить код, чтобы внести изменения в ваши данные, как показано ниже.

tableData[tableData.length - 1]["data"+c] = formatCellData(dataOffset[c].selected); 
// replace you code with function call. 

определение функции приведено ниже.

function formatCellData(value){ 
    switch(value){ 
    case 1: return "<i class='fa fa-check''></i>";break; 
    case 0: return "<i class='fa fa-trash''></i>";break; 
    case -1: return "";break; 
    default: return ""; 
    } 
} 

Теперь это будет убедиться, что вы получите HTML часть вместо цифр,

Теперь мы должны убедиться, что HTML строка читается как обычный HTML и отображаются значки, а не HTML строку как есть, поэтому добавьте этот атрибут encoded: false в данные столбца.

for(var x = 0 ; x < dataList.length; x++){ 
myColumns.push({ field: "data"+x, title: dataList[x], width: 100, locked: false,encoded: false}); 
} 

Надеюсь, это поможет.