Alternate row color.

[John Chen]

I see in document sample that it is very easy to alternate grid row color with below style.

But it seems have no effect for my grid. What could I be wrong?

    <ejs-grid ref="grid" height=450

      :dataSource="boundaryList" 

      :allowSorting="true"

      :allowFiltering="true"

      :enableVirtualization=true

    >

    <e-columns>

        <e-column field="BoundaryId" headerText="ID" textAlign="Center" width="90"></e-column>

        <e-column field="BoundaryName" headerText="Name" width="120"></e-column>

        <e-column field="BoundaryNameEn" headerText="Name (EN)" width="120"></e-column>

      </e-columns>

    </ejs-grid>

<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
  .e-grid .e-altrow {
    background-color: #fafafa;
  }
</style>

[Thiyagu Subramani]

Hi John, 

Thanks for contacting Syncfusion support. 

Based on your query you need to apply the color for the row with an external style. We checked in our sample with your code example and in our sample it is working fine at our end. 

Please refer to the below code and sample. 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      . . . . . 

      :allowSorting="true" 

      :allowFiltering="true" 

      :enableVirtualization="true" 

    > 

      <e-columns> 

        . . . . . 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Freeze, 

  Edit, 

  Toolbar, 

  Filter, 

  Sort, 

  VirtualScroll 

} from "@syncfusion/ej2-vue-grids"; 

. . . . 

export default { 

  data() { 

    return { 

      data: gridData, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 

    }; 

  }, 

  provide: { 

    grid: [Freeze, Edit, Filter, Toolbar, Sort, VirtualScroll] 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

.e-grid .e-altrow { 

  background-color: red; 

} 

</style> 

Sample link : https://codesandbox.io/s/vue-template-xomwu 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S