Grid binding click event to RowTemplate

[Allan]

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.

 

 

[Rosen]

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