Data-Bind routing on Grid Detail

[Perry]

I have an index html page with a main grid that has a column that is bound.   This works....the user clicks...it routes correctly to gotoView3.   But I have a detail grid that is bound to this main grid
and the exact same column template does not work.  What is the syntax to get this line to route correctly?

template: '<a href=x   data-bind=\'click: goToView3\'  >#=Unit#</a>'


Here is the code

--------index.html------------------

 <script id="index" type="text/x-kendo-template">  

 <div data-role="grid"                                               
  data-editable="false" 
  data-detail-init="viewModelIndex.mainDetailInit"   
  data-columns="[ { field: 'Fleet', title: 'Fleet', width: 80, template: '<a href=x  data-bind=\'click: goToView3\' >#=Fleet#</a>'}  ]"
               data-bind="source: dsFleets, events: { dataBound: dataBound }"
               style="height: 400px">
              </div>

</script>


---------viewmodel.js-----------------------


var viewModelIndex = kendo.observable({



  goToView3: function(e) {
    router.navigate("/ops?fleet=" + e.data.FleetId);
    e.preventDefault();
  },




  dsFleets: new kendo.data.DataSource({
    data : [
      {
        FleetId  : "1",      
        },
        {
        FleetId  : "2",         
        },  
 ],
schema: {
   model: {
     fields: {
      FleetId: { type: "string" }, 
   }
   }
}
}),




mainDetailInit: function (e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({

        dataSource: {
            data:  [
                {       
                FleetId : "1",            
                Unit  : "P0014",   
                },
                {                
                FleetId : "1",            
                Unit  : "P0015",   
                    }
            ],
            schema: {
                model: {
                    fields: {                      
                        FleetId: { type: "string" },     
                        Unit: { type: "string" },
                    }
                }
            },
            pageSize: 20,
            filter: { field: "FleetId", operator: "eq", value: e.data.FleetId }
        },


        scrollable: false,    
        columns: [                 
            { field: "Unit", title: "Unit", width: 200, template: '<a href=x   data-bind=\'click: goToView3\'  >#=Unit#</a>'},           

        ]

    })},

});

[Alex Hajigeorgieva]

Hi, Perry,

Thank you very much for the provided code snippets.

The detail grid in the example is initialized using the jQuery syntax, not the MVVM bindings, this is why the click handler does not work. 

You may initialize the detail grid as an MVVM grid and  bind it to the viewModel in the detaillInit event:

var viewModelIndex = kendo.observable({
     goToView3: function(e) {
       router.navigate("/ops/fleet/" + e.data.FleetId);
       e.preventDefault();
     },
     dsFleets: new kendo.data.DataSource(),
     detailSource: new kendo.data.DataSource(),
     mainDetailInit: function (e) {
       $(`<div class='detail' data-role='grid' data-bind='source:detailSource' data-columns='[{ field: "Fleet", template:"<a href=\\"x\\" data-bind=\\"click:goToView3\\">#=Fleet#</a>" }]'/>`).appendTo(e.detailCell);
       kendo.bind($(".detail"),viewModelIndex);
     }
   });
   kendo.bind("body",viewModelIndex )

Here is a runnable Dojo for your reference:

https://dojo.telerik.com/@bubblemaster/ImAwoViq/2

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Perry]

I've changed my detail grids to use the MVVM bindings as you suggested and that works great.  However I had a filter on my original implementation that would filter the detail grids datasource on whatever was selected on the top level (parent grid).   

      filter: { field: "FleetId", operator: "eq", value: e.data.FleetId }

but the value e is null if I add it to the detailSource in your example

 

 

[Boyan Dimitrov]

Hello,

I would suggest to add a filter to the detailSource using its filter method. This can be performed in the mainDetailInit event in order to access the e argument and have the parent data item. 
 
Regards,
Boyan Dimitrov
Progress Telerik

[Perry]

Sorry for the late reply.....

I'm not sure exactly which event to call and how to apply the filter to only expanded row.    I got it partially working by putting a detailexpand event on the main grid.   But as you see in my dojo, this applies the filter to all the expanded rows and not just the recently selected one.

I've attached the dojo snippet  

[Alex Hajigeorgieva]

Hello, Perry,

Thank you for the provided runnable example.

The reason why the filter is applied to all the detail grids is that the detail source is shared between them. So effectively, it is a single data source instance which has only one state - the current view().

To fix this, we need to have separate data sources with their own filter. If you have local data, you may keep all the data in the view model and use it to create the separate data source instances:

var viewModelIndex = kendo.observable({
  detailData: [{
        FleetId : "Fleet 1",
        Unit  : "Truck 1",
      },
      {
        FleetId : "Fleet 2",
        Unit  : "Truck 2",
      },
      {
        FleetId : "Fleet 3",
        Unit  : "Truck 3",
      }]
});

I can see that the detail column also needs to be bound to a function which is declared in the scope of the view model. This can be done in the dataBound event of the detail grid:

mainDetailInit: function (e) {
  $("<div/>").appendTo(e.detailCell).kendoGrid({
    dataSource:{
      data: viewModelIndex.detailData,
      filter: { field: "FleetId", operator: "eq", value: e.data.Fleet }
    },
    columns: [
      { field: "Unit", width: "90%", title: "unit", template:"<a href data-bind='click:goToView2'>#=Unit#</a>" }
    ],
    dataBound: function(e){
      var detailGrid = e.sender;
      var rows = detailGrid.items();
      $.each(rows, function(i, row){
        kendo.bind($(row), viewModelIndex);
      });
    }
  });
}

Here is the updated Dojo:

https://dojo.telerik.com/@bubblemaster/oRIRanEw

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Perry]

Thanks Alex, got it all working now!

[Alex Hajigeorgieva]

Hi, Perry,

I am pleased to hear you found my response helpful. Should further questions arise, please do not hesitate to get back in touch.

Regards,
Alex Hajigeorgieva
Progress Telerik