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

Help with dataSpriteCssClassField

3 Answers 64 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Simon Woods
Top achievements
Rank 1
Simon Woods asked on 18 May 2014, 08:25 AM
Hi Just trying to get to grips with the above, but am a noob.

So I am receiving the following data from an ws.

[{"Key":"M12","Name":"Event Protection","HasChildren":true,"NodeType":"Domain"},{"Key":"M13","Name":"Event Protection from 594","HasChildren":true,"NodeType":"Domain"}, ... ]


If am issuing the following when populating the treeview

var tree = $('#treeview').kendoTreeView({         
          dataSource              : getDefinitions(),
          dataTextField           : "Name",
          dataSpriteCssClassField : "NodeType",
          select                  : function (e) {
                                     var id = this.dataItem(e.node).id;
                                     onChange(id);
                                    }

My CSS looks like this

#treeview .k-sprite {
  background-image: url("../../internal/images/treeview-sprites.png");
}
 
.TextItem { background-position: 0px 0px; no-repeat top left; width: 16px; height: 16px;  }
...
.Domain { background-position: 0px -364px; no-repeat top left; width: 16px; height: 16px; }
...

When I run the code, the tree view displays ok BUT only ever shows the top image from the list in the CSS, namely the TextItem image. 

As a noob, I'm not sure where my problem lies. Obviously the sprites png is being found ok and the first item in the list is being loaded, but I'm not sure if there is problem with the way I am doing this or whether there is a problem with my .png. I have noticed that if I inspect the image element sample on the telerik site, Chrome showws a preview of the file, whereas in my sceanrio, Chrome only shows the url to the file.

Any pointers would be gratefully received

S

3 Answers, 1 is accepted

Sort by
0
Simon Woods
Top achievements
Rank 1
answered on 19 May 2014, 08:13 AM
So I have sorted this, but the issue was not related to the above.

For the record, I am using Reactjs and have a treeview component which uses the Telerik treeview. Previously I was instantiating the treeview directly as a react component

render: function () {
        console.log("rendering the layout");
        return (
          <div>
            <TreeView />
         </div>

I changed this to pass in the treeview as a property and everything sprang to life!

In the container control:
 
...
<Layout treeview=<TreeView />/>
...
 
In the control housing the treeview:
 
...
render: function () {
        console.log("rendering the layout");
        return (
          <div>
            {this.props.treeview}
          </div>
...
0
Alex Gyoshev
Telerik team
answered on 19 May 2014, 08:15 AM
Hello Simon,

There is some invalid CSS in the code snippets that you posted:

    background-position: 0px -364px; no-repeat top left; 

Removing that, I tried reproducing the problem in the following Dojo snippet, basing it on the code that you sent and the online example, to no avail. Can you please try to adjust it so that it shows the problem?

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Simon Woods
Top achievements
Rank 1
answered on 19 May 2014, 08:18 AM
Thx Alex ... hopefully I am ok now ... though thx for the heads up on the CSS.
Tags
TreeView
Asked by
Simon Woods
Top achievements
Rank 1
Answers by
Simon Woods
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or