Скрыть столбцы пользовательского интерфейса, когда окна становятся меньше

Question

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

Так, например, я хочу сохранить столбцы 1, 4 и 5, если окно становится меньше ...

... но выведите все 5, если он достаточно большой.

Я не могуувидеть что-то вроде columns.minScreenWidth в интерфейсе Kendo ... Я знаю, что можно определить свойство visible, но я не знаю, как его установить в зависимости от размера сетки.

Мои текущие columnDefs:

vm.grid.columnDefs = [
        {
            name: 'one',
            displayName: 'Column of highest priority',
            enableHiding: false,
            minWidth: 400
        }, {
            name: 'two',
            displayName: 'Less Important',
            enableHiding: false,
            type: 'date'
        }, {
            name: 'three',
            displayName: 'Even Less Important',
            enableHiding: false
        }, {
            name: 'four',
            displayName: 'Should be visible',
            cellFilter: 'date:"dd/MM/yyyy"',
            enableHiding: true,
            type: 'date'
        }, {
            name: 'five',
            displayName: 'Should also be visible',
            visible: vm.showFithColumn,
            enableHiding: false
        }
    ];

Answer 1

чтобы узнать ширину Windows, которую вы можете использовать $window.innerWidth.

Итак, пример может быть:

var windowsWidth=$window.innerWidth;

vm.grid.columnDefs = [
        {
            name: 'one',
            displayName: 'Column of highest priority',
            enableHiding: false,
            minWidth: 400
        }, {
            name: 'two',
            displayName: 'Less Important',
            visible: function(value){
                 return (windowsWidth>300)
             }
            type: 'date'
        }, {
            name: 'three',
            displayName: 'Even Less Important',
            visible: function(value){
                 return (windowsWidth>400)
             }
        }, {
            name: 'four',
            displayName: 'Should be visible',
            cellFilter: 'date:"dd/MM/yyyy"',
            visible: function(value){
                 return (windowsWidth>500)
             }
            type: 'date'
        }, {
            name: 'five',
            displayName: 'Should also be visible',
            visible: function(value){
                 return (windowsWidth>600)
             }
        }
    ];