Master / Detail Functionality in kogrid

Question

I want to implement Master / Detail Functionality in kogrid. So that when I select any field of first grid table all the other details will be shown in next detail grid. Can anybody have any hint how to implement this.

Answer 1

A create a master/detail grid set you need to use a ko.computed to select/filter the detail.

You need 3 observable arrays and 1 computed.

var model = {
  parent: ko.observableArray(),
  details: ko.observableArray(),
  selectedParents: ko.observableArray()
};

model.selectedDetails = ko.computed( function() {
  var selectedParent = this.selectedParents()[0];

  if ( !selectedParent ) {
    return [];
  }

  return this.details().filter( function(item) {
    // define filter comparison here
  } );
}, model );

In your markup, define 2 koGrids

<div data-bind="koGrid: { 
  data: parent, 
  multiSelect: false, 
  selectedItems: selectParents }"></div>

<div data-bind="koGrid: { data: selectedDetails } "></div>

koGrid will populate the selectedItems observableArray with Zero or One item. The computed will execute a filter over the children which the second grid is bound to.

I have omitted the columnDef data bind part from breivity.

If you have an AJAX query to run for the details array, then use a subscription against the "parent" observable, change selectDetails to a straight observableArray and set its contents in the AJAX callback

See this jsFiddle for a basic example