dynamic Custom style tag in column

[zeeshan]

Hi,

I trying to set 

1. set (via dialog) a column's Name, Data-Type (Text/Num/Date/Boolean/DropDownList), Default-Value (of current DataType),
2.  Minimum-Column-Width (when screen shrinked), Font-size, Font-color, Background-color, Alignment.

I already achieved  point number (1).

but I am stuck at point number (2).

is there is any   way from which I can set specific  Font-size, Font-color, Background-color, Alignment. of the column from input filed of the dialog other then set class with  customAttributes.

and remember my column are dynamically generated. 

please help me out this problem 

Thanks,

Regurd

[Mohammed Farook J]

Hi zeeshan, 

 

Thanks for contacting Syncfusion support. 

 

Query :1  already achieved  point number (1). 

 

We are happy to hear to achieve your requirement. 

 

Query 2:  I can set specific Font-size, Font-color, Background-color, Alignment. of the column from input filed of the dialog other then set class with custom Attributes. and remember my column are dynamically generated. 

 

You can set the custom style for specific cell by using ‘queryCellInfo’ and ‘headerCellInfo’ event. Please find the code example for your reference. 

 

[app.component.html] 

 

 <ejs-grid [dataSource]='data'(queryCellInfo)='queryCellInfo($event)' (headerCellInfo)='headerCellInfo($event)' allowPaging='true' [pageSettings]='pageSettings'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

. . . 

        </e-columns> 

    </ejs-grid> 

 

[app.component.ts] 

 

export class AppComponent { 

    public data: Object[]; 

    public pageSettings: Object; 

 

       // customize header-cell styles 

    headerCellInfo(args){ 

        if(args.cell.column.field == 'CustomerName'){ 

            args.node.classList.add('e-cus') 

        } 

    } 

 

    // customize cell styles 

    queryCellInfo(args){ 

        if(args.column.field == 'CustomerName'){ 

            args.cell.classList.add('e-cus') 

        } 

    } 

 

[app.component.css] 

 

.e-grid .e-rowcell.e-cus{ 

  background-color: black; 

  font-size: 15px; 

  text-align: center; 

   

} 

 

.e-grid .e-rowcell.e-cus:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd){ 

  color:#f7a4a4 ; 

} 

 

.e-grid .e-headercell.e-cus, .e-grid .e-detailheadercell{ 

  background-color: black; 

  font-size: 15px; 

   

  color: #f7a4a4 !important ; 

} 

 

.e-grid .e-headercell.e-cus .e-headercelldiv{ 

  text-align: center; 

} 

 

Please find the sample for your reference 

 

Sample : https://stackblitz.com/edit/angular-pm4fea?file=app.component.css 

 

Please let us know if you have any concerns. 

 

Regards,  

J Mohammed Farook