MVVM is still lacking some of the capability that is provided by the standard widgets. For example a tooltip cannot bind it's content property to a function in a viewmodel.
It would be exponentially helpful if the "ObservableArray" implemented some basic "Where/Select/Single" methods. This would assist in searching through them and give Kendo UI a much needed facelift in the array department. Behavior would be, theoretically, as follows... var viewModel = kendo.observable({ Users: [ { id: 1, name: "Stacey" }, { id: 2, name: "Dylan" }, { id: 3, name: "John" } ] }); var idSearch = 1; var result = kendo.Search(viewModelArray).Where(function(x) { return x.id == idSearch }); or ... var result = kendo.Search(viewModelArray) .Single(function(x) { return x.id == idSearch }); or possibly even chained like in "linqjs" var result = kendo.Search(viewModelArray) .Where(function(x) { return x.id == idSearch }) .Single();
For performance reasons, it would be nice to be able to stop the change notification for the change of a single property value on a single item in an ObservableArray (or DataSource) from causing the whole ObservableArray from raising a change notification for its bindings. This causes all the bindings for all the items to be re-evaluated.
It would be nice to have some additional "flow control" for the MVVM framework, including ... "if" - <div data-bind="if: [property]"> // renders if the given value is true </div> and "not" <div data-bind="not: enabled"> // renders if the given value is false </div> and "each" <div data-bind="each: array"> // renders this section for each item in the array given </div> I know some of this can be achieved with templates, but this would make it very convenient and mean we did not have to use templates everywhere, and could lead to much more natural coding.
It would be nice if it will be possible to bind multiple viewmodel to a single DOM container. Like xaml binding in witch you can specify a "Binding Source" adding a simple way to specify different viewmodel can help in many real situation. The solution can be accomplished very easily. If you introduce an override of kendo.bind in witch u can specify a key string for identify a viewmodel then with a data attribute or a custom binding you can filter when activate or not the bindings.
Current way of implementing functions in viewmodels suck because you have to use this.get and this.set to access the viewmodel properties. The syntax would be much prettier if you can use advantage of TypeScript strong typing.
When the Kendo Grid is bound using MVVM, add a 2-way 'value' binding which tracks the data items for selected rows. The new binding should have the following features: • Support a 'value' binding on the observable model: <div data-role="grid" data-bind="source: someDatasource, value: selectedItems" ...> • Support multiple select mode using an array binding, or single select mode using a single dataItem. • 2-way binding (update grid selection when the bound value is changed; update bound value when grid selection is changed) This new feature will make it easier to handle two use cases (which are both super common) when using MVVM: • Implement a checkbox column to control selected rows • Implement another MVVM component which wants to take some action based on the currently-selected grid item(s) Here is an example of a partial solution that somebody else implemented: http://www.telerik.com/forums/mvvm-binding-for-grid-selected-row The custom binding that Atanas posted only supports single-row selection mode. It is also model-dependent and (I think) uni-drectional.
Avoid as much as possible the reference of the view from the view model. E.g.: cannot have to use jquery selector $("#idElement") to make modification on the fly
I was trying to use negation operator in a binding using MVVM, just like angular does it, for example I am going to use, you could say why don't use "invisible", it could work on this example, but we have some others custom bindings, or some other scenarios were we have to create multiple properties to handle that, which is a pain. EX <div id="example-1" data-bind="visible: !IsNotAdmin"></div> <div id="example-1" data-bind="customBinding: !IsAdmin"></div> So, are you supporting the negation operator on bindings or are you planning to do it?
Currently it is not possible to nest observables and reuse them without memory leaks. The reason is, that the bound event handlers get never unbound so that the dependencies never get resolved. In our opinion the change and get events should be unbound from the nested observable after the unbind of the view model. With more observables which use a nested observable the amount of events is getting bigger and bigger an the outer observables never get collected from the garbage collector. We think that a method to clean up all handlers like outerObservable.destroy() could help. We also think that the use of nested observables is a common use case and that observables should not only be used for ViewModels.
I think a viewmodel can be binded directly on the DOM element. For example, <div kd-controller='viewmodel'> <button kd-click="click"></button> </div> <script> var viewmodel = kendo.observable({ click: function() { alert('I am clicked!'); } }) </script>
Often I have a MVVM model with an enumerable field which is used to populate dropdowns. I know this data won't change, so I'd like to avoid wrapping into ObservableArray to increase performance, and I name this field, e.g., "_data" (starting with "_" to prevent wrapping). But kendo throws an error in this case when dropdown's value is changed, 'cause it calls internally "get" method on change, which belongs to Observable.
You can (sort of) get Object and Array by not defining a type on model field definitions but explicit types would be better to be enforced. Also grids could ignore these types unless a custom editor is provided. There is also a need for fields that reference submodels and arrays of submodels. HierarchicalDataSources do not really fit the requirement. See how mongoose (for mongoDB) handles documents and subdocuments.
If you use a "source" data binding and don't specify a template, it should use the contents of the elements as the template, exactly as it would in knockout.js. Example: <div data-bind="source: list"> <p> My name is <span data-bind="text: name"></span> and I am <span data-bind="text: age"></span> years old. </p> </div> Since the «template» binding is not specified, the contents of this element would become the template used for the binding. So when you render it you get something like this, without having to use an external template: <div> <p> My name is Pete and I am 20 years old. </p> <p> My name is Sarah and I am 27 years old. </p> </div> The point of this is to make it easier to create source binding without having to go through the hassle of using external templates. External templates seem a little overkill when you're doing very simple things with the source binding.
For now, kendo validator validates just HTML inputs. For simple forms this is ok, but for complex models it would be nice to have a possibility to validate the entire model before posting it (which may not be directly bound to HTML fields!) The expected scenario looks like Asp.NET mvc validation: validate() method accepts the entire view model and returns an array of error objects which are then bound to HTML labels based on their data-* attributes.
I would like built-in support for nested properties in the model, particularly when binding controls to odata and using the expand option to fetch related data via a foreign key. If the grid were aware of this, then setting column templates on foreign keyed data could be much easier as would using them to filter rows. Achieving this today requires a lot of extra code and you can see an example at at http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=880807 There are some other suggestions here that are similar but they each suggest something that doesn't quite make it universally useful. However, based on those suggestion it appears that this support would be useful for many things.
https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/enabled
The documentation states that Non-Boolean values, such as 0, null, undefined, and "", are treated as false by the enabled binding.
However, binding to undefined does not disable the element - all other cases are working.
DoJo: https://dojo.telerik.com/iGiZixIM
Currently the only way to change settings in data-bind is to destory and bind again. Would be nice to make changes to a existing binding, like data-bind="value: property1" to data-bind="value: property2" or add/remove dataSource or events. like you can do with setDataSource on Widgets. Problem: If you have autoBind, rebind make changes to dataSource, or you maybe not know about the observables value property on widget creation, but don't want to destroy users work on a widget.