Clear selection in Kendo Grid Detail Template without clearing the selected row

Question

I have a Kendo Grid with detailed template, a grid within grid, and I want only one row to be selected each time. For instance, if a row is selected and I expand it, showing the inner grid, then I select one row from the inner grid, the row in the outer grid always stays selected. Now I have two selected rows in the grid, one selected in the outer grid (the master row) and also the row in the inner grid.

Can I grab some event that would imitate a sort of "OnLeave" event?

I have been going through the Kendo Documentation and the only thing I can come up with is trying to grab something within the Change-event. However I haven´t been able to find out how to clear all selections in both grids without clearing also the selected row I clicked last (either in the inner or outer grid).

Anyway, any help is well apprectiated on this silly matter :)

My View

    @(Html.Kendo().Grid<SomeModel>()
  .Name("SomeGrid")
  .Columns(c =>
      {
          // some columns (abbreviated)
      })
  .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
  .ClientDetailTemplateId("someTemp")
  .Events(events => events.DataBound("dataBound").Change("onSomeGridChange"))
  .DataSource(d => d.Ajax().Model(model => model.Id(p => p.SomeId)))
  )  

<script id="someTemp" type="text/kendo-tmpl">
@(Html.Kendo().Grid<SomeObject>()
  .Name("grid_#=SomeId#")
  .Columns(c =>
      {
          // some columns (abbreviated)
      })
  .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
  .Events(events => events.Change("onSomeGridChange"))
  .DataSource(dataSource => dataSource
                                .Ajax()
                                .Read(read => read.Action("GetSomeData", "Controller", new { blNumber = "#=SomeId#" })))
  .ToClientTemplate()
  )

Then my script:

function onDerpChange(e) {
e.preventDefault();

var fff = e.sender;

// How could I clearselection on all other rows than the one I selected last?

var selectedRows = this.select();
var selectedDataItems = [];
for (var j = 0; j < selectedRows.length; j++) {
    var ddataItem = this.dataItem(selectedRows[j]);
    selectedDataItems.push(ddataItem);
}
}

Petur Subev Petur Subev · Accepted Answer · 2013-11-01T22:37:08

You can use attach 'select' event handlers to all those grids (the outer and the inner one) to a single event which clears all the other selected rows.

The event handler should look something like this:

function onRowSelect(){
     var currentlySelected = this.select();
     $('.k-grid tbody>.k-state-selected').not(currentlySelected).removeClass('k-state-selected')
}

Clear selection in Kendo Grid Detail Template without clearing the selected row

1 Answers