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

[Bruce Stevenson]

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

[Seeni Sakthi Kumar Seeni Raj]

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">

    <div>

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

        <ClientSideEvents ActionComplete="complete" />

            <Columns>

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

                      . . . . .. .

            </Columns>

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

        </ej:Grid>

    </div>

    <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());

                }

                else

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

            }

        }

        function _Change(args) {

             . . . . .

        }

    </script>
</asp:Content>

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

https://help.syncfusion.com/api/js/ejgrid#events

https://help.syncfusion.com/api/js/ejdropdownlist#events

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

Regards,
Seeni Sakthi Kumar S.

[Bruce Stevenson]

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';

                else

                    myClasses[i].style.visibility = 'collapse';

            }

        }

[Seeni Sakthi Kumar Seeni Raj]

Hi Bruce,

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

Get back to us if you need further assistance.

Regards,

Seeni Sakthi Kumar S.