Bug report

When a readonly TextBox is set also enabled: true in MVVM, the readonly is not taken into account.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliKondova/ireTUWOD/2 and try to enter text in both TextBoxes

Current behavior

When the enabled and readonly are used together in MVVM TextBox, the component gets enabled but is not readonly.

Expected/desired behavior

The MVVM TextBox should be read only, even if the enabled is set to true.

TicketID: 1626627

Environment

• Kendo UI version: 2023.2.829
• Browser: [all ]

Currently, there is no way to reuse a single method of a model and execute different logic based on additional data related to the specific element. 

Before the CSP improvements in R1 2023, an unsupported workaround was configuring the method along with the arguments that were evaluated and accessible from the method itself.

Example of the unsupported approach: 

• https://dojo.telerik.com/@pmilchev/UneBafEN 

    <div id="test">
      <p  data-bind="text: spanLabel('test')" ></p>
      <p  data-bind="text: spanLabel('another test')"></p>
    </div>

    <script>
      var viewModel = kendo.observable({
        spanLabel: function(args){
          return "spanLabel executed, args: "+ args
        },
      });
      
      kendo.bind($("#test"), viewModel);
    </script>

Improvement suggestion

Allow the model methods to have access to the reference element. That would enable the internal method logic to get additional data based on the element and achieve the same functionality as the unsupported workaround approach. 

Example of the desired functionality:

    <div id="test">
      <p data-bind="text: spanLabel" data-span-label="test"></p>
      <p data-bind="text: spanLabel" data-span-label="another test"></p>
    </div>

    <script>
      var viewModel = kendo.observable({
        spanLabel: function(args) {
          let element = args.referenceElement; 
          let spanLabelArgs = element.attr("data-span-label")
          return "spanLabel executed, args: " + spanLabelArgs
        },
      });
      
      kendo.bind($("#test"), viewModel);
    </script>

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

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>

We need to be able to define models with complex/nested fields

```
var Book = kendo.Data.Model.define({
    id: 'id',
    field: {
        id: { type: 'string'},
        title: { type: 'string'},
        author: {
            firstName: { type: 'string'},
            lastName: { type: 'string'},        
        }
    }
});

We would also benefit of fields of type kendo.data.Model and [kendo.data.Model] (arrays of items derived from kendo.data.Model) like mongoose Documents, SubDocuments and Arrays of SubDocuments. 

DataSources are simply arrays of such models and do not need to be flat tables.

Grids should not be an issue: they could ignore all complex fields and arrays and rely on calculated fields at the root to flatten the Model.

When a template is declaratively bound in the markup there is currently no way to change it.


In order to make our app changeable by the owners of the data.  We're trying to make everything somewhat generic.  So Ajax call happens, they can provide us with the data and template to use.

However with MVVM there isn't any way for us to actually USE that template.


Steve

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.

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.

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. 

Knockout has a 2-way hasFocus binding: http://knockoutjs.com/documentation/hasfocus-binding.html

Currently, setting input focus requires page-level  (non mvvm) event binding. Having this binding or similar would allow for cleaner form code.

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.

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

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.

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.

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.

Bug report

When a template is used in MVVM scenario the values of the TreeView model are not updated correctly

Reproduction of the problem

1. Open the Dojo example
2. Select a node (for example 'Location 2')
3. Click on the 'Add New' button - when clicking on the button the value of the 'showAddNewButtonBarcode' property is changed. Thus, the button should become invisible

Current behavior

Although the value of the showAddNewButtonBarcode is changed and 'data-bind="visible:.." is false, the button remains visible

Expected/desired behavior

The binding should work as expected. In this scenario, the button should become invisible.

The issue is a regression introduced with Kendo version 2019.3.917

Related to : #5226
Related commit: - telerik/kendo@ca858c6

Environment

• Kendo UI version: 2021.2.511
• Browser: [all]

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?

ObservableArray currently implements some of the ES-5 Array functions, including:
indexOf(), forEach(), map(), filter(), find(), every(), some()

Like the other Array functions, ObservableArray should use the native implementations of these functions if the browser implements them (IE9+, Firefox, Webkit, etc.).

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.