Problems with user grid and .ClientTemplate()

[Ryan]

I'm using the kendo grid to display users. I want to have a button for each user that can be clicked on to link to a page to edit user details.
I have the following code to display the required fields and use the ClientTemplate method to display the button that links to the edit user page.

@(Html.Kendo().Grid<Extranet.Web.Models.UserListViewModel.UserList>(Model.Users)
.Name("Grid")
.Columns(columns =>
             {
                 columns.Bound(u => u.UserView.UserName);
                 columns.Bound(u => u.UserView.Name);
                 columns.Bound(u => u.UserView.UserRole);
                 columns.Bound(u => u.UserView.CreatedOn);
                 columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)
                        .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");
             })
 .Pageable()
 .Filterable()
 .Sortable()
 .Selectable()
 .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .Read(read => read.Action("AllUsers", "Admin"))
    )
)

When the page is rendered in a browser it shows all the columns as expected and the button that I can use to link to the appropriate page. However the grid goes in to limp mode and will not change page, sort or filter.

If I take the following line of code out then the grid works fine.

columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)
       .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");

Am I doing something wrong or is there an alternative way to achieve what I am trying to do?

[Dimiter Madjarov]

Hi Ryan,


The only error, that I found in the provided code is a missing closing single quote for the value attribute in the ClientTemplate (showed in red), which is causing the Grid to not render properly.
E.g.

columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)
       .ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#'>Edit</button>");

If the problem persist, please send me a sample project, so I could test it locally and assist you further.

 

All the best,
Dimiter Madjarov
the Telerik team

[Ryan]

Hi Dimiter,

Thanks for your reply. I noticed the missing character and added that in but this did not resolve the issue. I removed the .Template function and changed the column to:

columns.Bound(u => u.UserView.ID).Title("").ClientTemplate("<button class='k-button' value='" +
                                                                                          Url.Action("EditUser", "Admin") +
                                                                                          "/#= UserView.ID #'" +
                                                                                          ">Edit</button>"

This has resolved the issue with the grid and the link works on the first page. However when I interact with the grid (e.g change page, sort or filter) the button stops working.

I use the following javascript to bind to the button click event and redirect to the edit user page:

$(document).ready(function () {
    $('button.k-button').click(function () {
        var url = $(this).attr("value");
        window.location.href = url;
    });
});

This works when the page loads (the grid shows the users with the edit button, clicking the edit button takes me to the edit user page), but not after any interaction with the grid (clicking the edit button does nothing - does not hit any breakpoints that I put within the .click event handler).

Could you advise me what may be causing this?

Thanks

[Dimiter Madjarov]

Hello Ryan,


This behavior is expected in the current scenario, because the click handler is attached using jQuery click() method, which only applies to the elements, which exist on page load. To attach the handler to all elements, even those who are dynamically added later, you should use the on() method.
E.g.

$('#Grid tbody').on("click", "button.k-button", function () {
    var url = $(this).attr("value");
    window.location.href = url;
});

For your convenience, I am also attaching a sample project, which demonstrates this approach.
Wish you a great day!

 

Greetings,
Dimiter Madjarov
the Telerik team

[Ryan]

Thanks Dimiter.

I've changed the to use the .On() method and it's working now on Firefox. Seems there's still a problem on IE7 though, are you aware of any issues with this browser?

Edit: Looks like this issue is affecting all versions of IE.

[Dimiter Madjarov]

Hello Ryan,


Sorry for the inconvenience. You should use the Grid table instead of the tbody element in order for the selector to work in IE.
E.g.

$('#Grid table').on("click", "button.k-button", function () {
    var url = $(this).attr("value");
    window.location.href = url;
});

Another approach that you could take is to use a link tag instead of the button. It will look and work the same way, without the need to attach a click handler to it.
E.g.

columns.Bound(u => u.ProductID).Title("").ClientTemplate("<a class='k-button' href='" + Url.Action("EditUser", "Admin") + "/#=UserView.ID#'>Edit</a>");

I hope this approaches will work in your scenario. Wish you a great day!

 

All the best,
Dimiter Madjarov
the Telerik team

[Ryan]

Thanks Dimiter.

I changed to use link tags and this seems to work better now.