Vue2 New FlexGrid instance

Posted by: venkata.vimjam on 19 April 2018, 12:29 am EST

    • Post Options:
    • Link

    Posted 19 April 2018, 12:29 am EST

    How can i create a new FlexGrid instance and append it to a div within a component ? I can do it if i use the wj-flex-grid tags as a component but not the below way. I tried getting the below instance as a external module, but i am running into assertion errors.

    P.s lang is Typescript

    
    <div id="grid"></div>
    var grid = new FlexGrid('#grid',{column definitions...})
    
    
  • Posted 19 April 2018, 7:22 pm EST

    Hi Venakata,

    Please try with following code snippet for the same:

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import * as wjGrid from 'wijmo/wijmo.grid'
    
    // The @Component decorator indicates the class is a Vue component
    @Component({
      // All component options are allowed in here
      template: '<div id="grid"></div>'
    })
    export default class MyComponent extends Vue {
      // lifecycle hook
      mounted () {
    	let grid = new wjGrid.FlexGrid('#grid',{options})
      }
    }
    

    Hope it helps!

    ~Manish

  • Posted 20 April 2018, 12:07 am EST

    Thank you. Using in component template did the trick. I wonder why it was throwing assertion errors when using in tags even after including compiler.

    Thanks again.

  • Posted 23 April 2018, 8:21 pm EST

    Hi,

    The key point to note here is the mounted hook rather than the template location.

    Since the script to instantiate the grid gets executed before the div renders to DOM, using mounted hook ensures that the template has been created and mounted before its execution.

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels