selected Dropdown list data not updated in ejs-grid

[Narsimsetty Chalamaiah]

HI Team,

i am trying to implement dropdown list inside grid, and i  am facing some issue in ejs-grid for dropdown list.

I used below code in my application ,

I can able to get dropdown list data in my application,

But 

If  I change data in dropdown in side grid then i am not getting updated data in rowSelected event 

please find attached file and below code .

<ejs-grid [dataSource]='data' (rowSelected)='rowSelected($event)'>

      <e-columns>

        <e-column type='checkbox' width='50' [customAttributes]='customAttributes'></e-column>

        <e-column field='DefaultCard' headerText="Default" width="150" [customAttributes]='customAttributes'>

          <ng-template let-data #template>

            <ejs-dropdownlist id="DefaultCard" name="DefaultCard" [dataSource]="customerIDDistinctData"

                              [fields]="fields" value={{data.DefaultCard}} popupHeight="300px">

            </ejs-dropdownlist>

          </ng-template>

        </e-column>

        <e-column field='UnencryptedCardNo' headerText='Card Number' textAlign='Right' width=90 [customAttributes]='customAttributes'></e-column>

        <e-column field='CardType' headerText='Type' textAlign='Right' width=90 [customAttributes]='customAttributes'></e-column>

        <e-column field='ExpiryDate' headerText='ExpiryDate' textAlign='Right' width=90 [customAttributes]='customAttributes'></e-column>

        <e-column field='InvestmentCode' headerText='Investment Code' textAlign='Right' width=90 [customAttributes]='customAttributes'></e-column>

        <e-column field='ManualCharges' headerText='Manual Charges' textAlign='Right' width=90 [customAttributes]='customAttributes'></e-column>

        <e-column field='Status' headerText='Status' textAlign='Right' width=90 [customAttributes]='customAttributes'></e-column>

      </e-columns>

    </ejs-grid>

rowSelected(RowSelectEventArgs) {

    debugger;

    let data = RowSelectEventArgs.data;

    

  }

Thanks & Regards

Chalamaiah N

Attachment: dropdownlist_in_ejs_grid_5790e0de.zip

[Narsimsetty Chalamaiah]

please send code asap.

[Vignesh Sivagnanam]

Hi Narsimsetty 

Greetings From Syncfusion support 

Based on your query you need to get changed data in the rowSelected event. We checked your code example and found that you have render the dropdown using the columnTemplate feature. 

By default in EJ2 Grid, the value change in the dropdown rendered using the Column Template is not reflected to the dataSource. So, we need to update the value of the cell to the grid dynamically in the Dropdown change event using the setCellValue method. 

You can achieve your requirement using the below Code, 

Code Example :  

<e-column field="ShipCountry" headerText="Ship Country" width="150"> 

        <ng-template let-data #template> 

          <ejs-dropdownlist 

            id="DefaultCard" 

            name="DefaultCard" 

            [dataSource]="shipCountryDistinctData" 

            [fields]="{text: 'ShipCountry', value: 'ShipCountry' }" 

            value="{{data.ShipCountry}}" 

            (change)="change($event)" 

            popupHeight="300px" 

          > 

          </ejs-dropdownlist> 

        </ng-template> 

      </e-column> 

………………………………….. 

change(e) { 

    this.grid.setCellValue(this.key, "ShipCountry", e.value); 

  } 

Sample : https://stackblitz.com/edit/angular-uzl2br-nepkqa?file=app.component.ts 

API Doc : https://ej2.syncfusion.com/angular/documentation/api/grid/#setcellvalue 

Regards 

Vignesh Sivagnanam 

[Narsimsetty Chalamaiah]

Hi Team,

i am getting below issue. when i change dropdown value.

core.js:7187 ERROR TypeError: Cannot read property 'replace' of undefined

    at getValue (ej2-base.es2015.js:59)

    at ej2-grids.es2015.js:14321

    at Array.filter ()

    at GridComponent.setCellValue (ej2-grids.es2015.js:14321)

    at EpayComponent.change (epay.component.ts:203)

    at Object.eval [as handleEvent] (EpayComponent.ngfactory.js:468)

    at Object.handleEvent (core.js:34789)

    at Object.handleEvent (core.js:35570)

    at dispatchEvent (core.js:22533)

    at core.js:24430

 

       

         

            id="DefaultCard"

            name="DefaultCard"

            [dataSource]="customerIDDistinctData"

            [fields]="{text: 'DefaultCard', value: 'DefaultCard' }"

            value="{{data.DefaultCard}}"

            (change)="change($event)"

            popupHeight="300px"

          >

         

       

     

change(e) {

 

    this.grid.setCellValue(this.key, "DefaultCard", e.value);

  } 

Attachment: Dropdown_list_in_ejsgrid_4e1bcd3a.zip

[Vignesh Sivagnanam]

Hi Narsimsetty 

Thanks for the update 

Based on your query we found that you have faced script error while updating the grid column value.  

We checked your grid code example and found that you have not enable the isPrimaryKey property for any one of the columns. By default in EJ2 Grid we need to enable the isPrimaryKey property for the column which contains unique value to perform the CRUD operation.  

In below sample the this.Key is the value of the primaryKey column and we acquire the primaryKey value in the rowSelected event. 

Please refer the below Code Example for your reference, 

Code Example : 

<e-columns> 

<e-column field="OrderID" headerText="Order ID" width="120" isPrimaryKey="true" textAlign="Right"></e-column> 

……………………….. 

App.component.ts 

rowSelected(args) { 

    this.key = args.data.OrderID; 

  } 

  change(e) { 

    this.grid.setCellValue(this.key, "ShipCountry", e.value); 

  } 

Regards 

Vignesh Sivagnanam 

[Narsimsetty Chalamaiah]

Hi Team,

you can please setup call . for dropdown list inside grid

i used below code 

 this.data = [

      {

        CardHolderName: "",

        CardNumber: "5258",

        CardType: "Visa",

        DefaultCard: "No",

        ExpiryDate: "04/2016",

        InvestmentCode: "HCLCUSSDT",

        ManualCharges: "0.00",

        SequenceNumber: 1,

        Status: "Active",

        UnencryptedCardNo: "5258",

        ePayClientMerCode: "HCSHUC0007",

        ePayProfileId: "10062"

      },

      {

        CardHolderName: "",

        CardNumber: "3771",

        CardType: "Amex",

        DefaultCard: "Yes",

        ExpiryDate: "11/2023",

        InvestmentCode: "HCCSUSSDT",

        ManualCharges: "0.00",

        SequenceNumber: 4,

        Status: "Active",

        UnencryptedCardNo: "3771",

        ePayClientMerCode: "HCSHUC0007",

        ePayProfileId: "65413"

      }

    ]

    this.customerIDDistinctData = DataUtil.distinct(

      this.data,

      "DefaultCard",

      true

    );     

 rowSelected(args) {

    debugger;

    let data = args.data;

    console.log(data);

    this.key = args.data.ePayProfileId;

}

 change(e) {

    debugger;

    this.grid.setCellValue(this.key, "DefaultCard", e.value);

  } 

html:-

  <ejs-grid #grid [dataSource]="data" height="350" (rowSelected)="rowSelected($event)">

      <e-columns>

       

        <e-column field="DefaultCard" headerText="Ship Country" width="150">

          <ng-template let-data #template>

            <ejs-dropdownlist [dataSource]="customerIDDistinctData"

                              [fields]="{text: 'DefaultCard', value: 'DefaultCard' }" value="{{data.DefaultCard}}"

                              (change)="change($event)" popupHeight="300px">

            </ejs-dropdownlist>

          </ng-template>

        </e-column>

      </e-columns>

    </ejs-grid>

i got below issue.

ERROR TypeError: Cannot read property 'replace' of undefined

    at getValue (vendor.js:204335)

    at vendor.js:278211

    at Array.filter (<anonymous>)

    at GridComponent.setCellValue (vendor.js:278211)

    at EpayComponent.change (main.js:15053)

    at Object.eval [as handleEvent] (ng:///CustomerDetailsModule/EpayComponent.ngfactory.js:467)

    at Object.handleEvent (vendor.js:102057)

    at Object.handleEvent (vendor.js:102838)

    at dispatchEvent (vendor.js:89801)

    at vendor.js:91698

[Narsimsetty Chalamaiah]

Hi Team,

Thank you. it is working fine

[Narsimsetty Chalamaiah]

please send code for textbox like dropdown.

[Vignesh Sivagnanam]

Hi Narsimsetty 

Thanks for the update 

Based on your query we found that you want to update the textbox data to the column value. You can update the value from the Textbox using the Blur event of the EJ2 Textbox. The blur event is triggered when the Textbox loss the focus in column. 

<e-column field="ShipCountry" headerText="Ship Country" width="150"> 

        <ng-template let-data #template> 

          <ejs-textbox value="{{data.ShipCountry}}" (blur)='change($event)'></ejs-textbox> 

        </ng-template> 

      </e-column> 

………………………………………………. 

rowSelected(args) { 

    let data = args.data; 

    console.log(data); 

    let f = this.grid.getPrimaryKeyFieldNames(); 

    this.key = args.data[f]; 

  } 

  change(e) { 

    this.grid.setCellValue(this.key, "ShipCountry", e.value); 

  } 

Sample : https://stackblitz.com/edit/angular-uzl2br-kt9cbk?file=app.component.ts 

Documentation : https://ej2.syncfusion.com/angular/documentation/api/textbox#blur 

Regards 

Vignesh Sivagnanam