ClientTemplate with Javascript function

[Siobhan McTear]

I have a Kendo Grid with a column that displays a persons name. I want the person's name to be a link and when clicked calls some javascript passing the name as a parameter. However I receive an error when I attempt to call this function with a string parameter, numeric paramters are ok. The code is as follows:

<div id="grid">
        @(Html.Kendo().Grid(Model.clients)
                .Name("Search_grdResults")
                .Columns(columns =>
                {
                    columns.Bound(client => client.Hcn);

                    columns.Bound(client => client.Hcn).ClientTemplate("<a onclick=showTest('#=FullName#')>#=FullName#</a>");
                })
                    .Pageable()
                    .Sortable()
                    .DataSource(dataSource => dataSource
                       .Ajax()
                       .PageSize(5)
                       .Read(read => read.Action("GetClients", "ClientLookup"))
               )
        )

    </div>

The javascript is a simple alert just for testing purposes for now:

function showTest(fullname) {

        alert(fullname);

    }

How can I correct to allow string parameters to be passed to the javascript function?

[Siobhan McTear]

Appears I need to escape quotation with a \ like below:

columns.Bound(client => client.Hcn).ClientTemplate("<a onclick=\"showTest('#=FullName#')\">#=FullName#</a>");


I would preferably like to pass the model into the javascript function rather than just the property FullName. Is this possible?

[Dimiter Madjarov]

Hi Siobhan,


Yes, you could achieve this by using the data keyword, which refers to the current dataItem.
E.g.

columns.Bound(client => client.Hcn).ClientTemplate("<a onclick=\"showTest('#=data#')\">#=FullName#</a>");

Regards,
Dimiter Madjarov
Telerik

 

 

[Siobhan McTear]

Using the code above I either get only the string value [object Object] passed through to the javascript function or when I remove the single quotations from the parameter I can an error:
JavaScript critical error in (unknown source location)\n\nSCRIPT1007: Expected ']'

Below are the variations of the code I used:
columns.Bound(client => client.FullName).ClientTemplate("<a onclick=\"showTest('#=data#')\">#=FullName#</a>");
columns.Bound(client => client.FullName).ClientTemplate("<a onclick=\"showTest(#=data#)\">#=FullName#</a>"); //removed single quotations from parameter

Must I do something else before I can pass this as a parameter?

[Dimiter Madjarov]

Hello Siobhan,


Please excuse me for the inconvenience. A more suitable approach in the current case would be to directly retrieve the item model in the showTest function.
E.g.

columns.Bound(client => client.Hcn).ClientTemplate("<a onclick=\"showTest()\">#=FullName#</a>");

function showTest() {
    var grid = $("#grid").data("kendoGrid");
    var model = grid.dataItem($(event.target).closest("tr"));
}

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Siobhan McTear]

Using the code above the model variable is always null. Are there other code amendments required? If this is not possible maybe we can pass the index of the row and get the model from that index in the collection.

[Siobhan McTear]

The issue appears to be with 'event'. I changed to pass in event arguments and then access target from that and it seems to work:

columns.Bound(client => client.Hcn).ClientTemplate("<a onclick=\"showTest(event)\">#=FullName#</a>");

 function showTest(e) {

        var grid = $("#Search_grdResults").data("kendoGrid");
        var model = grid.dataItem($(e.target).closest("tr"));

[Dimiter Madjarov]

Hi Siobhan,


Thanks for the update. Let us know if further assistance is required.

Regards,
Dimiter Madjarov
Telerik