Nested Vue components

[Sabina Muminovic]

To Whom It May Concern,

We use those syncfusion dependencies with Vue version 2.6.11.

1. Question 1
   Parent access and injection
   Our current example/dummy setup is this:
   * parent grid component: https://prnt.sc/vgsyaw [screenshot 1]
   * custom column grid template for showing column data: https://prnt.sc/vgszqa [screenshot 2]
   * custom column grid proxy component for use of custom template in parent component: https://prnt.sc/vgt56o [screenshot 3]
   When trying to access parent component in child/proxy component via context.parent, the result we currently get is this: https://prnt.sc/vgtlxt - which is expected - to get a parent grid component.
   Now, the question is on how to inject/use objects provided in parent inside child component?
   We found an example at Forum on how to do it with Angular: https://www.syncfusion.com/forums/144875/how-to-bind-this-context-to-child-grid but not how to make it happen with Vue?"
   
   Question 2
   
   
   Following the example above, another question is regarding process of setting up props and transferring its data from child to a parent component
   

   Please follow on [screenshot 3] - line 10 and props setup in a child component, and then take a look at [screenshot 1] - line 36 on referring/making child component template available inside parent (grid) component.
   

   Issue 1: setting/getting props works only with workarounds, such as:
   

   setting propsData of the child component and
   

   extending child's template inside a function which is used to get a child component
   

   Issue 2: this unclean approach leads to errors in a console: https://prnt.sc/vh2pg4
   
   Question 3
   
   
   Please take a look at [screenshot 1] - line 59 - When setting up custom template (child component) to a column template "template: tempFunc",  there is no way to use "content" attribute to GridModel since the "content" does no accept template functions.
   
   Is there a way to make it possible?
   

   
   Question 4
   
   

   We can see attributes accessible/usable in a grids' GridModel for Vue here: https://ej2.syncfusion.com/vue/documentation/api/grid/gridModel/ but there is no VueGridModel specific type. That's from an importance to us since we always have to extend Syncfusion Model Types to use template functions (defined as a Vue components) in typescript. (The reason for this request lays in questions 2 and 3, asked above.)
   
   

   What we would appreciate is clean data flow between parent and child components (between grid component and its custom column templates in this showcase).
   
   

   Is there a different way to handle this?
   
   Thank you!

[Sujith Kumar Rajkumar]

Hi Sabina, 

 

Greetings from Syncfusion support. 

 

Please find the response for your queries below, 

 

Query – 1: “Parent access and injection” 

 

Based on the shared information we could understand that your requirement is to access the parent Grid instance in the child Grid events. This can be achieved by defining the reference in the parent Grid and binding the root instance to the child Grid events as demonstrated in the below code snippet, 

 

<template> 

    <div id="app"> 

        <ejs-grid :dataSource="parentData" ref="grid" :childGrid="childGrid"> 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids"; 

import { data, employeeData } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      childGrid: { 

        dataSource: data, 

        dataBound: this.dataBound.bind(this), 

        queryString: "EmployeeID", 

      }, 

    }; 

  }, 

  methods: { 

    dataBound: function () { 

      // Parent Grid instance is accessed in the child Grid’s dataBound event 

      var parentGridInst = this.$refs.grid.ej2Instances; 

    }, 

  } 

}; 

</script> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-dbhqp?file=/src/App.vue  

 

Query – 2: “another question is regarding process of setting up props and transferring its data from child to a parent component” 

 

Based on the query we could understand that you are trying to pass props from to the child component template which is defined as a separate component. We would like to let you know that extending the template and setting props data in the child component and child template component is the way of achieving it. 

 

As for the console error that you have mentioned while following this approach, it is a known issue from our end and we have already logged bug report for the same. This fix will be included in our 2020 Volume 4 Main release which is expected to be rolled out by the end of December 2020. Until then your patience is appreciated.  

 

You can now track the current status of this request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   

  

Feedback: https://www.syncfusion.com/feedback/19374/vue-warningvue-warn-option   

 

Query – 3: “When setting up custom template (child component) to a column template "template: tempFunc",  there is no way to use "content" attribute to GridModel since the "content" does no accept template functions.” 

Query – 4: “We can see attributes accessible/usable in a grids' GridModel for Vue here: https://ej2.syncfusion.com/vue/documentation/api/grid/gridModel/ but there is no VueGridModel specific type” 

 

We are not able to clearly understand the problem you are referring to with these queries and attached code screenshot. Are you facing issue on binding template to the child Grid when using the GridModel? Because in your query -2, you had mentioned you were able to bind template but facing error on passing props. So can you please elaborate on what issue you are facing here so that we can validate further and provide you the details. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R