Footer styling is lost when changing columns

[Amos]

Hi

In order to style footer cells, I was told to use the dataBound event, so I did, for example:

dataBound: function() {

            var footerAggregate = this.$refs.gridObj.ej2Instances.aggregateModule.footerRenderer;

            if (footerAggregate.aggregates.aggregates["field - sum"] > 0) {

                footerAggregate.contentTable

                    .querySelector(".sumField-aggregate")

                    .closest(".e-templatecell")

                    .classList.add("valUp");

...

}

The above is working great but when the user decides to show/hide columns, a refresh is done to the data without calling the dataBound

event so the styling is lost. Which event can I use to catch the column chooser hide/show actions in order to re-style the footer?

Is there another method to achieve what I need?

Thanks

[Mohammed Farook J]

Hi Amos, 

 

Thanks for contacting Syncfusion support. 

 

We have validated the requirement and  the ‘actionComplete’ event is triggered when you pressed the OK button of the column chooser.  So we have suggest to use ‘actionComplete’ event for your requirement. Please find the code example. 

 

 

 

<template> 

    <div id="app"> 

        <ejs-grid ref='grid' :dataSource='data':actionComplete = 'actionComplete'> 

            <e-columns> 

. . . 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page,} from "@syncfusion/ej2-vue-grids"; 

import { data } from './datasource.js'; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

. . . 

    }; 

  }, 

  methods: { 

    actionComplete(args) { 

        if ((args.requestType === 'columnstate')) { 

// performing your action here 

        } 

    } 

  }, 

 

 

 

Screenshot : 

 

 

 

 

This is not meet your requirement could you please explain more details about your requirement and share the full code example of Grid rendering.  

 

Regards, 

J Mohammed Farook  

 

[Amos]

Works, thanks!

[Manivel Sellamuthu]

Hi Amos, 

Thanks for your update. 

We are happy to hear that the provided suggestion is helped. 

Regards, 

Manivel