Vue2 + Typescript Wijmo cell template module

Vue2 + Typescript Wijmo cell template module

Posted by: grace.l91 on 18 April 2018, 11:22 am EST

• 

  grace.l91

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 April 2018, 11:22 am EST

  Where can i find the wjFlexGridCellTemplate or wj-flex-grid-cell-template equivalent class in wijmo npm packages ?

  I am kinda trying to achieve the below functionality. Also is there any way i can add in the auto complete control programmatically?

  
   <wj-flex-grid-column header="Downloads" binding="sales">
                      <wj-flex-grid-cell-template cell-type="CellEdit">
                         <wj-auto-complete delay="0" is-editable="{{AutoCompleteEditable}}" items-source="autoComplete" text="$value" display-member-path="sales" class="cell"  min-length="1"></wj-auto-complete>
                      </wj-flex-grid-cell-template>
                  </wj-flex-grid-column>
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 18 April 2018, 6:07 pm EST

  HI Grace,
  
  We are sorry indeed, currently wjFlexGridCellTemplate is not supported for Vue2. This is supported with Angular/Angular2 only.

  However, you may add custom editor to the FlexGrid using format item. Please refer to the following fiddle for the same:
  
  http://jsfiddle.net/mkgupta911/go2ft50z/

  ~Manish

• 

  grace.l91

  • Post Options:
  • Link
    Copy

  Posted 18 April 2018, 10:16 pm EST

  Thank you sir but I am getting a grid type error of null and e.panel does not exist in EventArgs error. Is there a better event which i could grab hold of to add the controls ?

   
  
     <wj-flex-grid
        control="grid"
        :items-source="data" 
        :loadingRows="init"
        :prepareCellForEdit="mount"
        >
  
  mount(s:GridPanel){
  	var col = s.columns.getColumn('Contract');
      	var grid = col.grid;
  
           grid.formatItem.addHandler((s,e)=>{
          var editRange = grid.editRange;
          var  column = e.panel.columns[e.col];       
      })
  }    	
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 April 2018, 7:16 pm EST

  Hi Grace,
  
  Please use in initialized event for the same as following code snippet:

  <wj-flex-grid
        control="grid"
        :items-source="data" 
        :loadingRows="init"
        :prepareCellForEdit="mount"
        >
  import * as wjGrid from 'wijmo/wijmo.grid'
  mount(s:wjGrid.FlexGrid){
  	var col = s.columns.getColumn('Contract');
      	var grid = col.grid;
  
           grid.formatItem.addHandler((s,e:wjGrid.FormatItemEventArgs)=>{
          var editRange = grid.editRange;
          var  column = e.panel.columns[e.col];       
      })
  } 
  

  ~Manish

• 

  grace.l91

  • Post Options:
  • Link
    Copy

  Posted 20 April 2018, 2:40 am EST

  Thank you Manish. It helped. I had to tweak it slightly.

  
  grid.formatItem.addHandler((e: wjGrid.FormatItemEventArgs) => {
          var editRange = grid.editRange;
          var column = e.panel.columns[e.col];
        });
  
  wijmo.grid.d.ts
  
      readonly formatItem: wjcCore.Event;
      onFormatItem(e: FormatItemEventArgs): void;
  
  

  –Edit
  
  Not solved yet my bad.

• 

  grace.l91

  • Post Options:
  • Link
    Copy

  Posted 21 April 2018, 7:58 am EST

  the example provided in http://jsfiddle.net/go2ft50z/ is only working partially for me. When the control is inserted the celleditending event is being fired immediately (when i select the control) and no value is being set to the actual cell once i move to another cell. Can i please get this example in vuejs ?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 April 2018, 9:17 pm EST

  Hi,
  
  Please find the vue example of the same in the attached sample.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 April 2018, 9:18 pm EST

  vue-custom-editor.zip

• 

  dan.groza

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 11:18 pm EST

  Hi Manish,
  
  Any updates regarding wj-flex-grid-cell-template integration with Vue?

  Thank you,
  
  Dan

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 August 2019, 2:36 pm EST

  Hi Dan,

  We are sorry but cell templates for Vue are currently not in our roadmap. But there is already a case regarding the same with internal tracking id 388268. We have added you as a correspondent to the case. We will give you an update as soon as this feature is implemented.

  Regards,
  
  Ashwin