1. Home
  2. Forum
  3. React - EJ 2
  4. Enable / disable fields on grid editing in 'Dialog' mode

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

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,

9 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team December 31, 2020 10:10 AM UTC

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. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

WK Walter Konnerth January 4, 2021 09:37 AM UTC

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?

RS Rajapandiyan Settu Syncfusion Team January 5, 2021 02:02 PM UTC

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

WK Walter Konnerth January 14, 2021 09:00 AM UTC

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.

RS Rajapandiyan Settu Syncfusion Team January 15, 2021 10:26 AM UTC

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. 
 
 
Still, if you face the same issue, please share the simple issue reproducible sample which will be very helpful for us. 
 
Regards, 
Rajapandiyan S 


Marked as answer
WK Walter Konnerth January 18, 2021 06:45 AM UTC

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,

RS Rajapandiyan Settu Syncfusion Team January 20, 2021 10:43 AM UTC

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


WK Walter Konnerth January 21, 2021 12:18 PM UTC

Thanks, this did the trick!

RS Rajapandiyan Settu Syncfusion Team January 22, 2021 03:25 AM UTC

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 


Loader.
Up arrow icon