This is a migrated thread and some comments may be shown as answers.

Knockout and the DropdownList

24 Answers 1760 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

24 Answers, 1 is accepted

answered on 21 Nov 2011, 03:22 PM

While that may work Craig, it doesnt work if you try to manipulate the Datasource the Select box is bound to.

Example:

I have this at the top of the page:
<script type="text/javascript">
(function ($, undefined) {
$(document).ready(function () {
var serverModel = @Html.Interpret(Model); //this is my way of getting a server side mvc viewmodel to convert down to a client view model
var viewModel = work.viewModel;
viewModel.initialize(serverModel);
viewModel.bind();

$('input[type=date]').kendoDatePicker({format: 'MM/dd/yyyy'});
$('select').kendoComboBox();
$('#tabs').tabs();
});
})(jQuery);
</script>

<select data-bind="options: stateLookup, optionsText: 'Name', optionsValue: 'Id', optionsCaption: 'select one ...', value: model.Location.StateId, valueUpdate: 'change, blur'" id="Work_WorkRequestLocation_StateId" name="Work.WorkRequestLocation.StateId"></select>

<select data-bind="options: parishLookup, optionsText: 'Name', optionsValue: 'Name', optionsCaption: 'select one ...', value: model.Location.Parish, valueUpdate: 'change, blur'"id="Work_WorkRequestLocation_Parish" name="Work.WorkRequestLocation.Parish"></select>

2 Drop Downs above, with State and Parish using KnockoutJS to bind them to properties stateLookup and parishLookup respectively on the viewModel. In my view model I have an event bound to dynamically and remotely change the Parish if the state changes:

//State/Parish Lookup Select Event
$(options.stateSelector).change(function (e) {
var stateId = $(this).val();
var url = options.baseLookupUrl('GetParishes');
$.ajax({
url: url,
data: { stateId: stateId },
type: 'post',
success: function (data) {
viewModel.parishLookup.removeAll();
for (var i = 0; i < data.length - 1; ++i) {
viewModel.parishLookup.push(data[i]);
}
}
});
});

As you can see I am manipulating the parishLookup observableArray from knockout and if I do not use Kendo UI Combobox this works perfectly. However, if I use Kendo UI, and I manipulate the observable collection, Kendo Combobox doesnt change the values. My guess is that KnockoutJS is changing the now hidden Select and the Kendo ComboBox (the div setup above it) does not respect it. KnockoutJS has bound the observableArray to the Select Box. Somehow there need to be a link between when something changes in the Select Box. Somehow you will need to subscribe to the event of that and make similar changes in your Dropdown/ComboBox.

In this way a user can turn all of there select boxes to Kendo ComboBoxes/DropDowns and work with the standard Select box (through javascript) and your Kendo UI works on its own because it is subscribed to that Select and is monitoring it. Otherwise, there will need to be an additional plugin that you add for Kendo UI that allows these UI controls to work appropriately with KnockoutJS, since you would not want to add those fixes to work with it in the common kendo.all.min.js.

Thoughts? To work fully with KnockoutJS, something more needs to be done. I can only see KnockoutJS getting more and more popular, since Silverlight developers are looking for a way to utilize Html 5 and still get the rich binding they had with WPF/Silverlight. KnockoutJS is the answer for them, and they will be looking to Telerik for an easy way to do there rich controls, but not get in the way like the MVC3 controls do.

answered on 21 Nov 2011, 04:04 PM

Are you guys planning on coming up with a binding structure and MVVM type support in Kendo UI? In other words, allow us to set binding syntax using data-* attributes on html controls, and through the $(...).kendoSomeControl({binding: ''}). Is this something you guys have planned?

If not, then there will need to be alot of additionaly plugins to work with peoples favorite MVVM/MVC client side stuff. It might be simpler to just roll your own. Of course, the closer to Silverlight and simpler it is (i.e. KnockoutJS) type binding the better for me, but there is room for improvement. Or you could just partner with KnockoutJS like they do with jQuery Templates, and not re-create the wheel. I was just wondering your thoughts and direction. I have alot of Html5 applications planned for 2012, and it would be critical to know your direction on this, as this would be necessary for us to have a simple binding mechanism.

answered on 06 Dec 2011, 12:03 AM

Kendo UI Enthusiast,

I created a Kendo UI Knockout Custom binding that utilize the Kendo ComboBox: Custom Kendo ComboBox Binding (jsFiddle)

As you can see it works well, binds the datasource to the kendo combobox, respects the observable array changes, ignores invalid changes, and sets the observable selected item back and forth.

I basically took my jquery autocomplete version and changed it to work with ComboBox. Here is the dropdown knockout custom binding version.

Here is the Date Picker Custom Knockout Binding, this allows you to bind to a Date object in your viewModel without having to worry about converting to and from a string and respects the observable property from the ViewModel. <

Hopefully we can convince Telerik Devs to create a custom knockout binding version for all the Kendo UI Controls. This would make using kendo ui controls with knockout trivial and extremely simple.

answered on 11 Jan 2012, 09:44 AM

Hello,

Unfortunately as can be seen from the jsFiddle code snippets integrating with KO is not a walk in the park. It requires quite a lot of knowledge how KO works internally and some code to make things actually work I've asked for some support before and I got the same answer - we need deeper integration such as custom bindings etc. We just can't spare the required resources now having in mind that we are working on our own Kendo MVVM implementation.

In the future we will provide some Knockout integration as a separate open source project (probably hosted on github).

Regards,
Atanas Korchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 11 Jan 2012, 09:38 PM

See Atanas, this is what I dont get. Remember back before ASP.NET MVC 2 with Classic ASP.NET when Microsoft rolled there own set of Javascript Libraries that everyone had to use to use things correctly. Everyone complained, because they had to utilize there script plugins just to get things to work, plus use jQuery and they asked why cant we just use jQuery? Microsoft did a revolutionary thing, and just based a new set of plugins that worked with jQuery. Web Developers rejoiced and were happy.

What I dont get, is why dont you make a api datasource layer that allows a user to use there own MVVM plugin (or just use Knockout) since it works so incredibly well. Why do you have to re-invent the wheel when there is already something out there that is very popular and already known how to use?

If you come out with your own MVVM tool, then devs will have to utilize your MVVM Plugin with another, like Knockout, and it would be overkill. It will be only for the sake of utilizing your Html 5 Controls. Which, if you are going to make the claim that they are Html 5 Controls, they should be simple and unobtrusive to utilize with existing common plugins. They shouldn't get in the way or make you have to switch what you have been using for over 3 years just to use the controls.

I hope you guys look deeper in Knockout integration, at least from the aspect of creating a Knockout Datasource (since all controls work off of a datasource) that can 2 way bind to a ko.observable object and a ko.observableArray object. I am not looking forward to finding creative ways to try to keep all of my vast amount of plugin helpers etc with Knockout, and having to fudge in another MVVM library just to get it to respect my 2-way bindings in knockout.

answered on 12 Jan 2012, 10:07 AM

Hi Corey,

Up to your questions:

"What I dont get, is why dont you make a api datasource layer that allows a user to use there own MVVM plugin (or just use Knockout) since it works so incredibly well"

We have not yet created a KO aware DataSource because we have not yet allocated any resources for this task. This is the same as asking why feature X is not implemented. There is no simple answer - we have our priorities and can't just implement all feature requests instantly. We have established the tasks for the next release long ago and there is no way change priorities now. I believe any single software vendor works this way so this is not something new. As I said in my previous reply a KO aware DataSource will be implemented *after* our Q1 2012 release.

"Why do you have to re-invent the wheel when there is already something out there that is very popular and already known how to use?"

I don't really understand the question. We believe that there is room for improvement in existing libraries and we want to provide built-in integration with the rest of Kendo UI. As you have seen KO integration is not an easy task at all. By the way I haven't found *any* UI plugin which plays nicely with KO. I have personally tried various jQuery based plugins and none of them works with KO observables. Feel free to correct me if you have stumbled upon.

"If you come out with your own MVVM tool, then devs will have to utilize your MVVM Plugin with another, like Knockout, and it would be overkill "

Our MVVM tool will be a replacement of KnockoutJS. It will work with Kendo UI widgets and "vanilla" HTML elements. Of course we won't match every single feature of KO as this is not our goal.

"They shouldn't get in the way or make you have to switch what you have been using for over 3 years just to use the controls."

Have you used any jQuery based UI plugin successfully with KnockoutJS? If yes could you let me know which one that is? If there is such a plugin perhaps there is an easier way to integrate with KO.

Here is a summary of the KnockoutJS/Kendo integration:

The current demo has a bug caused by the DropDownList itself. This bug has been fixed already and the demo will work as expected in our next release (Q3 2011 SP1).
No Kendo UI widgets will be updated if an observableArray changes. The underlying element will be updated (the original <select> from which a DropDownList is created). Since it is not possible to get the observable to which an element is bound we need to implement a KnockoutJS-aware datasource in order to support change notifications. Since we don't want to include 3rd party integration code in the Kendo UI codebase we would release this DataSource as an open source project on github. Development will start post Q1 2012 (which is due in late March).
We are currently working on our own MVVM implementation which will provide built-in integration with all Kendo UI widgets.

Regards,
Atanas Korchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 13 Jan 2012, 12:44 PM

I have been thinking about creating a KnockoutJS library of custom bindings to support KendoUI as an open source project.

There are a few concerns I have about this.

First, after seeing a great JSFiddle of a KO custom binding for the KendoUI combo box, it's apparent it will be a lot of work. But, if it works as well as Corey's example, it would be well worth the effort.

Second, as Atanas mentioned, the Kendo team is working on their own MVVM implementation. I guess this should be evaluated once delivered in some form to determine if a custom bindings library even makes sense.

Lastly, I suspect there will be a number of changes to the KendoUI widgets and data-viz items in the coming months. As with any new offering, it could be difficult to keep up with the pace of the Kendo team's releases to make sure a KO custom bindings project remain in lock-step.

Thoughts?

answered on 13 Jan 2012, 04:23 PM

Michael,

Thanks for the comment.

I have actually created several Kendo UI Knockout Custom Bindings. I only stopped because I tackled the Grid and realized that I could not get past it without modifying or extending the Kendo Data Source. That was the road block I hit. I need the Data Source to be able to have more events than it has so that I can tie into it to report back changes in the Grid to the Knockout Observable Array. With more Events on the Knockout Data Source i could complete it.

Here are my custom Knockout Bindings so far: (you are welcome to change up and help if you are interested):

ComboBox - Custom Binding
Dropdown - Custom Binding
Numeric Text - Custom Binding
DatePicker - Custom Binding

ALPHA - Grid - Custom Binding (need more events for Kendo UI DataSource - it can do bare basics)

AutoComplete - jQuery UI - Custom Binding
Date in a Span (Readonly view of Date Fields) - Custom Binding

answered on 13 Jan 2012, 04:45 PM

Thanks Corey. That's great information. You're comment "...Custom Binding as glue to be the adapter between the two sources" is exactly the approach that made most sense to me.

I did not think of managing it all that mapping between the Kendo DataSource. Great idea.

Thanks for sharing the other JSFiddles links as well. I'm really just beginning to understand the KO custom binding architecture and your code samples really help in that respect.

I have a little experience in Backbone, any idea if this would be any easier as a Backbone plugin or do you think the Kendo DataSource would still be the limiting factor?

BTW, I don't want to come across as bad mouthing the KendoUI product(s). I am just very excited about what they have provided and want it all to work right now. :) I am sure 12 months from this this thread will be moot.

answered on 07 Feb 2012, 02:49 PM

Corey ... The concern I have with Kendo is that they may be heading down a road where integration with other plug-ins is just too much effort. Now, I am not saying that is the intention, but I am against the idea of creating 1 library that does it all, when there are so many great libraries out there. I hope this is not the direction, because Kendo has some GREAT promise if it integrates better.

Kendo team ... I realize you have a vision of where you want the product to head, but integration should be a larger focus. Whether you can do it better yourselves or not, the bottom line is that many developers already use many libraries.

answered on 16 Feb 2012, 05:30 AM

The current JavaScript landscape is burgeoning with seedlings of potential super star libraries all vying for attention, momentum and prominence. Kendo has a great opportunity to set itself apart by leveraging the efforts of framework libraries like Knockout, Angular and Ember. The web development community is about to see a huge windfall of SilverLight and Flex developers from the plugin fallout. Choosing to become "friendly " with these frameworks would be a particularly savvy move for Kendo given the convention resemblance of these frameworks to their plugin counterparts . Familiarity breads content is an asset in this case.It would certainly create a boost in popularity for both parties and could easily become the defacto combo choice of web developers. There are plenty of great JavaScript libraries but few have positioned themselves to be compatible with others. Don't spend vital months trying to duplicate their efforts. You will gain far more popularity forming strategic alliances with those that have already proven worthy in their field of expertise. Devs are not going to wait for Q3 or Q4 for tangible results. A great product is only the potential for long term success. This could be your moment to create an advantage.

answered on 16 Feb 2012, 02:51 PM

John Papa and Jeff, couldn't have said it better myself. This is my argument. People aren't going to change to your MVVM library just because you have a rich control suite, they are going to keep using what they are using, such as KnockoutJS, Backbone, or Ember. What they might do is use your MVVM just to get your control to work with there chosen MVVM library (Knockout for example) and be left feeling like they have a bad taste in their mouth.

You will definitely get those Web Devs that haven't settled on a MVVM JavaScript framework yet, but you can appeal to both groups by opening up your kendo datasource to be alot more friendly to other MVVM libraries.

Those that have settled on a known MVVM library, you will leave them looking for the html 5 control suite that does what they want it to do without being intrusive, and they will leave Kendo when it comes out. This is not the model you want to position your control suite to become the defacto controls.

You really need to talk to outside Web Developers before you take on such a one minded approach, get there feel for what is right, they are your audience you are selling to.

Telerik is known for listening to their audience, dont stop now.

Bottom line is, we wouldn't be arguing with your strategy if we weren't fans of Telerik and Kendo. This is a complement to your team, but you must hear your fans out.

answered on 16 Feb 2012, 03:01 PM

Mike (Sorry for getting back to you so late - sick, projects, etc),

I have used backbone to play around with before I started using Knockout, and it just does too much for me and you have alot of setup you need to do. Knockout does one role, and it does it well. I am a big fan of XAML binding, and it is the one JavaScript MVVM library that is the closest to this approach. I like handling my own View Model object and using Knockout to do the binding for me, and having my own navigation library, etc.

As for this binding being easier on backbone, no, it would essentially be the same problem. The main problem in terms of the Grid for me is that there is no events on the Kendo Datasource to tell me when something has changed or the Grid was effected some how, without that, I cant tell the MVVM Library it has changed and change the underlining javascript array. I have no glue from Kendo to adapt to the MVVM Library, its only one way I can listen. So it will end up being only one way binding until they add a significant amount of events on the datasource, as well as useful parameters on those events to tell what has changed.

answered on 26 Feb 2012, 07:33 PM

I just wanted to add a "me too!" response to this thread. Integration with other 3rd party libraries is hugely important to me. I had basically decided to use Kendo UI for a big upcoming project but this thread has me re-thinking that decision. The UI layer absolutely has to be usable through other binding layers such as Knockout JS or Ember. While a full stack is nice, I'd much prefer to pick and choose from what I consider the "best", not what happens to be provided out of the box. I don't mind writing some of this myself but as it stands right now it's sounding like Kendo UI may not actually be easily adaptable to this approach, which is a shame. John and Corey have absolutely nailed it with their assessment here.