Triggering a JavaScript function in the URL.Action Method with a ClientTemplate Column

[Lawrence]

Hello

 

I am trying out Kendo for MVC and I'm having some difficulties with a custom URL action.

Previously I used DataTables in which I had a column for Edit, Details and Delete options which triggers the record to edit and a JavaScript function that initializes a partial view popup where I can edit, view or delete the record.

 

Here is an example of the code from the column inside DataTables that I used:

return '<a href="@Url.Action("Edit", "Country")?id=' + data + '" class="editCountry">Edit</a>;

 

And here is the JavaScript function that us triggered when I click on Edit:

$('#countriesTable').on("click", ".editCountry", function (event) {

                event.preventDefault();

                var url = $(this).attr("href");

                $.get(url, function (data) {
                    $('#editCountryContainer').html(data);

                    $('#editCountryModal').modal('show');
                });

            });

 

Here is my current code for the edit button inside the Kendo Grid:

columns.Template(@<text>Actions</text>).ClientTemplate("<a href='" + Url.Action("Edit", "Country") + "/#=CountryIdentifier#'>Edit</a>");

 

When I click on the edit button it tries to edit the record on a new page which obviously won't work because I'm using a partial view.

 

How can I trigger the same JavaScript function I used in my DataTables Column inside my Kendo Grid Column?

 

Thanks

[Lawrence]

I have figured it out.

 

I have changed my JavaScript function to the following:

$('#countriesTable').on("click", ".editCountry", function (event) {

                event.preventDefault();

                var url = $(this).attr("href");

                $.get(url, function (data) {
                    $('#editCountryContainer').html(data);

                    $('#editCountryModal').modal('show');
                });

            });

 

And then I changed the code for the edit button in Kendo Grid to this:

 

columns.Template(@<text>Actions</text>).ClientTemplate("<a class='editCountry' href='" + Url.Action("Edit", "Country") + "/#=CountryIdentifier#'>Edit</a>");

 

It's working like a charm now.

[Preslav]

Hi Lawrence,

Thank you for sharing the solution with the community.

I noticed that you are handling the click over the "countriesTable" HTML element. When the Grid rebinds due to filtering, paging, etc., the handler might detach. That said, if this happens, you could workaround this by attaching it during the dataBound event handler.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

For example:

function onDataBound(e){
    $('#countriesTable').off("click");
    $('#countriesTable').on("click", ".editCountry", function (event) {
      //...
    });
}

Regards,
Preslav
Progress Telerik