Not capturing correct row information from grid

[Ruairi]

I have a grid (EditPersonnelRolesGrid) with a column holding a dropdownlist for a training role. For each row on this list the dropdownlist will hold different values.

I use an EditorTemplate (GridPersonnelRoles) to render the dropdownlist. The dropdown list has a  Datasource.Read() where it passes the training exercise id to the controller which then passes back the relevant select list of training roles. The exercise id is stored as a column on EditPersonnelRolesGrid. A JavaScript function (getParentId) tries to get this information from the grid row. This code was adapted from other threads regarding the same problem. However this javascript function always returns the first row of grid values regardless of what row is selected. I would appreciate any help.

 

EditPersonnelRoles.cshtml:

@model IEnumerable<PersonnelRoleEditorModel>
@using Mallon.IReport.Models
@Html.Hidden("ID", (object)ViewBag.DrillReport)
@Html.Hidden("exID", (object)ViewBag.ExerciseID)
@Html.Hidden("TrainingEventID", (object)ViewBag.TrainingEventID)
@Html.Hidden("personID", (object)ViewBag.PersonID)


<table style="width:100%">
  <tr>
    <td>
      <div class="list rounded">

        @(Html.Kendo().Grid<PersonnelRoleEditorModel>()
          .Name("EditPersonnelRolesGrid")
          .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
          .AutoBind(true)
          .Columns(columns =>
          {
            columns.Bound(r => r.PersonnelId).Hidden();
            columns.Bound(r => r.ExerciseAllocationId).Hidden();
            columns.Bound(r => r.ExerciseName).Title("Exercise");
            columns.ForeignKey(r => r.RoleOid, (System.Collections.IEnumerable)ViewBag.Roles, "Value", "Text")
              .EditorTemplateName("GridPersonnelRoles")
              .Title("Exercise")
              .Width(200);
            columns.Command(command => { command.Edit(); }).Width(172);
          })
          .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
            model.Id(p => p.PersonnelId);
            model.Field(p => p.ExerciseName).Editable(false);
          })
          .Events(e =>
          {
          e.Error("handleAjaxError");
          })
          .Update(update => update.Action("UpdateExerciseRoles", "DrillAttendance"))
                .Read(read => read.Action("ReadPersonnelRoles", "DrillAttendance").Data("getPersonnelRolesValues"))
          ))

</div>
    </td>
  </tr>
</table>


GridPersonnelRoles.cshtml:
@model object

@(Html.Kendo().DropDownListFor(m => m)
  .DataValueField("Value")
  .DataTextField("Text")
  .DataSource(ds => ds.Read(read => read.Action("GetDropDownRolesList", "DrillAttendance").Data("getParentId")))
  )

Javascript:
function getParentId() {
  var target = $(event.currentTarget);
  var row = $(target).closest("tr");
  var grid = $(target).closest("[data-role=grid]").data("kendoGrid");
  var dataItem = grid.dataItem(row);
  return { exerciseId: dataItem.ExerciseAllocationId };
}


Controller code:
 public JsonResult GetDropDownRolesList(string exerciseId)
    {
      ExerciseAllocation ea = DbSession.Get<ExerciseAllocation>(new Guid(exerciseId));
      SelectList Roles = SelectListHelper.TrainingEventRoles(DbSession, ea.Exercise, ea.Role);

      return Json(Roles, JsonRequestBehavior.AllowGet);
    }

[Venelin]

Hi Tyler,

See what's returning $(event.currentTarget) in your browser console, it's not the dropdown, but the grid. So you need to use $(event.target); instead. The rest of the code is correct except that you are wrapping target twice in jQuery object, which will work but it's not necessary.

Regards,
Venelin
Telerik

[Ruairi]

Thank you for your reply Venelin.

I am actually trying to return the grid. It is a value from the current row in the grid that I want to pass to the controller to load the correct values for the dropdown. It is returning the requested value from the correct grid but not from the correct row.

The grid has a hidden column for the ExerciseId, a column for the exercise name, a column for a dropdown of roles which can be selected for that exercise and a column for the edit button. On pressing the edit button on a particular row the editor template calls getParentId to get the ExerciseId of the same row. This is passed to the read action of the dropdown so that the correct list of roles for that exercise is bound to the dropdown. However at the moment it is only returning the ExerciseId of the first row of the grid not the ExerciseId of the same row as the selected Edit button. 

Does selecting the Edit button on a particular row make that row the "closest("tr")"? If not what can I do to fix this?

Thanks for your help.

[Venelin]

Hi Tyler,

"It is a value from the current row in the grid that I want to pass"
--> In order to get reference to the current row (i.e. the row on which the clicked dropdown is) you have to use the approach I mentioned. After you have the reference you can get the dataItem and then the field you want (ExerciseId).

I can't tell why closest('tr') returns the first row without debugging the actual code. You can put a breakpoint and see if you are traversing the DOM correctly, but the approach that I mentioned should work just fine, please give it a try.

Regards,
Venelin
Telerik