Populate read only fields on select of a value from drop down list

[Sanjay]

    @{

        var entityLookupDM = new Syncfusion.EJ2.DataManager { Url = "ProductList", Adaptor = "UrlAdaptor" };

        var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList()

        {

            Query = "new ej.data.Query().addParams('ej2-grid','true')",

            AllowFiltering = true,

            Change = "saleItemCodeChanged",

            Id = "saleItemCodeDropDown",

            DataSource = entityLookupDM

        };

    }

    <script>

        function saleItemCodeChanged(args) {

           

            if (typeof args != 'undefined') {

                data = args.itemData;

                if (typeof data != 'undefined') {

                    var itemDescription = data.ItemDescription;

                    var onHand = data.OnHand;

                    var rrp = data.RRP;

                    var saleGrid = document.getElementById('saleGrid');

                    if (typeof saleGrid != 'undefined') {

                    }

                }

            }

        }

    </script>

    <div class="form-row">

        <ejs-grid id="saleGrid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="200">

            <e-data-manager url="/Sale/GetOrder/@Model.SalesOrderNumber" updateUrl="/Sale/UpdateOrder/" insertUrl="/Sale/NewOrder" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager>

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top"></e-grid-editSettings>

            <e-grid-pagesettings pageCount="10"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="SalesItemListNumber" isPrimaryKey="true" headerText="Item" validationRules="@(new { required=true, number=true})" width="30" allowEditing="false"></e-grid-column>

                <e-grid-column field="ItemCode" headerText="Code" ejs-for="ItemCode" validationRules="@(new { required=true})" editType="dropdownedit"

                                edit="@(new {@params = DropDownList})" width="250"></e-grid-column>

                <e-grid-column  field="Description"  headerText="Description"  textAlign="Right"width="140" allowEditing="false"></e-grid-column>

                <e-grid-column field="Quantity" headerText="Quantity" ejs-for="Quantity" width="30" allowEditing="false"></e-grid-column>

                <e-grid-column field="RRP" headerText="Unit Price" width="160" ejs-for="UnitPrice" allowEditing="false"></e-grid-column>

                <e-grid-column field="Discount" headerText="Disc" format="C2" editType="numericedit" width="150"></e-grid-column>

                <e-grid-column field="Tax" headerText="Tax"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

When adding a new row, empty row is presented with a drop down list. On selecting a value from drop down list, want 3 read only fields to be updated. How do Iachieve this?

Thanks

Sanjay

[Pavithra Subramaniyam]

Hi Sanjay, 

 

Greeting from Syncfusion support. 

 

You can achieve your requirement by setting the value to the input elements present in the editfom inside the change event of DropDownList component. 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]; 

                    grid.element.querySelector("#"+grid.element.id+"EmployeeID").value = 10; 

                    grid.element.querySelector("#" + grid.element.id +"CustomerID").value = "Updated"; 

                    grid.element.querySelector("#" + grid.element.id +"ShipCity").value = "Updated"; 

 

                } 

            } 

 

        } 

 

 

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

 

Regards, 

Pavithra S. 

[Sanjay]

Hi

Thank you very much. This is working like a magic. Now I have another question.

I have 2 other fields in the grid that are calculated based on another field during Add operation. I have tried using the event celledit="updateTotalPrice" but with no luck.

The event is not been fired during a record add operation.

Thank you

Sanjay

[derekb]

Hi Pavithra,

Would you mind kindly linking to documentation that describes the Javascript in the dropdown handler?

For example, where would we find how to do this?

grid.element.querySelector("#"+grid.element.id+"EmployeeID").value

Thanks,

Derek B

[Pavithra Subramaniyam]

Hi derekb, 

Query#1: I have 2 other fields in the grid that are calculated based on another field during Add operation. I have tried using the event celledit="updateTotalPrice" but with no luck. The event is not been fired during a record add operation. 

 

Could you please confirm that you have used Normal editing mode or Batch editing mode. Because cellEdit event will trigger only in batch editing mode. And you can update the required columns  inside change event of the component just like DropDownList component. If you still faced the issue could you please share the following details. 

1. Share the complete Grid code.
2. Share a detailed description of your exact requirement

Query#2: Would you mind kindly linking to documentation that describes the Javascript in the dropdown handler?  

 

We have logged a documentation task regarding your requirement and it will be refreshed in any of our upcoming release. Please find the below documentation links for handling DropDown actions. 

Documentation link: https://ej2.syncfusion.com/documentation/grid/edit/?no-cache=1#cell-edit-type-and-its-params 

                                     https://ej2.syncfusion.com/documentation/api/drop-down-list/ 

Regards, 

Pavithra S. 

 

[Sanjay]

Hi Pavithra,

I was using Normal mode. You suggestion  of using change event is working.

Thank you very much for your help.

Kind regards

Sanjay

[Pavithra Subramaniyam]

Hi Sanjay,  

Thanks for your update. 

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.