Change event is not being invoked (not only ddl event, 'on keyup' is not working in textboxes too))

[Nishant Balami]

Hello there again,

I am using Syncfusion's Grid for MVC and inline form editing. Here, I have a dropdownlist named 'Business Address' as one of my elements in inline form editing.

I have filled the dropdownlist value using jsrender for loop like this:

<select id="listOfAddresses" name="listAddress" class="form-control-row">
     {{for listAddress }}
     <option value="{{:Address}}" data-state="{{:State}}" data-city="{{:City}}">{{:Address}}</option>
     {{/for}}
</select>

My requirement is, on 'Change' event of the dropdown, I need to update values of 'City' and 'State' elements which are next to the dropdownlist. Tried quite a few things for this. But the 'change' event never gets called!

$('#listOfAddresses').change(function () {
        alert('change');
    });
----------------------------------------------------
$('#listOfAddresses').on('change', function () {
        alert('change');
    });
----------------------------------------------------
$("select#listOfAddresses.form-control-row.valid").on('change', function () {
        alert('change');
    });
----------------------------------------------------
$(document).on('change', '#listOfAddresses', function () {
        alert('change');
    });
----------------------------------------------------
$(document.body).on('change', '#listOfAddresses', function () {
        alert('change');
    });
----------------------------------------------------

Here, change/ on('change', function(){ }) EVENT NEVER GETS INVOKED until I manually copy the code and paste it in the firebug console. How would you write a jquery function for one of the elements in inline editing form? This should be easy but it's not working. Help needed.

[Prasanna Kumar Viswanathan]

Hi Nishant, 

Thanks for contacting Syncfusion support. 

To bind the change event for the dropdown, use the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

    ----------------------------------- 

   .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#template"); }) 

    .AllowPaging() 

    ---------------------------------------- 

    ------------------------------------- 

  ) 

 

<script type="text/javascript"> 

 function dropdown(args) { 

        $("#ShipCity").val("Lyon"); 

        $("#EmployeeID").ejDropDownList("setSelectedValue", 7);     

    } 

</script> 

<script id="template" type="text/template"> 

    <b>Order Details</b> 

    <table cellspacing="10"> 

        ------------------------------------ 

           <td style="text-align: right;"> 

                Ship Country 

            </td> 

            <td style="text-align: left"> 

                <select id="ShipCountry" name="ShipCountry" onchange="dropdown()"> 

                    <option value="Argentina">Argentina</option> 

                    <option value="Austria">Austria</option> 

                    <option value="Belgium">Belgium</option> 

                    <option value="Brazil">Brazil</option> 

                    <option value="Canada">Canada</option> 

 

                </select> 

            </td> 

        </tr> 

         

            ------------------------- 

   </table> 

</script> 

In the change event of dropDown we update the values for “ShipCity” and “EmployeeID”  using jQuery val method and setSelectedValue method of ejDropDown. 

Find the code example:  

function dropdown(args) { 

        $("#ShipCity").val("Lyon"); 

        $("#EmployeeID").ejDropDownList("setSelectedValue", 7); 

   } 

Sample: http://www.syncfusion.com/downloads/support/forum/129666/ze/Sample1458621864826056 

Note: In above sample we have binded ejDropDownList for the EmployeeID column. So, we have used setSelectedValue method of ejDropDownList.  

Regards, 

Prasanna Kumar N.S.V