Vue2 + Typescript accessing Events , Properties and Methods

Vue2 + Typescript accessing Events , Properties and Methods

Posted by: grace.l91 on 8 April 2018, 3:23 pm EST

• 

  grace.l91

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 April 2018, 3:23 pm EST

  How do i access the events and methods when sing flex grid in Vue2 typescript?

  Q1 Ex: the rowAdded event buinding was successful and the method rowAdded() is being hit whenever a row is added, but how do i specify the params CellRangeEventArgs? For suppose i would want to get the data of the row or cell that was added.

  
   <wj-flex-grid  :items-source="data" :allowAddNew="true" :rowAdded="rowAdded()">
         <wj-flex-grid-filter></wj-flex-grid-filter>
      </wj-flex-grid>
  
  

  Q2:How do i utilize the getCellData method ? How can i specify that in the template or either programmatically ?

  Q3: How do can i make a column searchable (Kind of like auto fill) ? Ex: A user can type a country name partially and the column can show all the search results as a drop down ?

  P.S I am using Typescript , and would like to know how this can be achieved in similar instance.

  Thank you.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 9 April 2018, 7:22 am EST

  Hi,

  We are working on it. We will update you soon.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 10 April 2018, 5:36 am EST

  1). To get eventArgs, you need to simply pass the function in row-added.

  //Refer to following code snippet

  <wj-flex-grid ref="grid"
  :items-source="data"
  :rowAdded="rowAdded"
  :allowAddNew="true"
  :initialized="init">
  </wj-flex-grid>
  //then in rowAdded method
  rowAdded(sender,args){
  console.log('added');
  console.log('sender',sender);
  console.log('eventArgs',args);
  }
  

  2).To use get cell data you need to do gridInstance.getCellData(row,col).
  
  You can use $refs to get an instance of flex-grid as VueComponent

  //refer to following code snippet

  
  <wj-flex-grid ref="grid"
  :items-source="data"
  :rowAdded="rowAdded"
  :allowAddNew="true"
  :initialized="init">
  </wj-flex-grid>
  //then to get gridInstance from instance of flex-grid as VueComponent
  var grid=this.$refs.grid.$el['$WJ-CTRL'];
  //use grid's methods
  grid.getCellData(row,col);
  

  3).To do that you need to add custom editor to flex-grid.
  
  You can add custom editor by handling the formatItem event.

  Find the attached sample of the same.angular-elements-master.zip

• 

  grace.l91

  • Post Options:
  • Link
    Copy

  Posted 16 April 2018, 7:52 pm EST

  Thank you very much sir but ,

  
  var grid=this.$refs.grid.$el['$WJ-CTRL'];
  grid.getCellData(row,col);
  
  

  This is giving me an error saying grid does not have function .$el. And what is the .$el[‘$WJ-CTRL’] element ? I thought in Vue2 we can select an element as this.$refs(‘grid’) , but this is also not giving me access to any functions.

  Edit: Sorry for troubling with all these questions. I am a bit new to wijmo and Vue.

  Thank you for your help.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 17 April 2018, 2:40 am EST

  Hi Grace,
  
  You may access wijmo control within class using Control property. Please refer to the following code snippet:
  
  HTML:

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

  Script:

  
  export default class HelloWorld extends Vue {
    data=getData(50)
    flex = null;
    getGridReference (){
      console.log(this.flex);
    }
   
    printData(grid){
      let range= grid.selection;
      alert(grid.getCellData(range.row, range.col,true));
    }  
    
  }
  
  
  

  Hope it helps!

  ~Manish