I'm working with IgniteUI for the first time and working on putting controls on my page, and using knockout for databinding.
I followed the example from the following page: (https://www.igniteui.com/editors/bind-editors-with-ko) Please put some text outside of the code to point out that the knockout bindings only work with the additional javscript resource to include the knockout extensions. I wasted a lot of time as I overlooked that reference in the code example. You could save another customer the frustration.
Using the developer tool in chrome, I found where the error was occurring.
I structure my ViewModel like:
var Payment = function (data) {
var self = this; self.Id = ko.observable();
self.PaymentType = ko.observable(); self.CheckAmount = ko.observable(); self.PaymentDate = ko.observable();
if (data != null) self.update(data);
}
then I create a new method for my Payment View Model to update the data:
Payment.prototype.update = function (data) { this.Id(data.Id); this.CheckAmount(data.CheckAmount); this.PaymentDate(dtformat(data.PaymentDate));
This allows me to set up my bindings early, and when the data is fetched, I just use the update method to fill the view model with data.
I databound a textbox control and it worked fine this way, but when I added an igDatePicker, I got an error in the ignite/knockout extension script:
http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js
I think it occurs where value.toString() is called. Value is undefined at the point that the bindings are set up. It looks like that 'else' statement should only allow (value != undefined). FWIW, I modified my view model constructor to initialize the observables to null and is an acceptable workaround. But I think you should fix this bug nonetheless.
if(value===null&&value!==undefined){ editor.igDatePicker("value",value)}else{ value=value.toString().replace(/_(\d)/g,"$1"); parsedDate=Date.parse(value); if(value.toString().indexOf("/Date(")===0) {....
I'd also like to point out since I'm just diving into these controls that I'm quite disappointed in the themes. The controls aren't consistent. I put a textbox, a combobox, and a datepicker all on the same screen and they are all different size control heights and font sizes. It's cumbersome to get in there and figure out which css I need to override to normalize the font sizes across the controls. When you put them on a form together, they look terrible.
I'm using the ios theme and I even noticed on your example theme page (https://www.igniteui.com/themes/ios) that you are overriding the font size on the div that contains the control which seems to help some, but like I said, it's disappointing that the default styles aren't consistent.
Well, I didn't have problem with the widths. Notice I said the heights/font sizes were different in the controls. It seems the font-size in some instances can drive the height of a control though. I could be wrong about that, but when I was playing around with the styles in the Chrome Developer Tools, that appeared to be the case.
Perhaps there was something in my page (my own styling) that was overriding the ig theme. I'll try to confirm that.
Regarding the documentation, the way your site is organized. It wasn't very intuitive. I started with the first obvious page http://www.igniteui.com/
Notice that there is no obvious link to the help section (http://www.igniteui.com/help/) from the main page. It's like those are two separate sites and the one that I went to first doesn't link to the help. I'd suggest a link on the left navigation of http://www.igniteui.com/ for the Help/Official Documentation just like you have with the Samples link on that page. That's a whole different source of documentation that I wasn't aware that was available because it wasn't accessible from the main page. In fact, those help pages have way more information that would have prevented a lot of frustration on my end.
Anyway, thanks for the information.
Hello TRE,
Thank you for your feedback.I believe you will have much better experience, after referencing the appropriate resources.In general, it is best for each new to the product user to take a look at the official documentation, API docs and the available online samples, when starting to use a product for first time. This will ensure to have a good starting point, overview and what is more resources to go back to when actually developing.You will find detailed description regarding the use of Knockout with IgniteUI product at: Configuring Knockout SupportThis topic explains how to configure Ignite UI® editor controls to bind to View-Model objects using the Knockout library.The Knockout support is implemented as a Knockout extension which is invoked initially when Knockout bindings are applied to a page and during the page life when external updates to the View-Model happen.Using the left side navigation, you will find Configuring section under most widgets. For the igCombo for example the details are included under: Configuring Knockout Support (igCombo)For the igTree it will be https://www.igniteui.com/help/igtree-knockoutjs-support , etc.Regarding the styles used, I am not aware why you have experienced different font sizes as they actually the same and it is possible to check this at https://www.igniteui.com/editors/bind-editors-with-ko, or https://www.igniteui.com/editors/overview. Using the default theme all editors have font-size:1em for example. The same applies for the iOS Theme as well https://www.igniteui.com/themes/ios
In general, the editors default to width of 200px if a specific width is not explicitly set. I am not aware if there is some particular reason why the igDatePicker in this sample is initialized and rendered with width:149.$("#datePicker").igDatePicker({ width: 149 });I will further look into this matter. In order for both igCombo and igDatePicker to have the same with, I suggest explicitly add this in the initialization like $("#datePicker").igDatePicker({ width: 200 }); for example.Please notice, if width option is not set, then value of style.width of base html element will be used automatically. However, that value should be in the px units.
Additionally, when it comes to styling, it is always better to be aware of the following theming description, available in the API docs for each specific widget. This one in particular is for the igDatePicker. A short description of the used css classes will help you easily navigate when it comes to getting to know which and what styles are applied.
When it comes to the different knockouts extensions referenced, I would like to let you know there are several different knockout extension js files. These could be found under the default installation folder at: C:\Program Files (x86)\Infragistics\2014.2\Ignite UI\js\extensionsThe reason there is such separation existing, is because you may want to use just one particular widget with knockout for example, and in this case it is preferred not to reference and load all of the extensions (or one big combined knockout extension file). This separation helps reduce the client’s loading time and thus contributes for better UX. This applies for the online samples at IgniteUI as well.If you find this bugling you, I suggest referencing all of these in your application during the initial work and remove the unnecessary ones at the last moment when deploying. This will ensure you will be not experiencing unwanted exceptions regarding missing resources during the development stage.
I hope these resources will help you get a better overview. Please let me know how they work for you.
I've got to add another problem that I ran into, due to these samples.
The sample for knockout binding with igCombo (https://www.igniteui.com/combo/bind-combo-with-ko), needs to be updated. I looked at the Code View and after determining that I needed the knockout extensions included in my page (even I can't find actual documentation to do so), and it is not listed as an 'optional' resource as it should be here (https://www.igniteui.com/help/getting-started). Anyway, I copied the link for the knockout extensions from the code view and spent all day trying to figure out why it wasn't working for me.
Then I open it up in fiddler, and after seeing that it works, I slowly started replacing your sample bit by bit until it broke. Who would have thought, that it was simply because you were referencing a different knockout extension file.
Code view has this file referenced:
JsFiddle uses this:
http://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.combo.knockout-extensions.js
In the early years, I got sucked into Infragistics by chance and loved that the documentation was so thorough and I could quickly find out many ways on how to use one of your controls. There was a certain point (I think it was when the ultrawebgrid was replaced by the webdatagrid or whatever its successor was. When was that? 2009??) that the documentation was completely rewritten and has never been up-to-par. It has seem to be getting better since that release, but it's taking way too long to get there. I still think it's a great product, but I have to say if a new developer was researching controls to use for their organization, they would definitely hear about how frustrated I am with the poor documentation and that after viewing your samples, be prepared to be disappointed that the controls will not look very good without manipulation. There's no reason for them to be different sized fonts between a text box, combobox and date picker.
Sorry to gripe, but you've earned it. This is week one with the Ignite controls, and I'm not very happy. I'm sure once I've gotten past all the deception and figure out how to use everything, I'll be happy as a clam.