Field in add/edit dialog is being reset when focusing the input.

[derekb]

Hello,

I am trying to set read-only inputs in the add/edit dialog when a user selects a drop-down value. I accomplished this by binding the "change" handler to the drop-down list, and executing the following code:

    function itemDropDownHandler(args) {
        var grid = $("#@gridId")[0].ej2_instances[0];
        var price = grid.editModule.formObj.element.querySelector("#@(gridId)Price");
        price.value = args.itemData.Price;
    }

The field is set correctly after selecting a drop-down value. However, after clicking on the Price field, the Price value gets reset to what it was before.

Thanks,

Derek B

[Pavithra Subramaniyam]

Hi Derek, 

 

Thanks for contacting Syncfusion support. 

 

If you want to programmatically update the textbox value you can just change the text box value. But is it is a Essential JavaScript 2 controls like NumericTextBox, DropDownList etc. you need to get the instance of that component and change the value like below. Please refer to the below code example for more information. 

 

[index.cshtml] 

function saleItemCodeChanged(args) { 

            if (typeof args != 'undefined') { 

                data = args.itemData; 

 

                if (typeof data != 'undefined') { 

                    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

                     

// for update EJ2 NumericTextBox component value 

grid.editModule.formObj.element.querySelector("#"+ grid.element.id + "EmployeeID").ej2_instances[0].value = 10; 

// for update simple TextBox value 

 

                    grid.editModule.formObj.element.querySelector("#" + grid.element.id + "OrderID").value = 1000; 

                    .  .  . 

 

                } 

            }  

        } 

 

 

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

 

Regards, 

Pavithra S. 

 

[derekb]

Hi Pavithra,

Thank you very much, it is working now.

Is there a link to documentation describing the Javascript side of things? I've been looking at the ASP.NET Core docs, but I haven't seen anything about JS, such as ej2_instances.

Thanks,

Derek B

[Pavithra Subramaniyam]

Hi Derek, 

 

Thanks for your update. 

 

We have already logged a documentation task for programmatically updating the read only columns based on other column value and it will be available in any of our upcoming releases. However you can refer the below documentation for some customization the Essential JavaScript 2 NumericTextBox component  in JavaScript.  

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/how-to/restrict-decimal-points-while-grid-editing/ 

 

Regards, 

Pavithra S.