I'm researching Knockout.js and I'm very impressed with its capabilities. The one thing that has me stuck so far is finding a JavaScript control library that will work with it. The examples on the Knockout website seem to work only with simple HTML controls.
I would like to use much more feature rich controls like those in jQuery UI, kendo, Wijmo, or Telerik. I found KOGrid (https://github.com/ericmbarnard/KoGrid/wiki/Getting-Started) while researching this. While I certainly applaud the developer on his efforts,
I'm looking for something that is quite feature rich and more mature.
Can anyone suggest any third party control libraries (commercial or otherwise) that work well with Knockout.js?
From my understanding KendoUI is looking at adding support for Knockout JS, but it isn't in their immediate roadmap. They have stated that they will get to it though.
However, KendoUI has worked with an open source project to provide support to Knockout. Checkout Knockout-Kendo which provides knockout js bindings that allow you to use KendoUI. It actually works pretty well. http://rniemeyer.github.com/knockout-kendo/
I've used Knockout and KendoUI without knockout-kendo and I ran into a few strange situations. One being that kendo ui actually hides certain elements and replaces them with their own widget. For example the combo box, they hide the html select and display
a rich javascript based combo box. However, the bindings don't carry since the data-bind attribute is still attached to the original select. This problem however goes away if you use knockout-kendo.
Thank you for your reply, BrockAllen. Would you be able to elaborate on your point, maybe with a code snippet or a link to where I could find out more?
This is great information, Hattan and I appreciate the first hand experience you have! I'm going to leave the question open for a few days, in case anyone else wants to chime in.
Thank you for your reply, BrockAllen. Would you be able to elaborate on your point, maybe with a code snippet or a link to where I could find out more?
Well, I don't really know or use any of those libraries, but for example with MVC if I wanted to use @Html.TextBox with Knockout I'd need to do something like:
@Html.TextBox("foo", Model.Foo, new {data_bind="value:bar"})
Mvc Controls Toolkit supports knockout, and enhance it, supplying Validation, strongly typed bindings, bindings with complex controls such as
dual select box, automatic computation of most of bindings...and so on. It has a lot of helpers to help you easily enjoy knockout. For instance you may define knockout templates with Razor helpers or Views...without putting bindings there...they are automatically
computed by the Mvc CT engine. Give a look to
ClientBlocks and to the various tutorials with associated code:
Thanks very much for your detailed reply, Francesco! I really appreciate the time you spent in answering my question. You've given me a lot to think about.
I realize when I originally posed my question, I mentioned only Knockout.js and 3rd party control libraries. When I mentioned Knockout.js, I was really thinking about ASP .NET MVC 4 and the single page application (SPA) model (http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159).
This is the achitecture I'm leaning towards, so I'm thinking I probably won't make much use of the traditional ASP .NET MVC server side features.
The new version of the mvc controls toolkit has new feature just for SPA applications, and WebApi, scuh as a javascript queryable object to build query for the server from javascript, plus the possibility to import filter, sort and paging from Mvc Controls
toolkit controls.
An HttpSafeQuery wrapper to protect IQueryables from unwished query.....ando so on see here the list of new features; http://mvccontrolstoolkit.codeplex.com/
Notre_Poubel...
Member
12 Points
23 Posts
Using Knockout.js with third party control libraries
Apr 09, 2012 11:13 PM|LINK
I'm researching Knockout.js and I'm very impressed with its capabilities. The one thing that has me stuck so far is finding a JavaScript control library that will work with it. The examples on the Knockout website seem to work only with simple HTML controls.
I would like to use much more feature rich controls like those in jQuery UI, kendo, Wijmo, or Telerik. I found KOGrid (https://github.com/ericmbarnard/KoGrid/wiki/Getting-Started) while researching this. While I certainly applaud the developer on his efforts, I'm looking for something that is quite feature rich and more mature.
Can anyone suggest any third party control libraries (commercial or otherwise) that work well with Knockout.js?
BrockAllen
All-Star
27574 Points
4912 Posts
MVP
Re: Using Knockout.js with third party control libraries
Apr 09, 2012 11:23 PM|LINK
As long as those widget/control libraries allow you to attach the data-bind attribute then I don't see why you'd not be able to use them together.
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
CodeHobo
All-Star
18647 Points
2647 Posts
Re: Using Knockout.js with third party control libraries
Apr 09, 2012 11:27 PM|LINK
From my understanding KendoUI is looking at adding support for Knockout JS, but it isn't in their immediate roadmap. They have stated that they will get to it though.
However, KendoUI has worked with an open source project to provide support to Knockout. Checkout Knockout-Kendo which provides knockout js bindings that allow you to use KendoUI. It actually works pretty well.
http://rniemeyer.github.com/knockout-kendo/
Make sure you take a look at the grid example also
http://rniemeyer.github.com/knockout-kendo/web/Grid.html
I've used Knockout and KendoUI without knockout-kendo and I ran into a few strange situations. One being that kendo ui actually hides certain elements and replaces them with their own widget. For example the combo box, they hide the html select and display a rich javascript based combo box. However, the bindings don't carry since the data-bind attribute is still attached to the original select. This problem however goes away if you use knockout-kendo.
Blog | Twitter : @Hattan
Notre_Poubel...
Member
12 Points
23 Posts
Re: Using Knockout.js with third party control libraries
Apr 10, 2012 05:20 PM|LINK
Thank you for your reply, BrockAllen. Would you be able to elaborate on your point, maybe with a code snippet or a link to where I could find out more?
Notre_Poubel...
Member
12 Points
23 Posts
Re: Using Knockout.js with third party control libraries
Apr 10, 2012 05:22 PM|LINK
This is great information, Hattan and I appreciate the first hand experience you have! I'm going to leave the question open for a few days, in case anyone else wants to chime in.
BrockAllen
All-Star
27574 Points
4912 Posts
MVP
Re: Using Knockout.js with third party control libraries
Apr 10, 2012 06:00 PM|LINK
Well, I don't really know or use any of those libraries, but for example with MVC if I wanted to use @Html.TextBox with Knockout I'd need to do something like:
@Html.TextBox("foo", Model.Foo, new {data_bind="value:bar"})
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
francesco ab...
All-Star
20912 Points
3279 Posts
Re: Using Knockout.js with third party control libraries
Apr 10, 2012 09:02 PM|LINK
Mvc Controls Toolkit supports knockout, and enhance it, supplying Validation, strongly typed bindings, bindings with complex controls such as dual select box, automatic computation of most of bindings...and so on. It has a lot of helpers to help you easily enjoy knockout. For instance you may define knockout templates with Razor helpers or Views...without putting bindings there...they are automatically computed by the Mvc CT engine. Give a look to ClientBlocks and to the various tutorials with associated code:
Client Blocks Simple Example
Low BandWidth Transfers with The Client Side Templates of the Mvc Controls Toolkit
Handling Big Amounts of Data with Client-Side Templates
Handling Big Amounts of Data with Client-Side Templates 2
There you will find links to download the code of the samples
Mvc Controls Toolkit | Data Moving Plug-in Videos
Notre_Poubel...
Member
12 Points
23 Posts
Re: Using Knockout.js with third party control libraries
Apr 10, 2012 09:50 PM|LINK
Thanks very much for your detailed reply, Francesco! I really appreciate the time you spent in answering my question. You've given me a lot to think about.
I realize when I originally posed my question, I mentioned only Knockout.js and 3rd party control libraries. When I mentioned Knockout.js, I was really thinking about ASP .NET MVC 4 and the single page application (SPA) model (http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159). This is the achitecture I'm leaning towards, so I'm thinking I probably won't make much use of the traditional ASP .NET MVC server side features.
Thanks,
Notre
francesco ab...
All-Star
20912 Points
3279 Posts
Re: Using Knockout.js with third party control libraries
Apr 10, 2012 11:33 PM|LINK
The new version of the mvc controls toolkit has new feature just for SPA applications, and WebApi, scuh as a javascript queryable object to build query for the server from javascript, plus the possibility to import filter, sort and paging from Mvc Controls toolkit controls.
An HttpSafeQuery wrapper to protect IQueryables from unwished query.....ando so on see here the list of new features; http://mvccontrolstoolkit.codeplex.com/
and here a tutorial on the use of the new features:http://dotnet-programming.com/post/2012/04/03/Mvc-Controls-Toolkit-Support-to-Mvc4-WebApi.aspx
Within 7-10 days I will post an update that allows to deal with one-to-Many relations in a pretty automatic ways...all from the client side
Mvc Controls Toolkit | Data Moving Plug-in Videos
Notre_Poubel...
Member
12 Points
23 Posts
Re: Using Knockout.js with third party control libraries
Apr 11, 2012 04:54 PM|LINK
Thanks Francesco. It looks like that may be a viable option for me.