Grid column filter placeholder

[Rykunov Alex]

Is it currently impossible (without custom template, at least) to put placeholder in the grid column filter?

[Venkatesh Ayothi Raman]

Hi Alex, 

Thanks for contacting Syncfusion support. 

We have prepared the sample based on your requirement which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/ejGrid_exporting1268507408 

In this sample, we have put place holder for each filter column by using Grid create event. This event triggers after Grid control created. Please refer to the following code example and Help document for more information, 

Code example: 

@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 

 

                } 

            } 

Help document: https://help.syncfusion.com/api/js/ejgrid#events:create 

Screenshot: 

 

If we misunderstood your query, then could you please share the more information about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Abhinay Maurya]

I want to add Placeholder for Search/Filter in ej2-angular-grids
https://stackblitz.com/edit/6w1wnu--run?embed=1&file=main.ts

I want to add Placeholder for each column of the grid.

Framework: Angular 8

[Balaji Sekar]

Hi Abhinay,  

 

Greetings from the Syncfusion support. 

 

We have validated your query with provided the information and we have achieved the placeholder binding in Search toolbar item, Filterbar using dataBound event of Grid. Please refer the below code example and sample for more information. 

 

[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; 

      }) 

    } 

  } 

 

 

 

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

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

Regards, 

Balaji Sekar