Настройте заголовки для сетки кендо, используя Knockout-Kendo.js для привязки ко

Пытаюсь использовать сетку кендо с нокаутной привязкой и библиотекой Knockout-Kendo.js

Он определяется следующим образом:

<div data-bind="kendoGrid:
                {
                    data: SearchResult,
                    rowTemplate: 'rowTmpl',
                    altRowTemplate: 'altTmpl',
                    useKOTemplates: true
                }"> 
</div> 

<script id="rowTmpl" type="text/html">
    <tr class="tdText" role="row">
        <td >
            <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
            </a>
        </td>
        <td data-bind="text: CheckNumber"></td>
        <td data-bind="text: new Date(CreateDate).MMddyyyy()"></td>
        //...
        <td data-bind="text: ParishName">                                        
    </tr>
</script>
<script id="altTmpl" type="text/html">
   //....

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

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

Например, на изображении выше я хочу Co


javascript kendo-grid kendo-ui knockout.js knockout-kendo
person bzamfir    schedule 02.12.2013    source источник

Ответы (3)


arrow_upward
5
arrow_downward

В настоящее время существует специальная опция для прямого указания шаблона заголовка. Что вы можете сделать, так это указать набор столбцов и их заголовков напрямую, используя параметры title или headerTemplate, например:

this.gridOptions = {
    data: this.items,
    rowTemplate: "rowTmpl",
    useKOTemplates: true,
    columns: [ 
        {
            title: "My ID"
        },
        {
            headerTemplate: "<strong>Name Edit</strong>"   
        },
        {
            title: "Name Value"   
        }
    ]
};

Образец: http://jsfiddle.net/rniemeyer/yjYMK/

person RP Niemeyer    schedule 02.12.2013
comment
Мне было бы интересно посмотреть, как вы это сделаете для динамического количества столбцов (определение столбца из списка в виде списка json/jobject) - person Zwik; 22.04.2014

arrow_upward
1
arrow_downward

Вы можете выполнить необходимые настройки, предоставив сетке отдельные определения столбцов. С их помощью вы можете установить ширину, указать headerTemplate, скрыть столбцы:

columns: [{
    field: "FieldName",
    title: "Contact Name",
    headerTemplate: "This will be shown in the header",
    template: "This will be shown in the column",
    hidden: true,
    width: 140
}]
person Lars Höppner    schedule 02.12.2013

arrow_upward
-1
arrow_downward

Также стоит отметить, что вы можете применять привязки к своим шаблонам. В следующем примере используется нокаутирующая привязка:

columns: [{
    field: 'FieldName',
    headerTemplate: '<span data-bind="text:headerName"></span>',
    template: 'This will be shown in the column'
}]

person camloken    schedule 11.09.2015