Using Javascript With Grid

[Bob]

Hi, I've been playing around with Kendo UI and am currently testing loading a grid from a HTML table. I also am also testing with and without a row template. One problem that I'm having is I want to include some Javascript that dynamically creates a button when the page loads (for each row). I'm using this in a lot of other places on my site and I'd just like to do the same thing here. I can't seem to include any sort of script tag in the HTML table or when using the row template, it all gets removed. The important thing isn't so much showing a button, but just the ability to execute Javascript inside of a column in each row. Any way to do this?

[John Thompson]

Could you put a placeholder class in the row template and then use jQuery to create the html content of the placeholder to contain the button?  Then make a second pass attaching an event handler to the buttons.

[Bob]

Hi, I tried putting a div placeholder (which is what I do everywhere else on my site as well), and then just spitting out all the <script> tags at the bottom after the Grid to replace the placeholders. This works, but when I introduce paging, the buttons disappear. So, I could be looking at Page 1, see all the buttons load, then go to Page 2 there will be no buttons. If I then go back to Page 1, the buttons are again gone (I believe the grid data binds to the HTML again every time I page).

[John Thompson]

Did you place the jQuery script to build the buttons and attach the event handlers in the dataBound event of the grid?

$(document).ready(initPage);

 

function initPage()

{

    $("#grid").kendoGrid({ dataSource: ..., dataBound: initGridView });

}

 

function initGridView()

{

    $("#grid").delegate(".actionStatus", "click", actionStatus);

}

 

function actionStatus()

{

    //  Do something useful here!

}

This is pseudo-code but I hope it conveys the concept.  The dataSource will invoke read to load the each page of data and then the dataBound event will be fired.  Within the dataBound event you can manipulate the content of the grid.  My template specifies a link with a class="actionStatus" and the dataBound event handler attaches to the click event of the link.