Vue2 Accessing wijmo fuctions

Vue2 Accessing wijmo fuctions

Posted by: venkata.vimjam on 16 April 2018, 3:42 pm EST

• 

  venkata.vimjam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 April 2018, 3:42 pm EST

  How to access getCellData , onCellEditEnded functions in Vue2 ?

  This is how i am accessing the grid instance

   
   var grid2 = wjcCore.Control.getControl(document.getElementById('grid'));
  
  

  Template:

  
   <wj-flex-grid ref="grid" 
        :items-source="data" 
        :allowAddNew="true" 
        style="height:100%;"
        :rowAdded="rowAdded"
        >
      <wj-flex-grid-column  v-for="col in gridColumns" :key="col" :binding="col">
      </wj-flex-grid-column>
   </wj-flex-grid>
  
  

  Imports

  
  import { WjFlexGrid } from "../node_modules/wijmo/wijmo.vue2.grid";
  import 'wijmo/styles/wijmo.css';
  import {  WjFlexGrid,  WjFlexGridColumn} from "../../node_modules/wijmo/wijmo.vue2.grid";
  import * as wijmo from "../../node_modules/wijmo/wijmo";
  
  

  Package config

  
  "wijmo": "^5.20181.436",   
  
  

• 

  venkata.vimjam

  • Post Options:
  • Link
    Copy

  Posted 16 April 2018, 4:04 pm EST

  Edit - Accessing grid instance.

  
  var grid2 = wijmo.Control.getControl(document.getElementById('grid'));
  
  

  
  grid2.getCellData(row:any, col:any) gives me a property does not exist error.
  
  

  I also looked into the type definitions in wijmo.d.ts an i do not find any such extensions to control function

  edit 2

  var grid3 = this.$refs[‘grid’]
  
  grid3.getCellData()

  This also has same issue.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 17 April 2018, 1:52 am EST

  Hi Venkata,
  
  The recommended way to access Wijmo Controls from Script is using Control property. Please refer to the following code snippet for the same:
  
  HTML:

  
  <button v-on:click="getCellInfo()">Get Selected Cell Data</button>
  <wj-flex-grid control="flex" :items-source="data">
  </wj-flex-grid>
  

  Script:

  export default{
  	name: 'Grid',
  	data () {
  		data: this.getData(),
  		flex: null
  	},
  	methods: {
  		getCellInfo () {
  			let range = this.grid.selection
  			alert(this.grid.getCellData(range.row, range.col, true))
  		}
  	}
  }
  
  

  For getting FlexGrid reference using getControl method, you need to access it using FlexGrid class as following code snippet:

  wjcGrid.FlexGrid.getControl(document.getElementById('grid'));
  

  
  OnCellEditEnded method should be called when you would like to trigger cellEditEnded manually. Using this method is not recommended. 
  To perform some action on cell edit end, you should call cellEditEnded event. 
  
  Please refer to the attached sample that implements the same.
  
  ~Manish
  
  [zip filename="FlexGrid.Control.Access.zip"]https://gccontent.blob.core.windows.net/forum-uploads/file-35800bfa-1f29-4e24-aa78-45c2b325a1cc.zip[/zip]