Change column value depending on another column value

[Charles]

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 ....  

<ejs-grid #grid [dataSource]="data" id='Grid' [toolbar]='toolbarOptions' [editSettings]='editSettings'>

        <e-columns>

            <e-column field="TaskId" headerText="Task ID" width="110" [isPrimaryKey]="true"></e-column>          

            <e-column field="Status" headerText="Status" width="120" >  </e-column>          

            <e-column field="Progress" headerText="Progress" type="number" editType="numericedit" width="120" defaultValue= '0' textAlign="center"> </e-column>                                  

        </e-columns>

    </ejs-grid>

Kindly assist.

Regards

Charles

 

[Pavithra Subramaniyam]

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

[Charles]

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

public editSettings: EditSettingsModel;

    public toolbarOptions: ToolbarItems[] | object;

    public pageSettings: Object;

    public data: DataManager;  

     

    public statusParams: IEditCell;

    public statusElem: HTMLElement;

    public statusObj: DropDownList;  

   

    @ViewChild('grid', { static: false })

    public grid: GridComponent;

   

    public edit: any = {

        params: {

          change: (e) => {

            if (e.value == 100) {

              (

                this.grid.editModule.formObj.element.querySelector(

                  '#' + this.grid.element.id + 'Status'

                ) as HTMLInputElement

              ).value = 'Completed';

            }

          },

        },

    };

    public dataManager: DataManager = new DataManager({

        url: 'Task/UrlDatasource',

        updateUrl: 'Task/Update',

        insertUrl: 'Task/Insert',

        removeUrl: 'Task/Delete',

        adaptor: new UrlAdaptor()

    });

    ngOnInit(): void {

      this.data = this.dataManager;    

      this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true, mode: 'Dialog' };

      this.pageSettings = { pageSize: 10 };    

      this.statusParams = {

        create: () => {

            this.statusElem = document.createElement('input');

            return this.statusElem;

        },

        read: () => {

            return this.statusObj.text;

        },

        destroy: () => {

            this.statusObj.destroy();

        },

        write: (args) => {

            this.statusObj = new DropDownList({

                dataSource: new DataManager({

                    url: 'api/Task',

                    adaptor: new ODataV4Adaptor(),                        

                }),

                query: new Query().take(6),

                fields: { value: 'Id', text: 'StatusName' },

                text: args.rowData[args.column.field],

                placeholder: 'Status',

                floatLabelType: 'Always',

            });

            this.statusObj.appendTo(this.statusElem);              

        },

      };    

    }

html

<div class="control-section">  

    <ejs-grid #grid [dataSource]="data" id='Grid' [toolbar]='toolbarOptions' allowResizing='true' a

    llowPaging="true" [editSettings]='editSettings' [pageSettings]="pageSettings" allowSorting="true" >

        <e-columns>

            <e-column field="TaskId" headerText="Task ID" width="110" [isPrimaryKey]="true" [visible]="false"></e-column>          

            <e-column field="Status" headerText="Status" width="120"  [edit]='statusParams' >  </e-column>            

            <e-column field="ProgressRate" headerText="Progress Rate" type="number" editType="numericedit" width="120"

             defaultValue="0" textAlign="center" [edit]="edit" ></e-column>                                

        </e-columns>

    </ejs-grid>

</div>

Kindly assist.

Regards

Charles

[Pavithra Subramaniyam]

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.

[Charles]

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

import { Component, OnInit, ViewChild } from '@angular/core';

import { EditService, PageService, ToolbarItems, CommandColumnService, CommandModel, GridComponent, EditSettingsModel, IEditCell } from '@syncfusion/ej2-angular-grids';

import { DataManager, UrlAdaptor, Query, WebApiAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';

import { DropDownListComponent, DropDownList } from '@syncfusion/ej2-angular-dropdowns';

@Component({

selector: 'app-leave',

templateUrl: './leave.component.html',

styleUrls: ['./eave.component.css']

})

export class ManageLeave2Component implements OnInit {

public emprules: Object;

public commands: CommandModel[];

public editSettings: EditSettingsModel;

public toolbar: ToolbarItems[]|object;

public pageSettings: Object;

public data: DataManager;

@ViewChild('gridleave', { static: false })

public gridleave: GridComponent;

public segmentParams: IEditCell;

public segmentElem: HTMLElement;

public segmentObj: DropDownList;

public segment: { [key: string]: Object }[] = [

{ segmentName: 'Inactive', segmentId: '1' },

{ segmentName: 'Active', segmentId: '2' },

];

public dataManager: DataManager = new DataManager({

url: 'Leavestatus/UrlDatasource',

updateUrl: 'Leavestatus/Update',

insertUrl: 'Leavestatus/Insert',

removeUrl: 'Leavestatus/Delete',

adaptor: new UrlAdaptor()

});

constructor() { }

ngOnInit() {

this.data = this.dataManager;

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true, mode: 'Dialog' };

this.toolbar = ['Add', 'Search' ];

this.commands = [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },

{ type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },

{ type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },

{ type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }];

this.pageSettings = { pageSize: 11 };

this.emprules = { required: true };

this.segmentParams = {

create: () => {

this.segmentElem = document.createElement('input');

return this.segmentElem;

},

read: () => {

return this.segmentObj.text;

},

destroy: () => {

this.segmentObj.destroy();

},

write: (args) => {

this.segmentObj = new DropDownList({

dataSource: this.segment,

fields: { value: 'Id', text: 'Status' },

text: args.rowData[args.column.field],

placeholder: 'Status',

floatLabelType: 'Always',

});

this.segmentObj.appendTo(this.segmentElem);

},

};

}

}

<div class="control-section">

<ejs-grid #grid [dataSource]="data" id='Grid' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' >

<e-columns>

<e-column headerText="Serial No" width='80' textAlign="right">e-column>

<e-column field="EmployeeName" headerText="Name" width="120" > e-column>

<e-column field="Request" headerText="Request" width="90" textAlign="center" >e-column>

<e-column field="StartDate" headerText="Start Date" width="90" [format]="{type: 'date', skeleton: 'medium'}" textAlign="center">e-column>

<e-column field='Status' headerText='Status' [edit]='segmentParams' width='100' > e-column>

e-columns>

ejs-grid>

div>

Regards

charles

[Pavithra Subramaniyam]

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

[Charles]

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

[Pavithra Subramaniyam]

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.

1. Share an issue reproducible runnable sample with a working URL in data manager.
2. Share the time difference between your server and the client
3. Share the screenshot of the "Add" and "Edit" requests from the network tab to check the date value

[Charles]

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

[Pavithra Subramaniyam]

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?