Is it possible to Add a placeholder in Grid Popup's Add action

Is it possible to add a placeholder in Grid Poppup in only 

1. Add action 
2. Few columns (Address column )  as shown in screen shot below. 





1 Reply

DR Dhivya Rajendran Syncfusion Team January 8, 2020 09:05 AM UTC

Hi Billing, 

Thanks for contacting us. 

Query: Is it possible to add a placeholder in Grid Poppup in only  

Yes. Is it possible to add a placeholder in Grid Popup in only.  If you are using Dialog editing, you can add the placeholder, like the below example 

App.component.html 

 <ejs-grid [dataSource]='data' allowPaging='true' (actionComplete)='actionComplete($event)' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
  <e-columns> 
            <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> 
. ..  
        </e-columns> 
 
    </ejs-grid> 
 
App.component.ts 
. . . 
    public ngOnInit(): void { 
        this.data = orderDetails; 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }; 
. ..  
    } 
 
    actionComplete (e) { 
if (e.requestType === 'add') { 
  e.form.elements.namedItem('CustomerName').placeholder = 'Enter the Customer Name'; 
} 
    } 
} 
 

Screenshot:  

 


If you are using Dialog template(EditSettingsTemplate

App.component.html 

<div class="control-section"> 
    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'  
(actionComplete)='actionComplete($event)'> 
        <ng-template #editSettingsTemplate let-data> 
             . . . 
                <div class="form-row"> 
                    <div class="form-group col-md-12"> 
                        <div class="e-float-input e-control-wrapper"> 
                            <textarea formControlName="ShipAddress" placeholder="Address should be in city/locality format"  id="ShipAddress" name="ShipAddress" type="text"></textarea> 
                            <span class="e-float-line"></span> 
. . . 
        </ng-template> 
    </ejs-grid> 
</div> 
 

Screenshot:  

 


Please let us know, if you need further assistance. 

Regards, 
R.Dhivya 


Loader.
Up arrow icon