Data-Bind routing on Grid Detail

8 posts, 0 answers
  1. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 05 Feb 2019 Link to this post

    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>'},           

            ]

        })},

    });


  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 07 Feb 2019 Link to this post

    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.
  3. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 13 Feb 2019 in reply to Alex Hajigeorgieva Link to this post

    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



     

     

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 15 Feb 2019 Link to this post

    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.
  5. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 05 Apr 2019 in reply to Boyan Dimitrov Link to this post

    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  

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 09 Apr 2019 Link to this post

    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.
  7. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 10 Apr 2019 in reply to Alex Hajigeorgieva Link to this post

    Thanks Alex, got it all working now!
  8. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 11 Apr 2019 Link to this post

    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.
Back to Top