Hello,

we recently upgraded from Kendoui 2022 to the latest version and our MVVM forms stoped working.

So either there are changes to the datasource or MVVM or both.

Any ideas how to fix it?

<input  data-bind="value: emailTextSource.data()[0].siteGroup" name="siteGroup" id="siteGroup" value="" class=" form-control" />

<script>
	var crudServiceBaseUrl = 'emailTexts';
	var myData = new kendo.data.DataSource({
        transport: {
            read: {
                url: crudServiceBaseUrl + "/getdetails?id=1",
                dataType: "json"
            },
            update: {
                url: crudServiceBaseUrl + "/updatedetails",
                dataType: "json",
                type: 'get'
            },
            destroy: {
                url: crudServiceBaseUrl + "/destroydetails",
                dataType: "json"
            },
        },
        schema: {
            model: {
                id: "id",
                fields: {
                	    }
            }
        }
    });
	var viewModel = kendo.observable({
    	emailTextSource: myData,
		language: [{"language":1,"text":"Deutsch","logger":"","wirebox":"","languageId":1,"id":1,"validationResult":""},{"language":1,"text":"Englisch","logger":"","wirebox":"","languageId":2,"id":3,"validationResult":""}], delete: function(e) {
			if (confirm('Sind Sie sicher?')) {
			    this.emailTextSource.remove(this.emailTextSource.data()[0]);
				this.emailTextSource.sync();
			} else {
			    // Do nothing!
			}
		}
		, save: function(e) {
			if (confirm('Speichern?')) {
				myData.sync();
			} else {
			    // Do nothing!
			}
		}
		
	});
	kendo.bind($("#emailTextDiv"), viewModel);
	myData.read();

</script>

Hello,

Given the provided ListView MVVM example (https://demos.telerik.com/kendo-ui/listview/mvvm),

I was wondering if there is a way to load the ListView in edit mode for the first entry upon loading the page.

Would anybody be able to provide a JQuery code snippet of how this can be achieved? Alternatively, could I get an example of an MVVM ListView that has calls the "add" feature upon opening the ListView in a KendoWindow?

Thank you,

C

We need in our application a dropdowntree which has the following properties:

• searchable
• mvvm based
• server-filterered

the following snipped is the configuration of the datasource:

let hDataSource = new kendo.data.HierarchicalDataSource({
	transport: {
		read:
			function (options) {
				let searchString = "";
				if (options.data.filter && options.data.filter.filters.length > 0) {
					searchString = "/" + options.data.filter.filters[0].value;
				}
				let url = SERVICE_URL;
				if (searchString) {
					url += searchString;
				}
				$.ajax({
					url: url,
					success: function (result) {
						options.success(result);
					}
				});
			}
	},
	schema: {
		model: {
			children: "items",
			hasChildren: "childsAvailable"
		}
	},
	serverFiltering: true
});

the url provided by the SERVICE_URL variable is filtering the data when searching for nodes

when i configure the widget in the normal way everything works just fine. But when i use mvvm the browser throws the following error.

maybe somebody can help me get mvvm to work since this is how all our forms are created.

Hi everyone.

My multiselect works fine, but it adds a completely useless extra select at the bottom.
How can I remove it?

This is my code. The multiselect is fired by mvvm.

<select id="categories" 
    data-placeholder="Seleziona le categorie"
    data-role="multiselect" 
    data-bind="source: categories, value: detailForm.data.selectedCategories" 
    data-value-field="id"
    data-text-field="name"
    >
</select>

Any hint?
Thanks in advance.

While Kendo Editor MVVM works with "data" attributes, if I try to use it with Javascript initialization MVVM doesnt work.

WORKING

  <textarea id="bodyEditor1" data-role="editor"                
                      data-bind="visible: isVisible,
                                value: html,
                                events: { change: onChange }"
                      style="height: 100px;"></textarea>

NOT WORKING

<textarea id="bodyEditor2" style="height: 100px;"></textarea>

 $("#bodyEditor2").kendoEditor({
    
        bind: "visible: isVisible, value: html, events: { change: onChange }"
 
        }).data("kendoEditor");

I was trying to set the "encoded" property to false and neither this worked correctly.

Full dojo:

https://dojo.telerik.com/@ChrisMylonas/IpuWoQUP

Hi Kendo Gurus,

I am have a really tough time with a binding issue and I am not sure if it is MVVM related or Template related. I will try and provide as much information as possible.

The binding is done via nested templates like this:


obsOccupants is an ObservableArray that is a child property to an ObservableObject, that is bound to a form and includes the below. The "s20-employees-list" template looks like this:



I do NOT believe that anything above is an issue as this binds and works just fine on initial load, ala (I'm hiding information so there are blanks):



Further, clicking the delete icon on the right (red trash can) "soft" deletes the row via the click event handler in the bindings (pictured above), resulting in this:



Clicking the undelete icon on the right (green trash can) also behaves as expected. This is done by updating the isDeleted property on an ObservableObject in the ObservableArray. Additionally, there are other, more complicated bindings that are working just fine in the same form, although no adds - this is the first.

So far so good and I thought I was on fire. But now, when I click the Add Occupant button, search for an employee (via a separate UI not pictured) and select an employee and add it to the Observable array, things go south.

The code to add to the Observable array looks like this, and I have tried all three permutations below (First Try, Second Try, etc.). The third one seems really stupid and I was hoping that would not be the answer. :D  



All of these fire a bound change event as expected, and you can see that the count of obsOccupants has increased to 2 and the added employee is included in the event, ala: 



So the new employee exists in the obsOccupants array, the count is correct but the HTML does not update, although as mentioned above, a change on any of the objects IN the Observable Array correctly updates the HTML..

I have tried simplifying the HTML as well as the bindings but still to no avail. Is there anything I should be looking for or trying?

Thankyou for any help.

Cheers,

Justin

Hi Team,

Please see below dojo.

MVVM changes since 2023 have broken our app in a lot of places, but we're left with very little docs about which parts are impacted.

Values init with 'null' stopped working since upgrade to 2023 (csp changes again?). Same changes work if the values are init with 'undefined' instead. Please check if we're doing something incorrectly.

https://dojo.telerik.com/umOmiMiN/2

Thanks

You use it to bind to a viewModel:

viewModel.bind("change", function( event ){
    console.log("BIND:", event.field, "=", this.get(event.field));
});

this.get(event.field)
has the data just modified.

Is there a way to get the old data, before change?

Many thanks

Ran into a bug with the latest version, traced it back to the first release of the year, 2023.1.117.

This dojo works, using 2022.3.1109.

This dojo does not work, using 2023.1.117 or later.

The not working example displays "undefined" whereas the working one displays "$100".