@Grid
<ej-grid #grid [dataSource]="gridData" [allowPaging]="true" [allowFiltering]="true" [toolbarSettings.toolbarItems]="['add', 'edit', 'delete','cancel','update']" [toolbarSettings.showToolbar]="true" (toolbarClick)="selectColumn($event)" (create)="create($event)" >
<e-columns>
. . .
</e-columns>
</ej-grid>
@create event
export class AppComponent {
//Create event
create(args:any){
var length = $(".e-filtertext").length;
for( var i=0;i<length;i++){
var placeholderVal = args.model.columns[i].field +" "+"Value"; //placeholder text (for demonstration purpose we have used the corresponding column field name as placeholder)
$(".e-filtertext").eq(i).attr("placeholder",placeholderVal); //Set the placeholder for each filter column
}
} |
[app.component.ts]
dataBound() {
if (this.isInitial) {
// Set the placeholder to Search toolbar item
var search = this.grid.element.querySelector(".e-toolbar-items .e-input");
if (search.getAttribute("type") == "search") {
search.placeholder = "Search a value"
}
// Set the placeholder in all the column’s filterbar
var filterbar = this.grid.element.querySelector(".e-filterbar").children;
[].slice.call(filterbar).forEach((item) => {
var field = item.querySelector("input.e-input").id.split("_")[0];
item.querySelector("input.e-input").placeholder = "Enter the " + field;
})
}
}
|