I'm running into some inconsistencies when I use the MVC Helpers to generate my IG controls, as opposed to when I create them in jQuery:
1. When generated through the MVC Helper, none of the IG control's client-side functionality works. For example, if I use the below code in my MVC View...
@Html.Infragistics().CurrencyEditor("test2").Render()
...then enter "45" into the control in my browser...
...and then I try to access the text property in my js file...
var myText = $('#test2').igCurrencyEditor('text')
...myText is a Jquery object, not "45" like you'd expect.
However, if I instantiate the igCurrencyEditor in my js file...
(In MVC View)
<input id="test" />
(In js File)
$('#test').igCurrencyEditor();
var myText = $('#test').igCurrencyEditor('text')
myText is "45", as expected.
2.. The controls generate different html when you instantiate them through MVC or in JS. For example, if I use the below code in my MVC View...
...this is generated:
<input id="test2" style="display: inline-block; text-align: right; " class="ui-igedit-field ui-igedit ui-state-default ui-widget ui-corner-all">
<input name="test2" type="hidden" value="">
Alternatively, if I render in the browser...
(In js file)
<input id="test" style="display: inline-block; text-align: right; " class="ui-igedit-field ui-igedit ui-state-default ui-widget ui-corner-all">
When generated from the MVC Helper, an extra input is rendered. Why is this? Is this related to to question 1? Am I doing this all wrong?
In short, how do I use an MVC Helper, but still have access to the client-side methods, events, and properties of the ig objects?
Hi JoshNoe,
When you are using MVC helpers to instantiate any of the ig editors, it renders igEditor widgets with specific type. That's why you can't access any option, method, or in example bind to any of the events on the client, using $("selector").ig<editortype>Editor("ig<editortype>editor<eventname>", eventHandler). You have all the functionality when you use igEditor to access/modify these options.
In your case:
var myText = $('#test2').igEditor('text'), should work fine.
Here is a link on a topic how to Configure Editors at Runtime
Hope that helps.
Thanks,
Thanks Todor! This works perfectly.
However, I don't see any documentation on this? Even the link you sent me doesn't show any indication that you should use "igEditor" instead of the more specific types when using MVC. If there's some place I can go to see more MVC-specific information like this regarding these controls, please let me know.
Hi Josh,
The "extended" editors like igMaskEditor, igDatePicker, etc. are nothing more, but wrappers of igEditor, which only set the type option of igEditor and do not provide any extra features.They were designed for simplicity, when application is not interested in special options and prefers to use a specific editor with defaults.
The MVC wrappers for extended editors use base class igEditor. That allows single rendering logic for all editors and improves maintance. Various public samples show examples with widgets created by MVC-editors in BLOCKED SCRIPT process client events, set special options not supported by server, etc. All those samples use igEditor, but not igCurrencyEditor, igDatePicker, etc.
Though igEditor is base class for igCurrencyEditor, etc. the nature of widget does not allow to use "typecast" or similar operation in getters/setters for options, methods and events: every widget is considered to be unique.Application may apply "typecast" only to actual widget-object. Something like below.
$('#currency1').igCurrencyEditor();$('#currency2').igEditor({ type: 'currency' });$('#datePicker1').igDatePicker();$('#datePicker2').igEditor({ type: 3, button: 'dropdown' });
var c1 = $('#currency1').data('igCurrencyEditor');var c2 = $('#currency2').data('igEditor');var d1 = $('#datePicker1').data('igDatePicker');var d2 = $('#datePicker2').data('igEditor');c1.value(123.45);c2.value(123.45);d1.value(new Date());d2.value(new Date());
Viktor Snezhko"] The MVC wrappers for extended editors use base class igEditor. That allows single rendering logic for all editors and improves maintance. Various public samples show examples with widgets created by MVC-editors in BLOCKED SCRIPT process client events, set special options not supported by server, etc. All those samples use igEditor, but not igCurrencyEditor, igDatePicker, etc.
Where are these examples? Where is the MVC documentation?
You may try following:
Infragistics.com->Products->jQueryControls->SamplesBrowser->Editors->FeaturesList->Visual->CurrencyEditorOptions->CodeView->CurrencyEditorOptions.asxp
You should see statements similar to
$('#currencyEditor').igEditor('option', 'currencyDecimalSeparator', separator);
The Mvc documentation contains server methods and properties. Access to javascript objects generated by Mvc helpers is possible, but I am not sure if similar is documented.Public samples show some examples with advanced functionality like setters and events, but similar requires knowledge of jquery and widgets and beyond scope of server.
To work with custom javascript, the best approach for an application is to look at html generated by Mvc page and start from there. It will allow to check how widget is created, which actual jquery options it has and when and how to attach possible client events and getters/setters.
The majority of the samples at https://es.infragistics.com/products/ignite-ui have MVC Views in both ASPX and CSHTML Razor. Use the dropdown to select which file by the code viewer. In addition, here are a couple of help links that are helpful when using igEditors with ASP.NET MVC:
https://www.igniteui.com/help/configuring-igeditors-at-runtime
https://www.igniteui.com/help/using-events-in-netadvantage-for-jquery
https://www.igniteui.com/help/configuring-asp.net-mvc-validation
Thanks. You should move all support-based stuff like this to "support", instead of "products" and you might want to consider creating an MVC section if you think you have enough MVC customers to justify it. I would have never found this example. Just my thoughts.