Создайте пустую первую колонку в сетке kendo ui

Question

Я новичок в разработке сетки kendo ui.

У меня есть требование, когда я хочу отображать данные в kendo ui grid.

Я могу связать данные с кендо сетки с помощью Java-скрипт.

Вот как я это сделал.

(document.getElementById(divId)).kendoGrid({ 
      columns: cols, 
      dataSource: data,   
      change: onChange, 
      selectable: "multiple", 
      //selectable: "multiple cell", 
      schema: { 
       model: { 
        id: "ID" 
       } 
      } 
     }).data("kendoGrid"); 

Данные отображаются в сетке.

Теперь я хочу создать пустой столбец в сетке, который отобразит изображение. Как я могу это сделать. Сетка привязана к данным динамически. Я не указал строгие кодированные столбцы. Все столбцы создаются динамически.

Пожалуйста, любой может рассказать мне об этом.

Answer 1

Вы должны явным образом определить столбцы, так как:

1. Вы хотите добавить столбцов, а не в модели.
2. Содержимое столбца - это изображение, которое не является базовым типом KendoUI, который может быть выведен из определения модели.

Said так, вы должны добавить столбец, который что-то вроде:

var cols = [ 
    // Your other columns 
    ... 
    { 
     title :"Image", 
     template: "<img src='my_image.gif'/>" 
    }, 
    // More columns 
    ... 
]; 

Кроме того, вы, возможно, потребуется использовать изображение, которое не является постоянной, но в зависимости от содержания колонки. Тогда вы могли бы сделать:

var cols = [ 
    // Your other columns 
    ... 
    { 
     title: "Status", 
     template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #" 
    }, 
    { 
     title : "Photo", 
     template: "<img src='#= image #'/>" 
    } 
    // More columns 
    ... 
]; 

Где в зависимости от значения поля в модели называется status отобразить изображение ok.gif или nak.gif. Или напрямую используйте содержимое поля image для создания URL-адреса отображаемого изображения.

Отметьте here для просмотра шаблонов KendoUI.