We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize cell styles in grid is not in effect

Thread ID:

Created:

Updated:

Platform:

Replies:

142615 Feb 12,2019 12:28 PM UTC Feb 18,2019 05:33 AM UTC Vue 3
loading
Tags: Data Grid
Jzy
Asked On February 13, 2019 07:01 AM UTC

Hi,

I am trying to customize cell styles by following the example given in https://ej2.syncfusion.com/vue/documentation/grid/cell/#customize-cell-styles.


computed:{
      ...mapState({
        case_list: state => state.caseList.case_list
      }),
    },
created() {
      this.$store.dispatch('getCaseList', {id: this.$route.params.suite_id, level: 1})
    },
methods: {
      customiseCell: function(args) {
        if (args.column.field === 'case_valid') {
          console.log(args)
          if (args.data['case_valid'] === 1) {
            args.cell.classList.add('valid');
          }
          else if (args.data['case_valid'] === 0) {
            args.cell.classList.add('not-valid');
          }
        }
      }
    }



After the data is populated in grid, I can see the class of the case_valid column has valid or not-valid (shown as class="e-rowcell valid" or class="e-rowcell not-valid"), but the css style is not in effect. And the console output from console.log(args) is pointing to the cell of the last column of each row.

I wrote one sample: https://codesandbox.io/s/8np6rr2819

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 14, 2019 11:41 AM UTC

Hi Jzy, 

Greetings from Syncfusion. 

We have analyzed the sample which you have shared with us. We could see that you have used “scoped” attribute for the style tag. If we remove this scoped attribute, and add !important for the styles, then style is applied fine in Grid, please refer the sample link below, 

Scoped style is applied to the elements in its initialization stage hence scoped style will not be applied for dynamically created elements and some of the columns and rows are created dynamically in Syncfusion Vue EJ2 Grid component. Please refer the official statement form Vue team in below link.  
  

We could use a custom class for the container element and use nested selectors for styling the raw HTML (Dynamically rendered elements) as a workaround for this.   
  
Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Jzy
Replied On February 18, 2019 01:59 AM UTC

Hi Thavasianand,

Thank you so much for your help, it does work.

Thanks,
Jzy

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 18, 2019 05:33 AM UTC

Hi Jzy, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.                         


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;