Kendo grid mvc - pass grid row through javaScript function

Question

I'm using kendo grid with checkbox client template and I would like to pass the row to a function.

<div>

    @(Html.Kendo().Grid(Model).Name("EvaluationFormGrid").DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
              model.Id(m => m.EventEvaluationFormId);
              model.Field(m => m.EventEvaluationFormId).Editable(false);
          })
          .Destroy(delete => delete.Action("DeleteEvaluationForm", "EvaluationFormsManagement"))
          .PageSize(60)
          .ServerOperation(false)
          ).Columns(c =>
          {
              c.Bound(m => m.EvaluationFormTitle).Width(150).Title("Evaluation Form Title");
              c.Bound(m => m.EvaluationFormLink).Width(300).Title("Evaluation Form Link");
              c.Bound(m => m.ModifiedUserName).Title("Mod. by").Width(80);
              c.Bound(m => m.ModifiedDateUtc).Title("Mod. date").Width(80);
              c.Bound(m => m.IsDisplayedInApp).Title("Is displayed in app").Width(80)
                 .ClientTemplate("<input type='checkbox' #= IsDisplayedInApp ? checked='checked' :'' # value='#=IsDisplayedInApp#' onClick='onChange(#=IsDisplayedInApp#)'/>");
              c.Bound(m => m.EventEvaluationFormId).Title(string.Empty).Width(80)
                  .ClientTemplate("<a class='table-entry-control edit-entry-control' href='" + Url.Action("ManageEvaluationForm", "EvaluationFormsManagement",
                      new { area = "Admin" }) + "/#= EventEvaluationFormId #'" + "><span class=\"k-icon k-edit\"></span>Edit</a><br />")
                  .Sortable(false);
              c.Command(commands =>
              {
                  commands.Destroy();

              }).Title("").Width(80);

          })
          .Events(events => events.Change("onChange"))
          .Editable(e => e.DisplayDeleteConfirmation(true)).Deferred().DataSource(datasource =>
              datasource
                  .Ajax()
                  .ServerOperation(false)).Deferred(true))


    <script>
        function onChange(arg) {
            alert(arg);
            var selected = $.map(this.select(), function (item) {
                return $(item).text();
            });

            kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
        }
    </script>

</div>

With this line I would like to pass in the whole row, right now I only pass in a boolean:

c.Bound(m => m.IsDisplayedInApp).Title("Is displayed in app").Width(80)
                     .ClientTemplate("<input type='checkbox' #= IsDisplayedInApp ? checked='checked' :'' # value='#=IsDisplayedInApp#' onClick='onChange(#=IsDisplayedInApp#)'/>");

Does anyone know how I could pass row here:

onClick='onChange(#=IsDisplayedInApp#)

Thanks

Answer 1

Try this:

function onClick(chk) {
   var grid = $('[name="EvaluationFormGrid"]').data("kendoGrid");

   // Get the row
   grid.dataItem($(chk).closest("tr"));
};

I'm not used to Kendo MVC so I don't know what .Name() generates, but in the first line of the function, you have to get the grid widgtet instance to the grid var.