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

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

2 Answers 409 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lawrence
Top achievements
Rank 1
Lawrence asked on 02 May 2018, 10:27 PM

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

2 Answers, 1 is accepted

Sort by
0
Lawrence
Top achievements
Rank 1
answered on 02 May 2018, 10:54 PM

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.

0
Preslav
Telerik team
answered on 04 May 2018, 12:32 PM
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.
For example:

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


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Lawrence
Top achievements
Rank 1
Answers by
Lawrence
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or