Disable input text but not disable calendar for a edit field inside grid

Question

Is there or can we have a way to disable the input text box but still allow the calendar to work? Currently if the input text is disabled, it disables the whole calendar, but really I just want to prevent users from typing in the date box.

this.followUpParam = { create: () => { this.followUpEle = document.createElement("input"); return this.followUpEle; }, read: () => { return this.followUpObj.value; }, destroy: () => { this.followUpObj.destroy(); }, write: (args: { rowData: any, column: Column } | any) => { this.followUpObj = new DatePicker({ value: args.rowData["followUpDate"], blur: (txtargs: FocusOutEventArgs | any) => { var ddlValue = this.usersDDLobj !== undefined ? ((this.usersDDLobj.value !== null) && (this.usersDDLobj.value !== "0") ? this.usersDDLobj.value.toString() : null) : null; this.orderService.updateUserAndReviewNotes(args.rowData.orderNumber, ddlValue, this.reviewNotesObj.element.value,this.followUpObj.value); this.userId = ddlValue; } }); this.followUpObj.appendTo(this.followUpEle); this.followUpObj.element.addEventListener('keydown', (e: KeyboardEventArgs) => { if (e.key === 'Enter' && e.which === 13) { this.followUpObj.blur.apply(this); } }); } };

Praveenkumar Gajendiran · Accepted Answer

Hi Leela,Thanks for contacting Syncfusion support.Based on your query, your requirement is to disable the input element of editor DatePicker component of Grid, for this we have achieved your requirement by using “created” event of DatePicker component as demonstrated in the below code example. Please refer the below code example and sample for more information, Code Example:

[app.component.ts]

export class AppComponent {

public elem: HTMLElement;

public datePickerObj: DatePicker;
public dpParams: IEditCell;

public ngOnInit(): void {

this.dpParams = { //cellEditTemplate

create: () => { //create function is used to create the element at time of initialization

this.elem = document.createElement("input");

return this.elem;

},

read: () => { //read function is used to read the value from component at time of save.

return this.datePickerObj.value;

},

destroy: () => { //destroy function is used to destroy the component.

this. datePickerObj.destroy();

},

write: args => { //write function is used to create custom component or assign default value at time of editing.

this.datePickerObj = new DatePicker({ //DatePicker Component

value: new Date(args.rowData[args.column.field]),

floatLabelType: 'Never',

created: created.bind(this),

});

function created(){

this.datePickerObj.inputElement.disabled = true //disable the input element of DatePicker Component

}

this.datePickerObj.appendTo(this.elem);
};

}

Unknown · Answer

Thanks alot Praveen,this worked fine for me

Please help me with one more thing here
trying to add z-index to datepicker field as calendar is going behind header bar ,which doesnt seem to work.let me know which class I should override

I could see inline styling for this element in Developers tools which cannot be overrridden

.e-datepicker,.e-calendar {
  z-index: 10001 !important;
}

Manikandan Nallathambi · Answer

Hi Leela Mounika,Thanks for the update. 
Based on your query we suspect that you want to add z-index to the datepicker component while editing the row. By default in EJ2 grid, the datepicker component is displayed like the below screenshot.  
Screenshot: 
 For your convenience we have attached the sample for your reference,Sample: https://stackblitz.com/edit/angular-mjyapv-1xwfqb?file=app.component.ts 
So please share us the below information that will be helpful to provide solution as soon as possible,  

Please explain your exact requirement in video demo or screenshot.
Please explain the purpose of using z-index to the datepicker component.
Share the Syncfusion package version.
Regards,Manikandan N

Unknown · Answer

I have a banner which is hiding the calendar for first row for smaller devices, I want datepicker to come in the front ,this is the reason why I need z-index to my calendar.

2. "@syncfusion/ej2-angular-popups":"^17.4.51"

Praveenkumar Gajendiran · Answer

Hi Leela,Thanks for your update.We checked our previous provided sample and we were unable to reproduce the reported problem/scenario at our end as the Grid with editor Date picker is displaying fine at our end. So please share us the below information that will be helpful to validate further on this,  
1)                 Complete code example. 
2)                 Did you use any custom CSS in your sample? 
3)                 Please let us known the reported Date picker component, is inside the Grid or outside the grid? 
4)                 Share us a simple sample to replicate the problem. It would be helpful to identify your problem case better so that we can check and provide the solution based on that. 
Regards,Praveenkumar G