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

Data bind items

3 Answers 166 Views
Breadcrumb
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 15 Dec 2020, 05:31 PM

How do you data bind items. 
We can bind value like so:

data-bind="value: value"

but cannot bind to an array of items in the same manner. 

data-items="items" also doesn't seem to work.

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 17 Dec 2020, 12:10 PM

Hi Craig,

As described in the Breadcrumb API the configured value should be of a string type. Binding an array currently is not supported. 

You could bind items in MVVM scenario as demonstrated below:

 <nav id="breadcrumb"
             data-role="breadcrumb"
             data-items='[
            	    { type:"rootitem", href: "mysite.com", text: "Home", showIcon: false, showText: true },
            	    { type:"item", href: "/cloud", text: "Cloud", icon: "cloud", showText: true, showIcon: true }
        		 ]'
             />

Here is a Dojo example where the above is demonstrated.

Please let me know in case you have additional questions on the matter.  

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Craig
Top achievements
Rank 1
answered on 17 Dec 2020, 01:33 PM

Hi,
Thanks for the reply.
How would this work using a proper mvvm model though. 

<nav id="breadcrumb" data-role="breadcrumb" data-items="Breadcumbs"  />

with "Breadcrumbs" defined in the vm like this:

    /**
     * getter for Breadcrumbs
     */
    get Breadcrumbs(): any {
        return this.get("_breadcrumbs");
    }

    /**
     * setter for Breadcrumbs
     * @param newValue the new value to assign to the property
     */
    set Breadcrumbs(newValue: any) {
        this.set("_breadcrumbs", newValue);
    }

 this.Breadcrumbs = [ { type: "rootitem", href: "mysite.com", text: "Home", showIcon: false, showText: true },{ type: "item", href: "/cloud", text: "Cloud", icon: "cloud", showText: true, showIcon: true }]; 

This returns an error:
TypeError: Cannot use 'in' operator to search for 'length' in Breadcrumbs

0
Ivan Danchev
Telerik team
answered on 21 Dec 2020, 11:06 AM

Hi Craig,

Currently, the Breadcrumb does not support binding to an array declared in the model. Consider implementing custom binding.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Breadcrumb
Asked by
Craig
Top achievements
Rank 1
Answers by
Neli
Telerik team
Craig
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or