Telerik Kendo UI с MVVM

Question

У меня есть одна таблица Kendo UI Grid на моей странице просмотра (концепция MVVM). Свяжите данные из модели представления. Когда я уменьшу размер страницы.

Kendo UI меняет сетку на Kendo UI Listview. Смотрите это изображение:

Как я могу это сделать?

Answer 1

Определите один единственный источник данных для Grid и ListView.

var ds = {
    data    : ...,
    pageSize: 10,
    schema  : {
        model: {
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                City     : { type: 'string' }
            }
        }
    }
};

Затем определите как DIV для сетки и для ListView:

<div id="grid"></div>
<div id="list"></div>

И инициализировать Grid и ListView:

$("#grid").kendoGrid({
    dataSource: ds,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ]
});

$("#list").kendoListView({
    dataSource: ds,
    template : $("#template").html()
});

Теперь, что вы должны сделать, это отобразить одно или другое в зависимости от ширины:

// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");

// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");

Где CSS класс ob-hidden является:

.ob-hidden {
    display: none;
    visibility: hidden;
    width: 1px;
}

Теперь, единственный оставшийся вопрос - вызвать один или другой в зависимости от ширины. Вы можете использовать JQuery resize событие для обнаружения изменений.

Итак, заключите оба ListView и Grid в DIV с id контейнер:

<div id="container">
    <div id="grid"></div>
    <div id="list" class="ob-hidden"></div>
</div>

и определить resize обработчик как:

$("window").on("resize", function(e) {
    var width = $("#container").width();
    console.log(width);
    if (width < 300) {
        console.log("list");
        $("#grid").addClass("ob-hidden");
        $("#list").removeClass("ob-hidden");
    } else { 
        console.log("grid");
        $("#grid").removeClass("ob-hidden");
        $("#list").addClass("ob-hidden");
    }
});

ВАЖНО: Что бы вы ни делали для получения того же результата, пожалуйста, не создавайте и не уничтожайте Grid и ListView каждый раз, когда есть resize, Это вычислительно дорогая операция.

Смотрите это в действии здесь: http://jsfiddle.net/OnaBai/JYXzJ/3/