This is a migrated thread and some comments may be shown as answers.

Data-Bind routing on Grid Detail

7 Answers 909 Views
SPA
This is a migrated thread and some comments may be shown as answers.
Perry
Top achievements
Rank 1
Perry asked on 05 Feb 2019, 05:41 PM
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>'},           

        ]

    })},

});


7 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 07 Feb 2019, 12:04 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Perry
Top achievements
Rank 1
answered on 13 Feb 2019, 11:17 PM

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



 

 

0
Boyan Dimitrov
Telerik team
answered on 15 Feb 2019, 12:02 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Perry
Top achievements
Rank 1
answered on 05 Apr 2019, 03:03 PM

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  

0
Alex Hajigeorgieva
Telerik team
answered on 09 Apr 2019, 09:14 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Perry
Top achievements
Rank 1
answered on 10 Apr 2019, 05:41 PM
Thanks Alex, got it all working now!
0
Alex Hajigeorgieva
Telerik team
answered on 11 Apr 2019, 08:27 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
SPA
Asked by
Perry
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Perry
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or