Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Kenneth Haynes
255
Attaching onChange event to TextEditor for Model
posted

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

  • 10685
    Verified Answer
    Offline posted

    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