Modify cell-property and cell-value of current inline row

[Laurin S]

Hi,

how can I modify the property of a specific cell in the current inline edit row (for example allowEditing=false)?

And how can I modify/set the value of a specific cell when in inline edit mode? For example when another cell value depence on the value of another column...

I've attached a demo for better understanding.

Attachment: reactw3ktwl_7fd87b43.zip

[Joseph Christ Nithin Issack]

Hi Laurin,

  Greetings from Syncfusion support.

  Before proceeding to the solution we would like you to share the following details so that we can provide a better solution ASAP.

• Please ensure your requirement is to prevent editing for a particular row based on the data in the row?
• Please explain your requirement in detail.
• Please share the replication procedure of the issue you are facing.
• Please share a screenshot or video demo of the issue you are facing.
• Please share a simple sample if any you are using.
• Please share the Syncfusion package version you are using.

Please get back to us for further details.

Regards,

Joseph I.

[Laurin S]

Hi,

let me re-explain my question:

I want to set the value of another cell/column depending on the current input/selection of the user in a specific cell when a user is adding/editing a record (grid's edit-mode = "Inline (Normal").

As shown in the attached example, I want to automatically show the capital city in the "capital" column once the user selects a country in the "country" column.

So in simple words: I want to manually set/change the value of a cell depending on what the user enters/selects in another column (grid-edit-mode "Normal/Inline").

In addition:

I also want to change the column properties of a column or more specifically of the individual row cell, depending on what the user enters or selects in another column. A similar use case as the one before, except that this time I don't want to change the actual value, but the properties. For example: if the user selects a country for which the capital has not been defined, the property allowEditing should be set to true for the column "Capital", so that the user can enter it manually (the "Capital" column is readonly by default).

Attachment: reactw3ktwl_7fd87b43_59758c15.zip

[Rajapandi Ravi]

Hi Laurin,

Currently we are validating the query with your share information, and we will update you the details on or before 12^th July 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Laurin S]

Any news?

[Joseph Christ Nithin Issack]

Hi Laurin,

Sorry for the inconvenience caused.

Currently we are validating the query with your share information, and we will update you the details on or before 22nd July 2022. Until then we appreciate your patience

Regards,

Joseph I

[Vinitha Balasubramanian]

Hi Laurin,

Thanks for your patience.

Query : Modify cell-property and cell-value of current inline row

Based on your requirement, you want to change the value of a column based on the value updated in another column. We have prepared a sample to achieved your requirement using cellEdit template feature, in which we update the value of the “Ship City” column while we change the value of the  “Ship Country” column using the change event of the EJ2 Textbox.

Kindly refer the below code and sample for your reference.

[index.js]

countryParams = {

    create: () => {

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

      return this.countryElem;

    },

    destroy: () => {

      this.countryObj.destroy();

    },

    read: (args) => {

      return args.value;

    },

    write: (args) => {

      this.countryObj = new TextBox({

        value: args.rowData.ShipCountry,

        change: (e) => {

          var isCapitalKnown = false;

          var capital = '';

          for (let i = 0; i < this.countryData.length; i++) {

            if (this.countryData[i].countryName == e.value) {

              isCapitalKnown = true;

              capital = this.countryData[i].capital;

            }

          }

          if (isCapitalKnown) {

            this.stateObj.value = capital;

          } else {

            this.stateObj.enabled = true;

          }

        },

      });

      this.countryObj.appendTo(this.countryElem);

    },

  };

  stateParams = {

    create: () => {

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

      return this.stateElem;

    },

    destroy: () => {

      this.stateObj.destroy();

    },

    read: (args) => {

      return args.value;

    },

    write: (args) => {

      this.stateObj = new TextBox({

        value: args.rowData.ShipCity,

        enabled: false,

      });

      this.stateObj.appendTo(this.stateElem);

    },

  };

 

 

<ColumnDirective

                  field="ShipCountry"

                  headerText="Ship Country"

                  width="150"

                  edit={this.countryParams}

></ColumnDirective>

<ColumnDirective

                  field="ShipCity"

                  headerText="Ship City"

                  width="150"

                  allowEditing={false}

                  edit={this.stateParams}

></ColumnDirective>

Sample link : https://stackblitz.com/edit/react-94lwzg-hqv5jx?file=index.js,data.js

Reference link : https://ej2.syncfusion.com/react/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/

Please get back to us if you need further assistance.

Regards,

Vinitha Balasubramanian