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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

129666 Mar 27,2017 07:08 PM UTC Mar 28,2017 11:47 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Nishant Balami
Asked On March 27, 2017 07:08 PM UTC

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 [Syncfusion]
Replied On March 28, 2017 11:47 AM UTC

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


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 
 


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.

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

;