Attaching onChange Event to TextEditor Model

I’m attempting to attach an onChanage event handler to a TextEditor for an MVC Model item but I’m not having any luck. Here’s the code fragment

<label for=”carrierEditor”>Carrier: </label>
@(Html.Infragistics().TextEditorFor(m => m.Carrier)
.ID(“carrierEditor”)
.PlaceHolder(“Carrier”)
.ValidatorOptions(options => options
.OnBlur(false)
.OnChange(false)
.OnSubmit(true)
.Required(true))
.AddClientEvent(“igtexteditorvaluechanged”, “function(evt, ui){ $(‘#tbsCarrier’).innerHTML = ui.value; }”)
.Render())
@(Html.ValidationMessageFor(m => m.Carrier))

This throws a javascript error in the Chrome developer tools.

I have another DOM element that I’m trying to update when the value changed event fires.

<td align=”left”><div id=”tbsCarrier”></div></td>

I tried using this:

<div class=”group-fields inline”>
<label for=”carrierEditor”>Carrier: </label>
@(Html.Infragistics().TextEditorFor(m => m.Carrier)
.ID(“carrierEditor”)
.PlaceHolder(“Carrier”)
.ClientEvents(new Dictionary<string, string>(){{ “igtexteditorvaluechanged”, “UpdateControl(this, ‘#tbsCarrier’)” }})
.ValidatorOptions(options => options
.OnBlur(false)
.OnChange(false)
.OnSubmit(true)
.Required(true))
.Render())
@(Html.ValidationMessageFor(m => m.Carrier))
</div>

That doesn’t give me a JavaScript error, but it doesn’t do anything either

I’ve tried using this script block on the page:

<script type=”text/javascript”>
$(function () {
$(“#carrierEditor”).on(“igtexteditorvaluechanged”, function (evt, ui) {
$(“#tbsCarrier”).innerHTML = ui.value;
});

$(“#contactEditor”).on(“igtexteditorvaluechanged”, function(evt, ui){
$(“#tbsCarrierContact”).innerHTML = ui.value;
});
})
function UpdateControl(controller, target) {
$(target).innerHTML = controller.value()
}
</script>

But that has no effect.

What am I missing?  There doesn’t seem to be a good example that I could find.

Any help would be appreciated,

Ken

Hello, 

In case you want to attach to one of the editor’s events, you can do this via the EditorClientEvents class where all of these are listed. Additionally, you can pass the event handler function by name and specify the function itself in the script tag. For example: 

                        @(Html.Infragistics().TextEditorFor(m => m.Customers.FirstOrDefault().Name)
                         .ID("textEditor1")
                         .AddClientEvent(EditorClientEvents.ValueChanged, "toggleReadonly")
                         .Render()
                        ) 

            <script>
                        function toggleReadonly(evt, ui) {
                                    $("#textEditor1").igTextEditor("option", "readOnly", true); 
                                    $("#textEditor2").igTextEditor("option", "readOnly", true); 
                        }
            </script> 

What is more, when using the MVC wrappers, you can attach to the valueChanged event using the following syntaxes as well:

                        @(Html.Infragistics().TextEditorFor(m => m.Customers.FirstOrDefault().Name)
                         .ID("textEditor2")
                         .AddClientEvent("valueChanged", "toggleReadonly")
                         .Render()
                        )

Note: For the first parameter of the AddClientEvent method, do not confuse the option name of the event for the string used when binding with the jQuery event API, e.g. on, delegate, and live. The string that should be entered as the argument for the AddClientEvent method is the name of the option used to configure the event when instantiating with the jQuery UI widget in JavaScript. 

I believe you will find the following topic helping you get better understanding of using the MVC wrapper, as more details are shared:
http://www.igniteui.com/help/defining-events-with-aspnet-helper