Accessing row data in a command template

[sachith]

I need to change command template based on data value. My part of code as follows,

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: 'startEdit',
                        click: startEdit,
                        template: "<a title='Edit' class='k-grid-startEdit k-button'><span class='k-icon k-i-edit'></span></a><a title='Update' class='k-button k-button-icontext k-primary k-grid-update' style='display:none;'><span class='k-icon k-i-check'></span></a>"
                    },
                    {
                        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>';
    }
}

But problem is I can't access grid data inside command actions. Have any possible way to do it?

 

 

 

 

[Erkan]

You can get your grid data using kendoBindingTarget

var kendovm = $("#productServicesGrid").kendoBindingTarget.source;

then get your variable from it

kendovm.myVariable

[sachith]

Thanks for your reply. Can you please tell me where should I apply this code snippet.

 

[sachith]

When clicking hideRow. I'm accessing data item as follows,

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

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

 

[Martin]

Hello Sachith,

As far as I understand the scenario, you wish to have a custom button that shows locked/unlocked icon based upon a property in the dataSource. The icons should also switch to the opposite when clicked. If that is the case, here is a very simple Dojo example demonstrating a possible implementation.

Let me know if that works for you. If not, kindly get back to me with some information what would you wish changed.

Regards,
Martin
Progress Telerik