Как установить шаблон cutom для столбцов сетки кендо - PullRequest
Новая
       26

Как установить шаблон cutom для столбцов сетки кендо

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

Мне нужно установить значок кнопки сетки действий Kendo в зависимости от значения. Мой код выглядит следующим образом: 

function InitProductServicesGrid() {
    var prodServiceDataSource = new kendo.data.DataSource({
        transport: {
            type: "json",
            read:
                {
                    url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
                    type: "POST",
                    contentType: 'application/json',
                    data: GetAdditonalData,
                    datatype: "json"
                },
            update:
            {
                url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
                type: "POST",
                contentType: 'application/json',
                datatype: "json"
            }
        },
        schema: {
            data: function (result) {
                return JSON.parse(result.d);
            },
            model: {
                id: "Id",
                fields: {
                    Id: { type: "int" },
                    ServiceTime: { type: "string" },
                    IsActive: { type: "boolean"}
                }
            }
        },
        requestEnd: function (e) {
            if (e.type === "destroy") {
                var grid = $("#productServicesGrid").data("kendoGrid");
                grid.dataSource.read();
            }
        },
        error: function (e) {
            e.preventDefault();
            if (e.xhr !== undefined && e.xhr !== null) {
                var messageBody = e.xhr.responseJSON.Message;
                ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
                var grid = $("#productServicesGrid").data("kendoGrid");
                grid.cancelChanges();
            }
        },
        pageSize: 20,
    });

    $("#productServicesGrid").kendoGrid({
        dataSource: prodServiceDataSource,
        sortable: true,
        filterable: false,
        pageable: true,
        dataBound: gridDataBound,
        editable: {
            mode: "inline",
            confirmation: false
        },
        columns: [
            { field: "Id", title: "", hidden: true },
            {
                field: "ServiceTime",
                title: "Time Standard",
                sortable: false,
                editor: function (container, options) {
                    var serviceTimeTxtBox = RenderServiceTime();
                    $(serviceTimeTxtBox).appendTo(container);
                },
                headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
            },
            {
                title: "Action", command: [
                    {
                        name: "hideRow",
                        click: hideRow,
                        template: comandTemplate
                    }
                ],
                width: "150px"
            }
        ]
    });

}

Я написал пользовательскую функцию шаблона следующим образом: 

function comandTemplate(model) {

    if (model.IsActive == true) {
        return '<a title="Hide" class="k-grid-hideRow k-button"><span class="k-icon k-i-lock"></span></a><a title="Hide"></a>';
    }
    else {
        return '<a title="Show" class="k-grid-hideRow k-button"><span class="k-icon k-i-unlock"></span></a><a title="Show"></a>';
    }
}

Но при отладке я увидел следующее значение для значения модели.

enter image description here

Я следовал этот пример кода . здесь вы можете видеть, я также установил пользовательский шаблон как пример кода. Пожалуйста, помогите мне решить это. Почему я не могу получить доступ к значению модели IsActive из функции comandTemplate.

Обновлено

При нажатии действия hideRow я получаю доступ к dataItem следующим образом. 

function hideRow(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        if (dataItem.IsActive == true) {
            dataItem.IsActive = false;
        }
        else {
            dataItem.IsActive = true;
        }
}

Есть ли какой-либо возможный способ доступа к данным из функции шаблона, как описано выше или каким-либо другим способом?

Ответы [ 2 ]

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

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

  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      {
        template: function(dataItem) {
            const isActive = dataItem.isActive;
            return `<a title=${isActive ? "Hide": "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
        }      
      }
    ],
    dataBound: function(e) {
      e.sender.tbody.find(".k-grid-hideRow").click(evt => {
        const row = evt.target.closest("tr")
        const dataItem = e.sender.dataItem(row)
        dataItem.set("isActive", !dataItem.isActive)
      })            
    },
    dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
  });

Runnable Dojo: https://dojo.telerik.com/@GaloisGirl / eTiyeCiJ

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

Я бы предложил другой подход, потому что вы не можете получить доступ к данным сетки при рендеринге и заполнении сетки.

Я предлагаю использовать два действия и скрыть их в зависимости от флага (в вашем случае IsActive ).

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

ПРИМЕЧАНИЕ : в функции visible вы можете получить доступ к элементу!

РЕДАКТИРОВАТЬ : вы можете получить к нему доступ и изменить его на dataBound, просматривая все данные. Проверьте этот пример: Данные привязаны

...