Using Javascript With Grid

4 posts, 0 answers
  1. Jed Horovitz
    Jed Horovitz avatar
    19 posts
    Member since:
    Oct 2007

    Posted 20 Jan 2012 Link to this post

    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?
  2. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 20 Jan 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Jed Horovitz
    Jed Horovitz avatar
    19 posts
    Member since:
    Oct 2007

    Posted 23 Jan 2012 Link to this post

    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).
  5. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 24 Jan 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready