Как использовать функцию в шаблоне столбцов Kendo Grid с помощью AngularJS

У меня есть столбец в сетке Kendo, для которого я хочу выполнить определенную логику при рендеринге, и использую Angular. У меня есть столбцы сетки, настроенные с помощью директивы k-columns.

После просмотра документации было просто: я мог бы добавить параметр шаблона в свой столбец, определить функцию для выполнения моей логики и передать значение dataItem in. Что у меня выглядит примерно так:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

Однако при запуске это приводит к синтаксической ошибке, которая жалуется на символ '{', который формирует открытие блока в моей функции.

Я видел несколько примеров определения функции шаблона в этом формате. Есть ли что-то еще, что нужно сделать для этого? Я что-то делаю неправильно? Есть ли другой способ определения шаблона как функции и передачи данных столбца? (Я попытался сделать функцию в моей области $, которая работала, за исключением того, что я не мог понять, как получить данные, переданные в функцию.)

Благодарим вас за помощь.

Ответы

Ответ 1

Похоже, что определение шаблона столбца таким способом не поддерживается при использовании AngularJS и Kendo. Этот подход работает для проектов, которые не используют Angular (стандартный MVVM), но не с его включением.

Обходной путь, который обнаружил мой коллега, заключается в том, чтобы создать шаблон с помощью ng-bind, чтобы указать функцию шаблона в области $scope, все внутри span:

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

Это подход шаблонов столбцов по умолчанию, который используется Telerik в исходном коде Kendo- Angular. Я еще не знаю, требуется ли значение data.Name или нет, но это работает для нас.

Ответ 2

Предупреждение: у нас нет доступа к Kendo для проверки кода на данный момент, но это должно быть очень близко

В вашем случае вы назначаете строку значению k-столбцов, и эта строка содержит слово function и вашу фигурную скобку {

Вам нужно убедиться, что функция выполнена... что-то вроде этого:

k-columns=[
    {
       field: "Name",
       title: "Name", 
       template: (function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
       }())
    }
];

Обратите внимание на разницу:

Мы создаем объект - настоящий объект честной доброты, и мы используем IIFE для заполнения свойства template.

Ответ 3

Возможно, это будет полезно для кого-то - этот код тоже работает для меня:

columns: [
                { field: "processed", title:"Processed", width: "100px",
                    template: '<input type="checkbox" ng-model="dataItem.processed" />' },

и вы получите двустороннюю привязку с чем-то вроде этого:

<div class="col-md-2">
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="vm.selectedInvoice.processed">
                processed
            </label>
        </div>

Ответ 4

После нескольких часов поиска. Вот заключение, которое сработало: доступ к вашим данным сетки как {{dataItem.masterNoteId}} и ваши данные области $как просто имя или функция свойства.

Пример

            template: '<a href="\\#/ops/order/{{orderId}}/note/{{dataItem.masterNoteId}}"><i class="fa fa-edit"></i></a>',

Я действительно надеюсь, что это спасет кого-то жизнь:)