Grid binding click event to RowTemplate

2 posts, 0 answers
  1. Allan
    Allan avatar
    1 posts
    Member since:
    Jan 2013

    Posted 28 Oct 2015 Link to this post

    I'm loading the Grid ​in MVC, and I 'm making a rowTemplate, as I would like to bind custom javascript functions. I'm building my javascript in anonymous functions, which I'm later on are going to Grunt. I would like not to write inline javascript in my cshtml-files, as I'm trying to keep a clean structure. And I would also like to keep the Grid in ASP.NET MVC and not Kendo UI, as I'm going to use data annotations.

    Via Events => Events.Change I'm able to find the whole Grid element via $("#UnitsList").data("kendoGrid") in my Javascript code. But I'm not able to bind any custom click events to the row template, e.g { click: seeUnitTree }.

    The Grid loads fine and I'm getting the data displayed as I want it. But I can't seem to bind anything to the grid at all. I'm also trying via MVC trying to bind an OnChange event when I click on a cell. This only fires the when the grid is loaded.

    //removed for abbreviation
            .ClientRowTemplate(
                "<tr data-id='#: Id #' class='row-unit unit-#: Id #'>" +
                    "<td class='unit-id'>" +
                           "<span> #= Id # </span>" +
                    "</td>" +
                    "<td class='unit-name'>" +
                        "<a href='" +
                                    Url.Action("UnitDetails", "BusinessUnitsObjects") +
                            "'>" +
                            "<span> #= Name # </span></a>" +
                    "</td>" +
                    "<td class='address-1'>" +
                        "#: Address1 #" +
                    "</td>" +
                    "<td class='address-2'>" +
                        "#: Address2 #" +
                    "</td>" +
                    "<td class='zipcode text-center'>" +
                        "#: ZipCode #" +
                    "</td>" +
                    "<td class='town'>" +
                        "#: Town #" +
                    "</td>" +
                    "<td class='country'>" +
                        "#: Country #" +
                    "</td>" +
                    "<td class='parent-name'>" +
                        "<div class='input-group in-active'>" +
                            "<input type='text' class='form-control' value='#: ParentId #' data-bind='events: { click: seeUnitTree }'>" +
                            "<span class='glyphicon glyphicon-list input-group-addon'></span>" +
                        "</div>" +
                    "</td>" +
                 "</tr>"
            )
    //removed for abbreviation

     

    Javascript functions:

    1.:

    var grid = $("#UnitsList").data("kendoGrid");
    grid.bind("seeUnitTree", function () {
        console.log('clickity click');
    });

     

    2.:

    var viewModel = kendo.observable({
        seeUnitTree: function (e) {
             console.log('clickity click');
        }
    });
    var grid = $("#UnitsList").data("kendoGrid");
    kendo.bind(grid, viewModel);​

     

    What am I missing?

    Se attached files for further detail in code.

     

     

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 30 Oct 2015 Link to this post

    Hello Allan,

    You can attach the click handler either directly using onclick="someFunction()" or via jQuery for example:

    $(function() {
       $("#UnitsList").getKendoGrid().tbody.on("click", ".input-group input", someFunction);
    });

    Also I have noticed few issues with the code you have provided.
     - You should not mix MVVM and UI for ASP.NET wrappers on the same elements - it is not supported
     - The event handlers of the widgets expects function reference not the function call as in the provided declaration
     
    events.Change("OBSERVE_UNITS.onChange()") // this is a function call it is not valid it should be
    events.Change("OBSERVE_UNITS.onChange") // note that there are no parentheses

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top