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

Editing grid data in template, using ejDropDownList - setting onChange and setSelectedValue

Thanks for the assistance;

I have a grid my users will need to edit, and there is a lot of data to look at, if they do edit, one field is a hazardous material flag that is a Yes/No dropdown, that controls if additional fields are displayed.
If it is a new entry;  we are good this works: "$("#HazardStr").ejDropDownList({ width: '75px', onChange: 'haz_Change' });"
If a existing  value is is chosen (90% of the time), onChange stops working, I found this example but the script will not fire my script:
      "$("#HazardStr").ejDropDownList({ width: '75px', onChange: 'haz_Change' }).ejDropDownList("setSelectedValue", args.row.children().eq(20).text());"

I have attached an example based on a demo of ejGrid

Attachment: Grid_705a087c.zip

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 30, 2015 10:56 AM UTC

Hi Bruce,

The cause of the problem is that you have given onChange property for ejDropDownList in the provided code example and sample. But there is no such property available with the ejDropDownList. Refer to the following screenshot of your code.

We suspect that you are looking for the change event of the ejDropDownList. Please refer to the below code example for the change event of Grid.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">


        <ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">

        <ClientSideEvents ActionComplete="complete" />


                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />

                      . . . . .. .


            <EditSettings AllowEditing="True" EditMode="dialogtemplate" DialogEditorTemplateID="#template"></EditSettings>



    <script type="text/javascript">

        function complete(args) {

                   .  . . .. .

                if (args.requestType == "beginedit") {

                    $("#OrderID").attr("disabled", "disabled");

                    $("#ShipCity").ejDropDownList({ width: '116px', change: "_Change" }).ejDropDownList("setSelectedValue", args.row.children().eq(5).text());



                    $("#ShipCity").ejDropDownList({ width: '116px', change: "_Change" });



        function _Change(args) {

             . . . . .



Please refer to the following Help Documents for different events of ejGrid and ejDropDownList.



We have also modified your sample that can be downloaded from the following location.

Sample: https://www.syncfusion.com/downloads/support/forum/121553/ze/Grid_705a087c551748582

Seeni Sakthi Kumar S.

BS Bruce Stevenson December 30, 2015 02:25 PM UTC

Thanks for the quick responce and clarification on the events associated with ejDropDownList.  I made the change and it now ires correctly.

just so others don't male my second mistake in the function change (looking at the grid data rather than the Drop Down data)
function _Change(args) {
            //var resp = document.getElementById('ShipCity').value;
            var resp = args.selectedText;  //*** dropdownList new selected item.
            var myClasses = document.querySelectorAll('.ship'), i = 0, l = myClasses.length;
            for (i; i < l; i++) {
                if (resp == 'Tsawassen')
                    myClasses[i].style.visibility = 'visible';
                    myClasses[i].style.visibility = 'collapse';

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 31, 2015 04:23 AM UTC

Hi Bruce,

We are happy to hear that your issue has been resolved.

Get back to us if you need further assistance.


Seeni Sakthi Kumar S.

Live Chat Icon For mobile
Up arrow icon