I want to give color in placeHolder with a class

[RakhiS]

Hi,

<ejs-autocomplete #ddlChallanType #purchaseType placeholder='Choose challan type*' showPopupButton="true"</ejs-autocomplete>

I want to apply color in placeHolder by using class, can you help me out in this? Is it possible?

[Berly Christopher]

Hi RakhiS, 

  

Greetings from Syncfusion support. 

  

We can change the placeholder with help of changing the webkit-input-placeholder color as mentioned in the below code example. 

  

::-webkit-input-placeholder { 

  /* Chrome/Opera/Safari */ 

  color: pink !important; 

} 

 

  

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

  

Regards, 

Berly B.C 

[RakhiS]

Hi,

Thanks for your reply. I want to apply color using self created class. As I want to show placeholder in Grey color and * in red color.

Please help me out

[Berly Christopher]

Hi RakhiS, 

  

We could not make the placeholder text as grey color and * as red colour with help of own class. We can achieve the requested requirement with help of assigning the floatLabelType and ngClass as mentioned below. 

  

[app.component.html] 

<ejs-autocomplete #ddlChallanType #purchaseType floatLabelType="Always" [fields]="localFields" 

[ngClass]="{ 'asterix' : enableAsterix }" placeholder=" Choose challan type 

" showPopupButton="true" 

[dataSource]="countries"> 

</ejs-autocomplete> 

 

[app.component.css] 

.asterix label.e-label-top::after { 

  content: "*"; 

  color: red; 

} 

 

  

We have prepared the sample and attached it below. 

Sample Link: https://stackblitz.com/edit/angular-ic9s5h-pmdxky?file=app.component.html  

  

Regards, 

Berly B.C 

[RakhiS]

Thanks it worked.Is there anyway I can give the same class in the ejs-grid ecolumn headerText.So that when the dialog opens on clicking the "Add" button in grid, I can show the e-columns with the red which are required for the entry

[Berly Christopher]

Hi RakhiS, 

To achieve your requirement we suggest you to use the actionComplete event of EJ2 Grid. The actionComplete event will be triggered when the form dialog is created and in this event We have append the created span element to the input label element.  

Please find the below Code example and sample for your reference,  

 

Code example :  

App.component.html  

<ejs-grid [dataSource]="data" allowPaging="true" [pageSettings]="pageSettings" [editSettings]="editSettings" [toolbar]="toolbar" (actionComplete)="actionComplete($event)" >  

…………………  

</ejs-grid>  

 

App.component.ts  

actionComplete(args) {  

    if (args.requestType === "add") {  

      var span = document.createElement("span");  

      span.innerText = "*";  

      span.style.color = "red";  

      args.form[1].parentElement.querySelector("label").append(span);  

    }  

  }  

 

Sample : https://stackblitz.com/edit/angular-a1vct3?file=app.component.ts  

Documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete  

Regards, 

Berly B.C