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

3 posts, 0 answers
  1. Lawrence
    Lawrence avatar
    10 posts
    Member since:
    May 2018

    Posted 02 May 2018 Link to this post

    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. Lawrence
    Lawrence avatar
    10 posts
    Member since:
    May 2018

    Posted 02 May 2018 in reply to Lawrence Link to this post

    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.

  3. Preslav
    Admin
    Preslav avatar
    579 posts

    Posted 04 May 2018 Link to this post

    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.
Back to Top