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

Add custom values to nodes

5 Answers 426 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Kuangyi
Top achievements
Rank 1
Kuangyi asked on 26 Sep 2012, 04:05 PM
Hi, how do i add custom inputs (or other things) to the treeview?

I tried doing text ="<input..." but that doesn't work, and I tried just passing back my JSON with an extra param (ie id: 1, text:"...", myparam: "myvalue") and that gave an error.

Here's what I tried:



    $("#treeview").kendoTreeView({
       


        dataSource: [{
        id: 1, text: "<input type='hidden' value='val' />My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                {
                    id: 2, myparam:2,  text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                        { id: 3, text: "about.html", spriteCssClass: "html" },
                        { id: 4, text: "index.html", spriteCssClass: "html" },
                        { id: 5, text: "logo.png", spriteCssClass: "image" }
                    ]
                },
                {
                    id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                        { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                        { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                    ]
                },
                {
                    id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                        { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                        { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                        { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                    ]
                }
            ]
        }]
    });

5 Answers, 1 is accepted

Sort by
0
Kuangyi
Top achievements
Rank 1
answered on 26 Sep 2012, 04:20 PM
"The text, imageUrl, spriteCssClass and url fields can be changed through the datatextfield, dataimageurlfield, dataspritecssclassfield, and dataurlfield, respectively.

You can add arbitrary fields when binding through a dataSource. These are stored in the HierarchicalDataSource, and can be easily accessed through the treeview dataItem method:"

edit:

I had to set the schema like this:
schema: {
            model: { id: "myid", children: "items", fields: { myparam: { editable: true, nullable: true}} }
        }

However I can't get any dataitem other than the first: eg. $("#treeview").data("kendoTreeView").dataSource.get(2) doesn't find anything.  Only .get(1) returns anything.  I tried .children.get(2) as well.

Code below:

var localDataSource = new kendo.data.HierarchicalDataSource({
        data:
         [{
             myid: 1, myparam: "Hi", text: "Home", expanded: true, spriteCssClass: "parent", items: [
                {
                    myid: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "parent", items: [
                        { myid: 3, text: "about.html", spriteCssClass: "leaf" },
                        { myid: 4, text: "index.html", spriteCssClass: "leaf" },
                        { myid: 5, text: "logo.png", spriteCssClass: "leaf" }
                    ]
                },
                {
                    myid: 6, text: "New Web Site", expanded: true, spriteCssClass: "parent", items: [
                        { myid: 7, text: "mockup.jpg", spriteCssClass: "leaf" },
                        { myid: 8, text: "Research.pdf", spriteCssClass: "leaf" },
                    ]
                },
                {
                    myid: 9, text: "Reports", expanded: true, spriteCssClass: "parent", items: [
                        { myid: 10, text: "February.pdf", spriteCssClass: "leaf" },
                        { myid: 11, text: "March.pdf", spriteCssClass: "leaf" },
                        { myid: 12, text: "April.pdf", spriteCssClass: "leaf" }
                    ]
                }
            ]
         }],
        schema: {
            model: { id: "myid", children: "items", fields: { myparam: { editable: true, nullable: true}} }
        }
    });
    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        dataSource: localDataSource
    });

0
Alex Gyoshev
Telerik team
answered on 27 Sep 2012, 10:54 AM

Hello Kuangyi,

This problem has been fixed in the internal builds and 2012.Q2 service pack, which are available for customers with an active subscription.

Kind regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 27 Sep 2012, 02:19 PM
We are using kendoui.aspnetmvc.2012.2.924.commercial.

Is this not the latest?
0
Alex Gyoshev
Telerik team
answered on 28 Sep 2012, 02:52 PM

Hello Matt,

I am sorry for the misleading information -- this was a bug that we fixed just now. If you need to get the bugfix, please open a support ticket requesting a build, or wait until the next internal build is uploaded.

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 2
answered on 27 Nov 2012, 01:55 PM
To set the custom values, you will definitely do it in the dataSource.

However, to get those values from the dataItem on the select option you need to do this:

select: function(item) { alert(item.sender.dataItem(item.node).YourFieldNameHere); }
this should help get the value out that you have previously set.

-john-
Tags
TreeView
Asked by
Kuangyi
Top achievements
Rank 1
Answers by
Kuangyi
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Matt
Top achievements
Rank 1
John
Top achievements
Rank 2
Share this question
or