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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144079 Apr 17,2019 11:46 AM UTC Apr 29,2019 05:02 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: DataGrid
Sanjay
Asked On April 17, 2019 11:46 AM UTC

    @{
        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 [Syncfusion]
Replied On April 18, 2019 09:19 AM UTC

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
Replied On April 22, 2019 10:58 AM UTC

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
Replied On April 22, 2019 10:16 PM UTC

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 [Syncfusion]
Replied On April 23, 2019 10:10 AM UTC

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. 

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

Regards, 
Pavithra S. 
 


Sanjay
Replied On April 26, 2019 11:51 PM UTC

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 [Syncfusion]
Replied On April 29, 2019 05:02 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon