Включить меню столбцов в сетке Kendo только для одного столбца и скрыть указанные c столбцы по умолчанию при загрузке страницы - PullRequest
Новая
       19

Включить меню столбцов в сетке Kendo только для одного столбца и скрыть указанные c столбцы по умолчанию при загрузке страницы

0 голосов
/ 09 апреля 2020

Я хочу предоставить опцию меню столбцов для столбцов только в одном указанном c столбце сетки кендо. Кроме того, при загрузке страницы я хочу отобразить один указанный c столбец и скрыть другие столбцы. Пользователь может выбрать другие (скрытые) столбцы из меню меню столбцов, которое предусмотрено в одном из столбцов.

Я сделал что-то подобное, чтобы скрыть меню столбцов от определенных столбцов: 

<body>
    <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        ShipCountry: { type: "string" },
                                        ShipName: { type: "string" },
                                        ShipAddress: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 30,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        pageable: true,
                        columnMenu: true,
                        columns: [{
                            field: "OrderID",
                            title: "Order ID",
                            width: 120
                        }, {
                            field: "ShipCountry",
                            title: "Ship Country"
                        }, {
                            field: "ShipName",
                            title: "Ship Name"
                        }, {
                            field: "ShipAddress",
                            filterable: false
                        }
                        ]
                    });
                });
$(function(){
     $('#grid .k-header-column-menu').eq(0).hide();
     $('#grid .k-header-column-menu').eq(1).hide();
     $('#grid .k-header-column-menu').eq(2).hide();
})

            </script>
        </div>
</body>

Есть ли лучший способ для достижения этих двух функций?

Ответы [ 3 ]

1 голос
/ 09 апреля 2020

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

var toolbarTemplate = '<div id="column-menu-button" style="float:left" ></div>';
var templ = '<div class="toolbar buttons-wrap" style="text-align: right;"><div id="toolbar"></div></div>';


var grid = $("#grid").kendoGrid({
    toolbar: kendo.template(templ),
    columns: [
        {field: "name", menu: true, hidden: true},
        {field: "age", menu: false}
    ],
    sortable: true,
    dataSource: [
        {name: "Jane Doe", age: 30},
        {name: "John Doe", age: 33}
    ]
}).getKendoGrid();

var createKendoColumnMenu = function (id, dataSource, owner) {
    var kendoColumnMenu = $(id).kendoColumnMenu({
        dataSource: dataSource,
        filterable: false,
        sortable: false,
        columns: true,
        owner: owner,
    });
};

var createKendoToolBar = function (id) {
    var kendoToolBar = $(id).kendoToolBar().getKendoToolBar();

    return kendoToolBar;
};

createKendoToolBar('#toolbar').add({
    template: toolbarTemplate,
    id: 'column-menu',
    overflow: 'never'
});

createKendoColumnMenu('#column-menu-button', grid.dataSource, grid);

Проверьте мой пример: Пользовательская панель инструментов

0 голосов
/ 28 апреля 2020

Я нашел решение, чтобы включить параметр columnMenu только в одном столбце. По сути, я добавляю элемент div в столбец headerTemplate, в котором я хочу включить эту функцию. И затем я присоединяю к нему кендо-колонку. Вот пример: ColumnMenu

0 голосов
/ 09 апреля 2020

Измените массив столбцов, чтобы добавить скрытое свойство. 

columns: [{
    field: "OrderID",
    title: "Order ID",
    width: 120,
    hidden: true
}, {
    field: "ShipCountry",
    title: "Ship Country",
    hidden: true
}, {
    field: "ShipName",
    title: "Ship Name",
    hidden: true
}, {
    field: "ShipAddress",
    filterable: false
}]

Насколько скрыто меню столбцов. У вас уже есть способ сделать это, как функция. Может быть, лучше поместить его в событие сетки данных, но то, как вы это делаете, должно работать нормально.

...