Как динамически устанавливать столбцы в шаблоне Kendo

Как динамически устанавливать столбцы в шаблоне Kendo для сетки kendo. В моей сетке кендо столбцы могут быть изменены динамически на основе пользовательских предпочтений. Как динамически создавать шаблон Kendo? Я использую JavaScript Kendo, я могу переключиться на Kendo MVC, если та же самая вещь Я могу достичь там. Есть ли другой подход к достижению этого?

<script id="rowTemplate" type="text/x-kendo-template">
        <tr class="k-master-row">

            <td>

                    <div>#=column1#</div>

            </td>
            <td><span class="mydesign" title="column2#"</span></td>
            <td>#column3#</td>
            <td>#=column4#</td>

        </tr>
    </script>

Изменение: в сетке Kendo мы динамически устанавливаем столбцы. Теперь вопрос заключается в том, как установить динамическую ширину для таблицы контента и таблицы заголовков. Если он превышает максимальную ширину, как включить горизонтальную полосу прокрутки. Есть ли какой-либо подход для достижения этого?

Ответ 1

Я не использую кендо для MVC, но я все еще могу объяснить, как это сделать, используя обычные функции кендо.

В принципе, вы можете создать новый экземпляр шаблона kendo, передав строку html в kendo.template. Затем вы можете назначить новый экземпляр шаблона сетке rowTemplate (или altRowTemplate), а затем вызвать dataSource.read() чтобы принудительно обновить сетку.

Вы можете создать собственную строку html или обновить существующий шаблон на своей странице, а затем использовать jquery html() чтобы преобразовать его в строку.

Пример:

var htmlTemplate = '';
if (userPreferences.likeRed) {
    htmlTemplate ='<tr class="k-master-row"><td style="background-color:red">#column1#</td></tr>'
} else {
    htmlTemplate ='<tr class="k-master-row"><td style="background-color:green">#column1#</td></tr>'
}

$("#grid").data("kendoGrid").rowTemplate = kendo.template(htmlTemplate);
$("#grid").data("kendoGrid").dataSource.read();

Ответ 2

Чтобы форматировать значение столбца Kendo Grid с условно выбранным действием, вы можете использовать один из подходящих примеров ниже. Дополнительные сведения: Как получить условную логику в шаблоне клиента столбца?

Ниже приведены некоторые примеры использования. С помощью этого подхода вы можете легко создавать разные шаблоны.

Пользовательский интерфейс для Javascript:

{
    field: "EmployeeName", type: "string", width: "55px", title: "Employee Name", 
        template: "#= GetEditTemplate(data) #"
}

Пользовательский интерфейс для MVC:

...
columns.Bound(t => t.EmployeeName)
       .Title("Status Name")
       .Template(@<text></text>)
       .ClientTemplate("#= GetEditTemplate(data)#")
       .Width("55px");
...

Пример I: В этом примере Model передается методу Javascript с использованием свойства "data", а свойство model используется в условии "if".

<script>
//Change the color of the cell value according to the given condition
function GetEditTemplate(data) {
    var html;    
    if (data.StatusID == 1) {
        html = kendo.format(
        //"<a class=\"k-button\" href='" + '@Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a>  ",
        "<span class='text-success'>" +
        data.EmployeeName
        + "</span>"
        );
    }
    else {
        html = kendo.format(
        //"<a class=\"k-button\" href='" + '@Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a>  ",
        "<span class='text-danger'>Cancel</span>"
        );
    }
    return html;
}
</script>

Пример II:

<script>
function Getvalue(value) {
    // console.log(value);
    if (value && value != null && value.indexOf("A") == 0)
        return "<b style='color:red'>" + value + "</b>";
    else
        return "";
}

$(document).ready(function () {  
    $("#grid").kendoGrid({
        dataSource: localDataSource,
        columns: [
            {
                field: "FirstName",
                title: "First Name", template: '#=Getvalue(FirstName)#'
            }
        ],
    });
});
</script>

Надеюсь это поможет...

Ответ 3

Это будет работать в ASP.NET MVC/Razor, если вы заранее подготовите коллекцию определений динамических столбцов, а затем поместите их в модель представления для cshtml. Затем прокрутите коллекцию и вставьте имя поля, которое будет соответствовать источнику данных, заголовку заголовка, желаемой ширине и т.д....

     $("#grid-quick").kendoGrid({
        pageable: {
            pageSizes: [10, 20, 50, 100]
        },
        sortable: { mode: "multiple" },
        columns: [
            @{
                foreach (var col in Model.Columns)
                {
                    @:{ field: "@col.Name.Replace(".","_")", width: "@col.Width" + "px" },
                }
            }
        ],
        filterable: false,
        dataSource: {
            serverPaging: true,
            serverSorting: true,
            pageSize: 20,
            type: 'aspnetmvc-ajax',
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    fields: {
                        @{
                            foreach (var col in Model.Columns)
                            {
                                @: "@col.Name.Replace(".","_")" : { type: "string" },
                            }
                        }
                    }
                }
            },
            transport: {
                read: {
                    url: oVariables.baseURL + "Query/DynamicResults",
                    dataType: "json",
                    type: "post"
                }
            }
        }
    });