I noticed that the value changed events are not firing for the editor controls. For example the ignumericeditorvalueChanged as stated in your documentation does not fire. However if you change it to valueChanged it does fire. See the numeric-editor-mvc example below to try this behaviour:
@using Infragistics.Web.Mvc<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title></title> <!-- Ignite UI Required Combined CSS Files --> <link href="@Url.Content("~/igniteui/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" /> <link href="@Url.Content("~/igniteui/css/structure/infragistics.css")" rel="stylesheet" /> <script src="@Url.Content("~/js/modernizr.min.js")"></script> <script src="@Url.Content("~/js/jquery.min.js")"></script> <script src="@Url.Content("~/js/jquery-ui.min.js")"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="@Url.Content("~/igniteui/js/infragistics.core.js")"></script> <script src="@Url.Content("~/igniteui/js/infragistics.lob.js")"></script> </head><body> <style> #container { width: 100%; min-width: 900px; max-width: 900px; display:inline-block; } #ValuesContainer { top: 0px; right: 0px; height: 500px; width: 300px; padding-top: 15px; float:right; font-size: 18px; } #ValuesContainer.p { font-size:16px; } #igEditorsContainer { top: 0px; left: 0px; height: 500px; width: 450px; padding-top: 15px; float:left; } </style><div id="container"> <div id="igEditorsContainer"> <form id="form"> <div class="divHeight"> @(Html.Infragistics().TextEditor() .ID("productName") .InputName("Product Name") .PlaceHolder("Product Name") .ClientEvents(new Dictionary<string, string>() { { "igtexteditorvalueChanged", "productChanged(evt,ui);" } }) .Render())</div> <div class="divHeight">@(Html.Infragistics().NumericEditor() .ID("orderedUnits") .InputName("Ordered Units") .PlaceHolder("Ordered Units") .DataMode(NumericEditorDataMode.Int) .ButtonType(TextEditorButtonType.Spin) .SpinDelta(2) .MinValue(0) .MaxValue(100) .SpinWrapAround(false) .ClientEvents(new Dictionary<string, string>() { { "ignumericeditorvalueChanged", "unitsChanged(evt,ui);" } }) .Render())</div> <div class="divHeight">@(Html.Infragistics().NumericEditor() .ID("unitsInStock") .InputName("Units In Stock") .PlaceHolder("Units in Stock") .Disabled(true) .Value(9) .Render())</div> <div class="divHeight">@(Html.Infragistics().NumericEditor() .ID("unitPrice") .InputName("Unit Price") .PlaceHolder("Unit Price") .MinDecimals(5) .MaxDecimals(6) .Value(1.75000) .Render())</div> <div class="divHeight"> @(Html.Infragistics().CurrencyEditor() .ID("unitPriceCurrency") .InputName("Unit Price Currency") .PlaceHolder("Unit Price with Currency") .DecimalSeparator(',') .GroupSeparator(' ') .MinDecimals(5) .MaxDecimals(6) .Value(1.75000) .ClientEvents(new Dictionary<string, string>() { { "igcurrencyeditorvalueChanged", "priceChanged(evt,ui);" } }) .Render()) </div> <div class="divHeight">@(Html.Infragistics().NumericEditor() .ID("oldPrice") .PlaceHolder("Old Price") .InputName("Old Price") .ReadOnly(true) .DecimalSeparator(',') .GroupSeparator(' ') .Value("13515,54") .Render())</div> <div class="divHeight"> @(Html.Infragistics().PercentEditor() .ID("avrPrice") .PlaceHolder("Average Price") .InputName("Average Price") .ReadOnly(true) .DecimalSeparator(',') .GroupSeparator(' ') .DisplayFactor(1) .Value("800,54") .Render()) </div> <div class="divHeight"> @(Html.Infragistics().NumericEditor() .ID("dueInDays") .InputName("Due In Days") .PlaceHolder("Due In Days") .ButtonType(TextEditorButtonType.Clear) .Value(0) .AllowNullValue(true) .Render())</div> <div class="divHeight">@(Html.Infragistics().NumericEditor() .ID("discount") .InputName("Discount") .PlaceHolder("Discount") .ListItems(new List<object>() { 1.5, 2.7, 3.6, 5.7}) .Render())</div> <div class="divHeight">@(Html.Infragistics().NumericEditor() .ID("negativePattern") .InputName("Negative Pattern") .PlaceHolder("Negative Pattern") .NegativePattern("(n)") .Render())</div> <input type="submit" id="submitBtn" value="Submit"/></div> </form> <div id="ValuesContainer"> <h3>Submitted Values:</h3> <div class="divHeight"> <p class="pStyle" id="results"></p> </div> </div> </div> <script type="text/javascript"> $("#form").submit(function (event) { var submittedValues = $("#form").serializeArray(); $(".p").remove(); $("#results").append("<p class='p'>Product Name: " + submittedValues[0].value + "</p>"); $("#results").append("<p class='p'>Ordered Units: " + submittedValues[1].value + "</p>"); $("#results").append("<p class='p'>Unit Price: " + submittedValues[2].value + "</p>"); $("#results").append("<p class='p'>Unit Price with Currency: " + submittedValues[3].value + "</p>"); $("#results").append("<p class='p'>Old Price: " + submittedValues[4].value + "</p>"); $("#results").append("<p class='p'>Average Price: " + submittedValues[5].value + "</p>"); $("#results").append("<p class='p'>Due In Days: " + submittedValues[6].value + "</p>"); $("#results").append("<p class='p'>Discount: " + submittedValues[7].value + "</p>"); $("#results").append("<p class='p'>Negative Pattern: " + submittedValues[8].value + "</p>"); return false; }); function unitsChanged(evt, ui) { alert('Units changed'); } function priceChanged(evt, ui) { alert('Price changed'); } function productChanged(evt, ui) { alert('Product changed'); } </script></body></html>
Hello,
What you are using is the string that is specifically intended for binding with the jQuery event API. Instead, you should be using the option name of the event. For more information please see the Note section at the end of the following documentation:
http://www.igniteui.com/help/defining-events-with-aspnet-helper
When wiring up the event handlers you can simply use the event names from the list in the API documentation:
http://www.igniteui.com/help/api/2015.1/ui.iggrid#events
This is why valueChanged works for you, as that is an example of the expected behavior for wiring up the events. Please let me know if you have any questions or concerns about this approach.