KendoListView: отображение данных из динамического источника данных

Question

Я хочу отображать данные списка из динамического источника данных, что означает, что столбцы не фиксированы и не могут быть определены до тех пор, пока не будут запрошены.

Пример:

• Это может возвращать список объектов с колоннами { Id, FirstName, MiddleName, LastName } или

• Это может возвращать список объектов с колоннами { Id, LastName } только

Это может произойти в зависимости от настройка сделана.

У меня есть настройка, чтобы определить, какие столбцы (столбцы) должны быть возвращены при запросе. Моя настройка - это массив, в котором будут перечислены все включенные столбцы.

• this.includedColumns = ko.observableArray(["Id", "LastName"]);

Теперь в моем HTML я,

<div class="col-sm-3"> 
    <div id="items"></div> 
    <div id="pager" class="k-pager-wrap"></div> 
</div> 

<script type="text/x-kendo-tmpl" id="itemTemplate"> 
    <div class="item" data-bind="drag: { value: $data }"> 

     // Here I want to display what should be displayed depending on the setup 
     // If the return objects has columns { Id, FirstName, LastName } 

     // and in my setup I have only { Id, LastName } 
     // here I need to loop through the includedColumns list and display the columns here 

     Example: 

     <div data-bind="foreach: includedColumns"> 
      <span>#: {{theIncludedColumnHere}} #</span> 
     </div> 

    </div> 
</script> 

Initialization,

$("#items").kendoListView({ 
     dataSource: myDataSource, 
     pageable: true, 
     virtual: true, 
     template: kendo.template($("#itemTemplate").html()), 
     dataBound: function() { 
     } 
    }); 

$("#pager").kendoPager({ 
    dataSource: myDataSource 
}); 

Надеется, что есть возможное решение для этого. Спасибо.

Answer 1

У меня была аналогичная задача с сеткой. Возможно, это помогает найти решение для listview. Сетка содержала все возможные столбцы. В зависимости от фактических данных (сетка знала, какие данные следует ожидать, как только пользователь нажал кнопку) некоторые столбцы были скрыты или показаны.

Для сетки вы можете сделать это:

grid.hideColumn("ColumnNameOrIndex"); 
grid.showColumn("ColumnNameOrIndex"); 

Для ListViews Получить немного сложнее, но если вы можете добавить идентификатор/класс столбцов (например, имя столбца.) При связывании. Вы должны иметь возможность использовать что-то вроде этого.

$(".myColumnType").hide(); 

Надеюсь, что это поможет найти решение!