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

Setting values in add/edit dialog via Javascript causes "This field is required" message to pop up, until the input is selected.


I am setting fields in the add/edit dialog via Javascript, whenever a user selects a drop-down value.

Here is the Javascript drop-down event handler:

    function itemDropDownHandler(args) {
        var grid = $("#@gridId")[0].ej2_instances[0];
        var form = grid.editModule.formObj.element;

        var price = form.querySelector("#@(gridId)@(nameof(InvoiceItemViewModel.Price))");
        var markdown = form.querySelector("#@(gridId)@(nameof(InvoiceItemViewModel.Markdown))");

        price.value = args.itemData.@nameof(InvoiceItemViewModel.Price);
        markdown.value = args.itemData.@nameof(InvoiceItemViewModel.Price);

Here is what happens when trying to save the form:

If I manually click on Price and Markdown, then the save is successful, but I obviously don't want to force the user to do this.

Derek B

1 Reply

HJ Hariharan J V Syncfusion Team April 23, 2019 11:54 AM UTC

Hi Derek, 
Thanks for contacting Syncfusion support. 
We suggest you to change values from the numeric textbox component instance, not directly from the html element. Please refer the below code snippets. 
var allControls = form.querySelectorAll('.e-control') //form - current edit form element 
//all controls - selecting all controls inside form 
allControls[0].ej2_instances[0].value=3; // change value from numeric textbox instance, here 0  is numeric textbox element 

Live Chat Icon For mobile
Up arrow icon