Как настроить шаблон столбца, когда автоматически создается столбец сетки кендо?

Question

Как настроить шаблон столбца, когда автоматически создается столбец сетки кендо?

1

Я назначаю источник данных в сетку Kendo с помощью javascript:

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "@Url.Action("GetProductList", "Home")",
                type: "POST"
            }
        }       
    });
    var grid = $("#gridHardwares").kendoGrid({
        dataSource: dataSource,
        height: 600,
        sortable: true,
        groupable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        resizable: true
    }).data("kendoGrid");

Обратите внимание, что столбец datasource генерируется динамически (он будет расширяться каждый год).

Поэтому я не смог найти способ настроить столбцы сейчас. Что я могу сделать здесь, чтобы настроить его так, добавить дополнительный столбец флажка, отредактировать заголовок, а также установить groupFooterTemplate?

Раньше столбцы фиксировались, и я могу легко настроить:

        columns: [
        {
            template: "<input type='checkbox' class='checkbox' />",
            width: 20
        }, {
            field: "PRODUCT_NAME",
            title: "Product Name",
            width: 200
        }, {
            field: "PRICE2017",
            title: "Price 2017",
            width: 200,
            aggregates: ["sum", "average"],
            groupFooterTemplate: "Sum: #= kendo.toString(sum, '0.00') # || Average: #= kendo.toString(average, '0.00') #"
        }]

Кроме того, возможно ли сделать данные доступными для редактирования в сетке?

Скажите, пожалуйста, если использование javascript - это не очень хорошая идея :( Большое спасибо за предложение или идею.

newbieeee 08 июнь 2017, в 11:41

Источник

Теги:

javascript

kendo-grid

kendo-asp.net-mvc

1 ответ

Ещё вопросы

newbieeee · Accepted Answer · 2017-06-12T04-40-00.000Z

Я размещаю свое решение здесь, возможно, это может помочь кому-то в будущем.

    var customColumns =  [{
            template: "<input type='checkbox' class='checkbox' />",
            width: 20
        }];

затем настроил ваш собственный заголовок: var customHeaders = []

    for (var i = 0; i < customHeaders.length; i++) {
    if (i > 4) // after Name, Description, Region etc..
    {
        if (i == 5) // start with the first price column
        {
            customColumns.push({ 
                title : customHeaders[i], 
                field: headers[i],
                width: 150,
                template:
                    "# if(" + headers[i] + " != null) {# " +
                    "#= kendo.toString(" + headers[i] + ", 'n') #" +
                    "# } else { #" +
                    "" +
                    "#} # ",
                aggregates: ["sum", "average"],
                groupFooterTemplate: "Sum: #= kendo.toString(sum, '0.00') # || Average: #= kendo.toString(average, '0.00') #"
            });
        }
        else // compare price with previous year
        {
            customColumns.push({ 
                title : customHeaders[i], 
                field: headers[i],
                width: 150,
                template:
                    "# if(" + headers[i] + " != null) {# " +
                    "#= calculatePercentage(" + headers[i-1] + ", " + headers[i] + ") #" +
                    "# } else { #" +
                    "" +
                    "#} # ",
                aggregates: ["sum", "average"],
                groupFooterTemplate: "Sum: #= kendo.toString(sum, '0.00') # || Average: #= kendo.toString(average, '0.00') #"
            });
        }
    }
    else
    {
        customColumns.push({ 
            title : customHeaders[i], // customized header
            field: headers[i] // original header
        });
    }
}

Спасибо, Сандман за подсказки!