CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Turo
Turo

Reputation: 1607

Kendo - on select of a grid's cell update another grid (mvvm)

I have these 2 basic grids (http://jsbin.com/zofoje), upon selection of row in one grid, the other grid should be updated accordingly (e.g. here: orders in 2nd grid should be displayed for selected employee): 

<div id="view1" style="width: 30rem; float: left">

  <div data-role="grid" id="grid1"
     data-columns="[
                   { 'field': 'EmployeeID'}
                   ]"
     data-selectable="true"
     data-bind="source: dataSource, events: {change: onGrid1Select}"
     >
  </div>


    <div data-role="grid" id="grid2" 
     data-columns="[
                   { 'field': 'EmployeeID'},
                   { 'field': 'OrderID'}
                   ]"
     data-bind="source: dataSource"
     >
    </div>

I try to do it with 2 view models, I would like to get clean access to transport actions of 2nd grid. However I'm not getting anywhere with my tries: 

var viewModel1 = kendo.observable({
  selectedEmployeeID: 1,
  dataSource: new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: {
        url: "http://demos.kendoui.com/service/Northwind.svc/Employees"  
      }
    },
    schema: {
      model: {
        id: "EmployeeID"
      }
    },
  }),
  onGrid1Select: function(e){
    var grid1 = $("#grid1").data("kendoGrid");
    var model = grid1.dataItem(grid1.select());
    this.set("selectedEmployeeID", model.EmployeeID);
    console.log("selectedEmployeeID: ", this.get("selectedEmployeeID"));

  }
})

var viewModel2 = kendo.observable({
  dataSource: new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: {
        url: "http://demos.kendoui.com/service/Northwind.svc/Orders"  
      }
    },
    filter: {
      field: "EmployeeID", 
      operator: "eq", 
      value: viewModel1.get("selectedEmployeeID")
    },
    schema: {
      model: {
        id: "OrderID"
      }
    },
  }) 
}) 

    kendo.bind($("#view1"), viewModel1);
    kendo.bind($("#view2"), viewModel2);

I see a similar example here which works though it is not mvvm and works with local data http://jsfiddle.net/scaillerie/UbeXn/1/ . How would I update the datasource of the second grid in my case?

Upvotes: 0

Views: 138

Answers (1)

benpercy
benpercy

Reputation: 26

The dataSource Filter isn't going to be listening for changes to any variables that may have been used to set it's parameters. It basically just takes a snapshot of what those values were when it was set up. If you want to filter the dataSource based on new values, you'll need to redo the filter.

Adding something like this to your onGrid1Select function should do the trick:

viewModel2.get("dataSource").filter({field: "EmployeeID", operator: "eq", value: this.get("selectedEmployeeID")});

Upvotes: 1

Related Questions