Enable / disable fields on grid editing in 'Dialog' mode

[Walter Konnerth]

Hi,

I have a grid in which the editing is Dialog mode.

I have a NumericTextBox in which I am changing the value.

The code would be:

this.quantityEdit = {

create: () => {

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

return this.quantityEditElem;

},

destroy: () => {

this.quantityEditObj.destroy();

},

read: () => {

return this.quantityEditObj.value;

},

write: (args) => {

this.quantityEditObj = new NumericTextBox({

floatLabelType: 'Auto',

placeholder: "Cantitate",

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

enabled: true,

// sets number of decimal places to be allowed by the NumericTextBox

decimals: 0,

// sets number with 0 numbers of decimal places format

format: 'n0',

change: function (e) {

if (!e.event) {

return;

}

var editform = e.event.srcElement.closest(".e-gridform").ej2_instances[0];

var batch_detail_batch = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "batch_detail_batch")[0];

if (e.value > 0) { // add new batch w/ expiration date

if (batch_detail_batch) {

batch_detail_batch.enabled = false; // not working

}

}

else {

if (batch_detail_batch) {

batch_detail_batch.enabled = true; // not working

}

}

}.bind(this),

});

this.quantityEditObj.appendTo(this.quantityEditElem);

}

};

Based on the change event and the entered value, I would like to enable / disable other fields of the grid (e.g. the batch_detail_batch field).

Or, to hide / show other fileds based on entered value ...

How could I achieve this?

Thanks,

[Rajapandiyan Settu]

Hi Walter, 

 

Thanks for contacting Syncfusion Support.  

 

Query: Based on the change event and the entered value, I would like to enable / disable other fields of the grid 

 

We have analyzed your query at our end. By further validation, we found that you didn’t get the element instances to change the enabled property in it. You can achieve your requirement by using below code example. 

 

Your Code: 

 

var batch_detail_batch = [].slice 

            .call(editform.inputElements) 

            .filter(x => x.getAttribute("name") === "batch_detail_batch")[0]; 

 

          ----- 

  batch_detail_batch.enabled = false; // not working 

 

 

Modified Code: 

  

          // get the input element using name attribute and tagname 

          var batch_detail_batch1 = [].slice 

            .call(editform.inputElements) 

            .filter( x => x.getAttribute("name") === "CustomerName" &&x.tagName === "INPUT")[0];  

 

            // get the instances of element 

            batch_detail_batch1.ej2_instances[0].enabled = false;  

 

 

We have prepared a sample for your reference you can get it from the below link. 

 

Sample: https://stackblitz.com/edit/react-hans6c-dq826r?file=index.js  

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S

[Walter Konnerth]

Hi,

Thanks for the example! It works OK!

In my scenario I have a child grid in which I need the functionality and it's not working.

The error is that ej2_instances does not exist.

The updated code is:

this.quantityEdit = {

create: () => {

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

return this.quantityEditElem;

},

destroy: () => {

this.quantityEditObj.destroy();

},

read: () => {

return this.quantityEditObj.value;

},

write: (args) => {

this.quantityEditObj = new NumericTextBox({

floatLabelType: 'Auto',

placeholder: "Cantitate",

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

enabled: false,

// sets number of decimal places to be allowed by the NumericTextBox

decimals: 0,

// sets number with 0 numbers of decimal places format

format: 'n0',

change: function (e) {

if (!e.event) {

return;

}

var editform = e.event.srcElement.closest(".e-gridform").ej2_instances[0];

var batch_detail_batch1 = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "batch_detail_batch"

&& x.tagName === "INPUT"

)[0];

var batch_detail_expiration_date1 = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "batch_detail_expiration_date")[0];

var detail_batch_detail_batch1 = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "detail_batch_detail_batch"

&& x.tagName === "INPUT"

)[0];

var detail_batch_detail_expiration_date1 = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "detail_batch_detail_expiration_date")[0];

if (e.value > 0) { // add new batch w/ expiration date

if (batch_detail_batch1) {

// not working because batch_detail_batch1 is undefined

batch_detail_batch1.ej2_instances[0].enabled = false;

}

if (batch_detail_expiration_date1) {

batch_detail_expiration_date1.ej2_instances[0].enabled = false; // works OK

}

if (detail_batch_detail_batch1 && detail_batch_detail_batch1.ej2_instances) {

// not working because detail_batch_detail_batch1.ej2_instances is undefined

detail_batch_detail_batch1.ej2_instances[0].enabled = true;

}

if (detail_batch_detail_expiration_date1) {

detail_batch_detail_expiration_date1.ej2_instances[0].enabled = true; // works OK

}

}

else {

if (batch_detail_batch1) {

// not working because batch_detail_batch1 is undefined

batch_detail_batch1.ej2_instances[0].enabled = true;

}

if (batch_detail_expiration_date1) {

batch_detail_expiration_date1.ej2_instances[0].enabled = true; // works OK

}

if (detail_batch_detail_batch1 && detail_batch_detail_batch1.ej2_instances) {

// not working because detail_batch_detail_batch1.ej2_instances is undefined

detail_batch_detail_batch1.ej2_instances[0].enabled = false;

}

if (detail_batch_detail_expiration_date1) {

detail_batch_detail_expiration_date1.ej2_instances[0].enabled = false; // works OK

}

}

}.bind(this),

});

this.quantityEditObj.appendTo(this.quantityEditElem);

            }

};

A part of code for the child grid is:

this.childStockCorrectionDetailsGrid = {

dataSource: this.dataSourceStockCorrectionDetails,

queryString: 'stock_correction_id',

proxy: this,

columns: [

{

field: 'id', headerText: 'Stock Correction Details ID', textAlign: 'Right', width: 75,

isPrimaryKey: true,

isIdentity: true,

visible: false

},

{ field: 'stock_correction_id', headerText: 'StockCorrection ID', textAlign: 'Right', width: 75, visible: false },

{

field: 'product_name', headerText: 'Produs', width: 100,

editType: 'dropdownedit',

clipMode: 'EllipsisWithTooltip',

edit: this.products,

validationRules: this.providerRules,

textAlign: 'Center'

},

{

field: 'quantity', headerText: 'Cantitate', width: 120, validationRules: this.priceRules,

edit: this.quantityEdit,

textAlign: 'Center'

},

{

field: 'batch_detail_batch', headerText: 'Lot (din stoc)', width: 100, edit: this.batches,

textAlign: 'Center'

},

{

field: 'batch_detail_expiration_date', headerText: 'Data expirare (din stoc)', width: 100,

format: this.customDateFormat,

type: 'date',

edit: this.datepickerOrderDate,

editType: 'dateedit',

textAlign: 'Center',

clipMode: 'EllipsisWithTooltip',

allowEditing: true,

floatLabelType: 'Auto',

// defaultValue: new Date(),

},

...

Can you please give me a hint?

[Rajapandiyan Settu]

Hi Walter, 

 

Thanks for your update.  

 

Query: In my scenario I have a child grid in which I need the functionality and it's not working. 

The error is that ej2_instances does not exist. 

 

Before proceeding with your requirement, we would like to share some information on this issue. 

 

• The ej2_instances property only works with Syncfusion components. It is used to create the instance of Syncfusion EJ2 components.

 

 

 

• Executing ej2_instances with the undefined element returns below error.

 

                

 

So, please ensure the batch_detail_batch1  and detail_batch_detail_batch1   returns the expected element in your code. 

 

If you are Syncfusion control and facing the same issue, please share the below information to validate further. 

 

1. You have used edit template for the batch_detail_batch column. So, share the full code of this.batches.
2. Share the detail_batch_detail_batch column details. If you using edit template for this column, share that code too.
3. Ensure the name attribute properly bind in your edit template component.
4. If possible, share the simple issue reproducible sample with us.

 

Regards, 

Rajapandiyan S

[Walter Konnerth]

Hi,

the batches code is:

this.batches = {

create: () => {

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

return this.batchElem;

},

destroy: () => {

this.batchObj.destroy();

},

read: () => {

return this.batchObj.text;

},

write: (args) => {

var index = undefined;

var query = new Query();

var isEnabled = false;

if (args.rowData.batch_detail_batch) {

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

if (this.state.batches[i].batch === args.rowData.batch_detail_batch) {

index = i;

isEnabled = true;

query = new Query().where('product_id', 'equal', this.state.batches[i].product_id);

break;

}

}

}

this.batchObj = new DropDownList({

dataSource: new DataManager(this.state.batches),

enabled: isEnabled, //false,

fields: { value: 'id', text: 'batch' },

floatLabelType: 'Auto',

placeholder: 'Selecteaza lotul',

allowFiltering: true,

query: query, //new Query(),

actionComplete: () => false,

index: index

});

this.batchObj.appendTo(this.batchElem);

},

}

var batch_detail_batch1 = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "batch_detail_batch"

// && x.tagName === "INPUT"

)[0];

and the response on console.log for batch_detail_batch1 is:

<select aria-hidden="true" tabindex="-1" class="e-ddl-hidden" name="batch_detail_batch" id="child1_grid018batch_detail_batch_hidden"></select>

where ej2_instances is null.

[Rajapandiyan Settu]

Hi Walter, 

 

Thanks for your update.  

 

We have analyzed your query at our end. By default, the EJ2 Dropdown control contains two inputElements 

 

1. Select element.
2. Input element.

 

Refer to the below screenshot. 

 

 

 

So, creating ej2_instances on select element returns undefined. We suggested you get the input element of EJ2 dropdown to create the ej2_instances. You can achieve this by using the condition tagName == “INPUT” in your code. Refer to the below code example and screenshot. 

 

           

          var batch_detail_batch1 = [].slice.call(editform.inputElements).filter( 

              x => 

                x.getAttribute("name") === "ShipCountry" && 

                x.tagName === "INPUT" // use that condition to get the dropdown input element 

            )[0]; 

         console.log("batch_detail_batch1"); 

          console.log(batch_detail_batch1); 

 

 

 

Screenshot: 

 

 

 

You can also directly get the dropdown input element by using its id. Find the below code example. 

 

 

          // get the grid id from its instances 

          var gridinsid = this.grid.element.id; 

          // get the grid is from editform element 

          var gridid = editform.element.id.split("EditForm")[0]; 

          // get dropdown input element by using its id 

          var batch_detail_batch1 = editform.element.querySelector( "#" + gridid + "ShipCountry");  // “#” + grid element id + field name 

 

 

Now you can create the ej2_instances on EJ2 dropdown’s input element. 

 

   

        if (e.value % 2 == 1) { 

            // get the instances of element 

            batch_detail_batch1.ej2_instances[0].enabled = false; 

          } else { 

            batch_detail_batch1.ej2_instances[0].enabled = true; 

          } 

 

 

Find the below sample for your reference. 

 

Sample: https://stackblitz.com/edit/react-hans6c-3fpptj?file=index.js  

 

Still, if you face the same issue, please share the simple issue reproducible sample which will be very helpful for us. 

 

Regards, 

Rajapandiyan S 

[Walter Konnerth]

Hi,

Thanks for the exmaple, it's working well!

I face another issue: I have a simple text input field and I can not get the ej2_instance for it.

I tried both approaches but ej2_instance is always undefined.

Below my code:

... {

field: 'obs', headerText: 'Obs', width: 100, validationRules: this.optionalTextRules,

textAlign: 'Center'

}

 

and trying to get the instance:

var editform = e.event.srcElement.closest(".e-gridform").ej2_instances[0];

var gridid = editform.element.id.split("EditForm")[0];

var obs = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "obs"

&& x.tagName == "INPUT"

)[0];

console.log('obs',obs.ej2_instances); // undefined

var obs1 = editform.element.querySelector("#" + gridid + "obs");

console.log('obs1',obs1.ej2_instances); // undefined

Can you please help me?

Thanks,

[Rajapandiyan Settu]

Hi Walter, 

 

We are glad that you have resolved your requirement 

 

Query: I face another issue: I have a simple text input field and I cannot get the ej2_instance for it. 

I tried both approaches but ej2_instance is always undefined. 

 

By default, the EJS-Textbox control is used to edit the column when no editType/editTemplate defined in the column. 

 

We have prepared a sample based on your requirement and the last provided solution is working fine at our end. Find the below sample and screenshot for your reference. 

 

Sample: https://stackblitz.com/edit/react-hans6c-mbjheu?file=index.js  

 

Screenshot #1:  EJS Textbox control inside the editform 

 

 

Screenshot #2: Get the input element using its name and id attributes 

 

 

Still, if you face the same issue, please share the simple issue reproducible sample which will be very helpful for us. 

 

Regards, 

Rajapandiyan S 

[Walter Konnerth]

Thanks, this did the trick!

[Rajapandiyan Settu]

Hi Walter, 

 

We are glad that you have resolved your requirement 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S