Hi,
I have 2 columns namely 'Status' and 'Progress'. Whenever 'Progress' column is 100 then 'Status' column should be 'Completed'. i.e.
If(columnProgress == '0') Then columnStatus == 'Completed' else ....
Kindly assist.
Regards
Charles
Hi Charles,
From your query, we understood that you want to change the “Status” field value while changing the “Progress” while editing. If yes, you can achieve your requirement by adding the “change” event to the NumericTextBox inside the “edit.params” property. Please refer to the below code example, documentation, and sample link for more information.
public edit: any = { params: { change: (e) => { if (e.value == 100) { // here you can change the condition (this.grid.editModule.formObj.element.querySelector('#' + this.grid.element.id + 'Status') as HTMLInputElement).value = 'Completed'; } }, }, };
|
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#customize-editors-using-params
Sample : https://stackblitz.com/edit/angular-1f6xhs?file=app.component.html,app.component.ts
Regards,
Pavithra S
Hi Pavithra,
Thank you for the solution. The change was successful but it does not update to the database. In the solution you had provided the 'Status' column is a TextBox property, but in my project it is a DropDownList which is not updating after the change was made.
component.ts
html
Kindly assist.
Regards
Charles
You can change the DropDownList value by setting the “text” property inside the “change” event. Please refer to the below code example and documentation link for more information.
change: (e) => { (this.grid.editModule.formObj.element.querySelector( '#' + this.grid.element.id + 'Status') as any).ej2_instances[0].text = e.value == 100 ? 'Completed' : 'Pending'; },
|
Sample: https://stackblitz.com/edit/angular-9ysquf?file=app.component.ts
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Hi Pavithra,
The solution work fine. Thank you.
I have another question similiar to the recent one on this post. I have two columns namely 'Start date' and 'Status'. For instance today's date is 21st November and l enter 25th November in 'Start date' column. So when it is 25th November l want the 'Status' column to change from Inactive to Active in the 'Status' column on grid loading automatic without editing any column. In other words, as soon as the grid is loaded the 'Status' column should automatically display 'Active' when the Start Date is due. Kindly assist
Regards
charles
You can achieve your requirement by using the “valueAccessor” property which provides an option to display a custom value based on your requirement. Please refer to the below code example, documentation and sample link for more information.
<e-column field="Status" headerText="Status" [valueAccessor]="statusFormatter" [edit]="segmentParams" width="100">
|
public statusFormatter = (field: string, data: object, column: object) => { return new Date() > data['StartDate'] ? 'Inactive' : 'Active'; };
|
Documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns/columns/#valueaccessor
Sample : https://stackblitz.com/edit/angular-qqy2px?file=app.component.ts
Hi Pavithra,
Thank you very much for all your solutions. Using the codes l posted on this page ( on 21/11/2022) each time l add a new row or modified the 'Start Date' column it's always show the previous date. For instance if l enter today's date as 22/11/2022 and update, it would display 21/11/2022 after the grid is loaded. Kindly assist.
Regards
Charles
We have tried to reproduce the issue "Date column is showing the previous date" at our end but it is working fine in our sample. Please find the sample below.
https://stackblitz.com/edit/angular-qqy2px?file=app.component.ts,app.component.html
So please share the below details which will be helpful for us to provide a better solution as early as possible.
Hi Pavithra,
Below is my working sample
https://stackblitz.com/edit/angular-qqy2px-lfzjkk?file=app.component.ts,app.component.html
Whenever l save any date value in both 'Start Date' and 'Due date' after l refresh the grid they would both display a previous date. For example if l save in 'Start Date' column 28th November 2022 it would save exact, but when l reload the grid l get 27th November 2022 instead of 28th November 2022. The data type is date. Kindly assist
Regards
Charles
Hi Charles,
We have tried the sample you have shared but the Url provided in the Grid dataSource is not working. Please refer to the below screenshot for more information.
|
So could you please share a runnable sample with a working URL with the reported issue which will be helpful for validating the issue?