Add custom values to nodes

[Kuangyi]

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" }
                    ]
                }
            ]
        }]
    });

[Kuangyi]

"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
    });

[Alex Gyoshev]

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

[Matt]

We are using kendoui.aspnetmvc.2012.2.924.commercial.

Is this not the latest?

[Alex Gyoshev]

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

[John]

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-