Not show expand/collapse icon in sharepoint webpart

7 posts, 1 answers
  1. Thai
    Thai avatar
    9 posts
    Member since:
    Dec 2011

    Posted 02 Jan 2012 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Jan 2012 Link to this post

    Hi,

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

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Thai
    Thai avatar
    9 posts
    Member since:
    Dec 2011

    Posted 03 Jan 2012 Link to this post

    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
  4. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Thai
    Thai avatar
    9 posts
    Member since:
    Dec 2011

    Posted 03 Jan 2012 Link to this post

    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
  6. Thai
    Thai avatar
    9 posts
    Member since:
    Dec 2011

    Posted 03 Jan 2012 Link to this post

    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
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top