Hey Guys,
Picked up your product back in late October, just getting around to using it. So far most of it has been seamless and the documentation is great. Loving all the controls and how easy they are to implement!
However, today I ran into a snag.
Use Case: I have a basic HTML5 table that I want to convert into a Kendo grid. Before I put an id on the table and target the script, my edit <a> in the table works just fine.
My edit <a> makes a call to a JQuery function where I pass in an id. The function makes a call to my controller (Using MVC 5) which returns a partial view that is then inserted into a div where a different partial view was previously. The 'Add' form is being swapped out with the 'Edit' form.
Here's the <a> tag and script for edit.
<a id="get_edit" class="btn-primary btn-sm " data-id="@t.TransactionId"><i class="fa fa-edit"></i></a>
$("#get_edit").click(function () {
$("#editForm").load("/Transactions/_Edit/" + $(this).data('id'));
});
This works great prior to making the HTML5 table a Kendo Grid. My question is; Why does my edit JQuery function no longer get triggered after I convert the table to a Kendo Grid? How can I fix the problem?
Thanks in advance!
~Josh
1 Answer, 1 is accepted
Any event handlers, which are related to contents inside the Grid, must be attached in the Grid's dataBound event. Before this event is fired, there is no guarantee that the ("correct") <a> element exists on the page, because the Grid constructs its dataSource from the <table> and then re-renders it.
http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
On a side note, I hope that each <a> on each row has a different ID (if an ID is needed at all).
Regards,
Dimo
Telerik