This is a migrated thread and some comments may be shown as answers.

Accessing row data in a command template

4 Answers 462 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sachith
Top achievements
Rank 1
sachith asked on 07 Apr 2020, 06:08 PM

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?

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Erkan
Top achievements
Rank 1
answered on 07 Apr 2020, 08:51 PM

You can get your grid data using kendoBindingTarget

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

then get your variable from it

kendovm.myVariable
0
sachith
Top achievements
Rank 1
answered on 08 Apr 2020, 05:49 AM
Thanks for your reply. Can you please tell me where should I apply this code snippet.
 
0
sachith
Top achievements
Rank 1
answered on 08 Apr 2020, 06:14 AM

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;
        }
}

 
0
Martin
Telerik team
answered on 09 Apr 2020, 01:57 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
sachith
Top achievements
Rank 1
Answers by
Erkan
Top achievements
Rank 1
sachith
Top achievements
Rank 1
Martin
Telerik team
Share this question
or