Restore Layout dont apply CellTemplate VUE

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

  • 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
  • Replied 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
  • Replied 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.
  • Replied 4 November 2020, 12:44 pm EST

    .ZIP
    WijmoCelltamplate.zip
  • Marked as Answer

    Replied 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
  • Replied 5 November 2020, 2:46 am EST

    Wonderful!
    It was very simple.
    Sorry by my lack attention
Need extra support?

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

Learn More

Forum Channels