Flexgrid control attribute not working in Template Literals?

Flexgrid control attribute not working in Template Literals?

Posted by: rbutler on 12 November 2018, 11:05 am EST

• 

  rbutler

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 November 2018, 11:05 am EST

  Hi,
  
  noticing some challenges with Flexgrid when using as a Vue component with a template literal. Most pressing is this: the control attribute does not appear to get bound to the vue model if the flexgrid is inside a template literal. Please refer to the code below:

  In script file:

  Vue.component("test-grid-1", {
      template: `<wj-flex-grid control="testgrid1"></wj-flex-grid>`
  });
  
  

  In HTML file:

  <test-grid-1></test-grid-1>
  <wj-flex-grid control="testgrid2"></wj-flex-grid>
  
  <span>{{ typeof(testgrid1) == 'undefined' ? 'no test grid 1' : 'yes, test grid 1' }}</span>
  <span>{{ typeof(testgrid2) == 'undefined' ? 'no test grid 2' : 'yes, test grid 2' }}</span>
  

  When I run the above code, testgrid 2 is defined but testgrid 1 is not. Is there an additional or alternate step for binding testgrid 1?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 5:20 pm EST

  Hi,

  Since control ‘testgrid1’ is defined in component ‘test-grid-1’, it can only be accessed by the instance of test-grid-1.
  
  Please refer to the following code snippet:
  
  HTML:
  
  
  
  JS:
  
  export default {
  
  name: “App”,
  
  mounted: function() {
  
  console.log(
  
  “testgrid1 on testgrid”,
  
  this.$refs.testgrid.testgrid1 instanceof wijmo.grid.FlexGrid
  
  );
  
  }
  
  };
  
  You may also refer to the following sample: https://codesandbox.io/s/l5y0qjyy9l

  ~Sharad