Restore Layout dont apply CellTemplate VUE

Restore Layout dont apply CellTemplate VUE

Posted by: raphael.silva on 27 October 2020, 9:23 am EST

• 

  raphael.silva

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 October 2020, 9:23 am EST

  I am tring make that restore layout work it whit celltemplate.
  
  I implemented in this format

  
  <wj-flex-grid-column
           :allow-merging="false"
           :width="140"
           :header="$t('tableColumns.obsCancelado')"
           :cell-template="celltemplate"
           align="left"
           binding="ce120_ds_observ"
         />
  ...
  ...
  data: function () {
  ...
  celltemplate: CellMaker.makeButton({
         text:'<b>${item.ce120_ds_observ}</b>',
         click: (e, ctx) => {
           this.abreObservacao(ctx.item.ce120_ds_observ)
       }}),
  ...
  
  

  it works when the grid open the first time but when i restore, the celltamplate dont apply.

  i tried make also

  
  	<wj-flex-grid-cell-template>
  
  

  but the result is same.Celltamplate - Restore layout.zip

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 October 2020, 12:29 am EST

  Hi Raphael,

  The cellTemplate property and wj-flex-grid-cell-template are not serializable and therefore cannot be saved with the column layout. Also, when the column layout is updated. all the previous columns are removed and re-created according to the layout assigned. Therefore, the cell template is also removed.
  
  You can resolve this issue by using the dynamic columns solution. Instead of creating each of the columns in the template, you can instead create a columns array on the component side and use the v-for directive to create the columns on the template side. You can save the layout as before but while restoring the layout, instead of setting the columnLayout property, you will update the columns array.
  
  Now, for cell templates, you can assign the template by checking the binding property.
  
  Please refer to the sample link below for reference:

  https://codesandbox.io/s/lively-wave-1f52j

  Regards,
  
  Ashwin

• 

  raphael.silva

  • Post Options:
  • Link
    Copy

  Posted 4 November 2020, 12:43 pm EST

  Hi ashwin.saxena

  This format sent by you work it when grid have all columns but i need that make reload with columns “visible = false”.
  
  I made with your code,

  1. in the picture “pattern” the grid is in the first format
  2. “saveAllColumns” i changed the positions columns and saved.
     
     3.“restoreAllColumns” in this picture i change again but a clicked in load, and the grid return for “saveAllColumns”.
     
     With your code, runned OK.

  When i use select

  wj-list-box
  

  and saved, after clicked in reload nothing happen

  1. “saveCustomizeColumns” i selected the columns that i want save in the layout
     
     2.“restoreCustomizeColumns” in this picture i change columns and is result when i click in load, the grid does´t return for “saveCustomizeColumns”.

  In my code for work it the reload the customized columns i use the code
  
  to save

  layoutDB = this.grid.columnLayout
  

  and to reload this grid.columnLayout

  this.grid.columnLayout = layoutDB 
  

  I tried set columns after reload grid.columnLayout but without succes.
  
  This format work it but take out the celltemplate.
  
  I sent this case in the first message.

  the file .zip have a part of the my code.

• 

  raphael.silva

  • Post Options:
  • Link
    Copy

  Posted 4 November 2020, 12:44 pm EST

  .ZIP
  
  WijmoCelltamplate.zip

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 November 2020, 7:36 pm EST

  Hello Raphael,

  That is because you have not added a check for the visible property of the column. In the v-for, also add a visible property that will be updated according to the layout. You may update your code as follows:

  <wj-flex-grid-column
            v-for="col in columns"
            :col="col"
            :key="col.header"
            :binding="col.binding"
            :header="col.header"
            :width="col.width"
            :min-width="col.minwidth"
            :format="col.format"
            :align="col.align"
            :aggregate="col.aggregate"
            :cell-template="col.binding === 'ce113_cd_situac' ? template : null"
  	  :visible="col.visible"
          />
  

  Let me know if this resolves your issue.

  ~regards

• 

  raphael.silva

  • Post Options:
  • Link
    Copy

  Posted 5 November 2020, 2:46 am EST

  Wonderful!
  
  It was very simple.
  
  Sorry by my lack attention