Not show expand/collapse icon in sharepoint webpart

[Thai]

Hi,

I am creating a sharepoint webpart using kendo treeview, but the expand/collapse icons are not showed although the link to file sprite.png is correct. 

You can see it in the attached file.

What is the problem? Have anyone successfully used kendo treeview in sharepoint?

Thanks.
Thai

[Atanas Korchev]

Hi,

 Most probably the CSS files required by the treeview are not loaded. Did you register them?

Regards,
Atanas Korchev
the Telerik team

[Thai]

Hi,

I already registered them in OnPreRender event.

I registered those files:
<link href='../_layouts/TreeView/styles/kendo.common.min.css' rel='stylesheet'/>
<link href='../_layouts/TreeView/styles/kendo.default.min.css' rel='stylesheet'/>
<script src='../_layouts/TreeView/js/jquery.min.js'></script>
<script src='../_layouts/TreeView/js/kendo.core.min.js'></script>
<script src='../_layouts/TreeView/js/kendo.fx.min.js'></script>
<script src='../_layouts/TreeView/js/kendo.treeview.min.js'></script>
<script src='../_layouts/TreeView/js/kendo.splitter.min.js'></script>
<script src='../_layouts/TreeView/js/kendo.resizable.min.js'></script>
<script src='../_layouts/TreeView/js/kendo.draganddrop.min.js'></script> 

and the treeview is:

treeview = $('#treeview').kendoTreeView({

                    dataSource: [

                                { text: 'Item 1', expanded: true, items: [

                                    { text: 'Item 1.1' },

                                    { text: 'Item 1.2' },

                                    { text: 'Item 1.3' }

                                ] },

                                { text: 'Item 2', items: [

                                    { text: 'Item 2.1' },

                                    { text: 'Item 2.2' },

                                    { text: 'Item 2.3' }

                                ] },

                                { text: 'Item 3' }

                            ],

                    expand: onExpand,

                    select: onSelect

                }).data('kendoTreeView');

The path is correct and the treeview still has event onSelect..

Regards,
Thai

[Atanas Korchev]

Hello,

 You need to check whether all resources are correctly served. Check with a HTTP sniffer tool such as Fiddler or FireBug to see if there are any 404 (Not Found) requests. For some reason the images are not correctly served (as is probably the CSS file itself).

All the best,
Atanas Korchev
the Telerik team

[Thai]

Hi,

I checked with fiddler and found some 404 requests to kendo css files. I had fixed the problem, and it is good now.

Thank you very much :)
Thai

[Thai]

Hi,

One more question,

Currently, all treeview on the same page will have the same style. But I want to specify each treeview with each different style.
How can I do that?

Thanks.
Thai

[Kamen Bundev]

Hello Thai,

Kendo skins are intended to be used separately. However, you can edit the skin stylesheets and prefix all the rules with the different TreeView container IDs or classes, thus limiting their application to the contents.

Kind regards,
Kamen Bundev
the Telerik team