We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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


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.

Derek B

3 Replies

PS Pavithra Subramaniyam Syncfusion Team April 23, 2019 04:58 AM UTC

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

DE derekb April 23, 2019 04:53 PM UTC

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.

Derek B

PS Pavithra Subramaniyam Syncfusion Team April 24, 2019 05:21 AM UTC

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

Live Chat Icon For mobile
Up arrow icon