Pass column value to JS function from ClientTemplate in Kendo grid (MVC)

Question

I am trying to pass the column value. But it is not working and always saying "TrackingID" is undefined. I have spent lot of time in trying diff formats, but i feel i am missing something small. When i try to print the value of TrackingID in the column, it works fine. But when i try to pass this value into the function, it gives me the error saying "TrackingID is undefined".. The below column is part of the child grid, which is present inside the kendo template like as follow:-

     <script id="tplHistory" type="text/kendo-tmpl">
            @(Html.Kendo().Grid<TrackingViewModel>()
                .Name("HistoryGrid_#=PartnerGroupID#")
                .Columns(columns =>
                {                
                    columns.Bound(v => v.PriceHigh).Title("Monthly High").Format("{0:c}").Width("12%");
                    columns.Bound(v => v.DateUpdated).Title("Edited Date").Format("{0:MM/dd/yyyy}").Width("10%");
                    columns.Bound(v => v.UpdatedBy).Title("Edited By").Width("10%");
                    columns.Bound(v => v.OperationName).Title("Status").Width("10%");
                    columns.Bound(v => v.TrackingID).HeaderTemplate(" ").ClientTemplate("#= revertTemplate(TrackingID) #");
})

Please help.

columns.Bound(v => v.TrackingID).HeaderTemplate(" ").ClientTemplate("#= revertTemplate(TrackingID)#");


function revertTemplate(tid) {
    console.log(tid);
    var markup = kendo.format("<i title='Revert the record' class='fa fa-floppy-o fontIcon' onclick=revertData({0})></i>", tid);
    return markup;
}

function revertData(trackingid) {
    alert(trackingid);
}

Answer 1

尝试这个：

columns.Bound(v => v.TrackingID).HeaderTemplate(" ").ClientTemplate("<a onclick=\"revertTemplate('#=TrackingID#')\">#=TrackingID#</a>");

Answer 2

Try to update your method as shown below (pass data and use data.PropertyName instead of just using PropertyName ):

columns.Bound(v => v.TrackingID)
    .HeaderTemplate(" ")
    .ClientTemplate("#= revertTemplate(data)#");


function revertTemplate(data) {
    console.log(data.TrackingID);
    var markup = kendo.format("<i title='Revert the record' class='fa fa-floppy-o fontIcon' onclick=revertData({0})></i>", tid);
    return markup;
}

function revertData(data) {
    alert(data.TrackingID);
}

For more information have a look at How Do I Have Conditional Logic in a Column Client Template? Hope this helps...

Answer 3

Finally i found the solution:-

columns.Bound(v => v.TrackingID).HeaderTemplate(" ")
                                .ClientTemplate("<i title='Revert the record' class='fa fa-floppy-o fontIcon' onclick='revertData(\\#:TrackingID\\#);'></i>");