[Solved] Register Click Event to Grid Item

[Christian]

Hi there,

I would like to have a traffic light icon for every row of my grid. When the user clicks on the light an ajax request is triggered and the icon is updated.
However my problem is to register the event.

This is what I have:

    @(Html.Kendo().Grid<CompanyViewModel>()
          .Name("Companies")
          .DataSource(source => source
              .Ajax()
              .Read(read => read.Action("_Index", "Company"))
              .Events(events => events.Error("onError"))
          )
          .Columns(c => {
              c.Bound(i => i.Lock)
                  .ClientTemplate("<span class='glyphicon glyphicon-lock lockable'></span>");
              c.Bound(i => i.Name);
          }
    )

<script type="text/javascript">

    $(function () {
        $('.lockable').click(function (arg) {
            alert('Hello World');
            var grid = $('#Companies').data('kendoGrid');
            var currentCompany = grid.dataItem($(this).closest("tr"));
            // ajax call comes here with ID of currentCompany
        });
   });

I guess my jQuery Expression is called before the Grid is initialized.
But how is it done correctly?

Thanks for any help on that!

Chris

[Dimiter Madjarov]

Hello Christian,


You should use jQuery's on() method to attach the click handler for dynamically appended elements too.
E.g.

$("#Companies").on("click", ".lockable", function(e){
   ...
});

Regards,
Dimiter Madjarov
Telerik