Help with dataSpriteCssClassField

[Simon Woods]

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

[Simon Woods]

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>
...

[Alex Gyoshev]

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

 

 

[Simon Woods]

Thx Alex ... hopefully I am ok now ... though thx for the heads up on the CSS.