Using a click handler within a template

5 posts, 0 answers
  1. Thomas
    Thomas avatar
    12 posts
    Member since:
    Nov 2011

    Posted 28 Nov 2011 Link to this post

    Hi
    Is it possible to call a function defined outside the template? I have a grid where i need to get a value from the field caseid field and do a lot of stuff, depending on that id. I made a template with a button for each row, but I am not able to reach the function that should take care of the rest.
    I am trying to do something like this, but it doesn´t work:

    function showHistory(caseid){
    // do a lot of stuff here
    };
    var
    btn_template = new kendo.template("<button id='#= caseid#' class='corr-button' onClick='showHistory(#= caseid#)'>show history</button>")

  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 05 Dec 2011 Link to this post

     I'd do this instead (after your template finishes rendering)
    $(".corr-button").click(function(){
       var caseid = $(this).attr("id");
       
       //Do something
        //showHistory(caseid);
    });

  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    7 posts
    Member since:
    Aug 2015

    Posted 02 Oct 2015 Link to this post

    To re-visit the original question, I am in a similar position but my class name is not known at design time so:

    <input type='checkbox' class='cb cbCol" + property + "' name='" + property + "'></input>

    Basically this is a kendo grid with dynamic columns.
    In the header I want a check box that selects all checkboxes for that column in the grid itself.
    One column header will have a style of .cbColXXX and the next will be .cbColYYY for example.

    How can I attach an event to these checkboxes?

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Oct 2015 Link to this post

    Hello Brian,

     

    the html element supports multiple classes - you can use a known one (or, any other selector, for that matter) to collect the checkboxes. Please notice that the case you describe is not specific to Kendo UI, so there are plenty of resources available on the topic. 

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Brian
    Brian avatar
    7 posts
    Member since:
    Aug 2015

    Posted 07 Oct 2015 in reply to Petyo Link to this post

    Was it even worth responding?

    For anybody who may have this same situation I worked it out days ago in the end:

    template for the dynamic column:

    headerTemplate: property + "<input type='checkbox' id='cbCol-" + property + "' class='chkbx' onchange='selectColumn(this);'></input>"

    JavaScript:

    function selectColumn(e) {
    // select checkboxes with a class matching the id of the selected header checkbox
    var name = '.' + e.id;
    $('#divBrandReseedGrid').find(name).prop('checked', e.checked)
    }

     

     

Back to Top
Kendo UI is VS 2017 Ready