Remote JSON Data to initialize PanelBar

10 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 26 Apr 2012 Link to this post

    I tested out JSON initialization from DataSource inline, which worked for me.
    But now I am preparing to do this from a remote source, so I made a static copy of  the JSON and put it in a file.

    (NOTE: what this is creating is a PanelBar which when opened allows one to check off different file types. When the user presses SEARCH button, I will find out which file types have been checked off. If you know a better way to do this, tell me).

    I would create a JSFiddle, but I don't know how to simulate reading a JSFIDDLE JSON file.

    This is not working for me:

    $("#creatorSelect").kendoPanelBar({
        dataSource: {
        type: 'json',
            transport: {
            read: './menu.JSON'
            }
        }
    });

    And here is the menu.JSON file:

    [{
        "text":"File Types",
        "items":[
            {
                "text":"<input type='checkbox' value='fileType'> JPG</input>",
                "encoded":false
            },
            {
                "text":"<input type='checkbox' value='fileType'> CADRG</input>",
                "encoded":false
            }
        ]
    }]


    When I put everything in-line this works fine:

       $("#creatorSelect").kendoPanelBar({
            dataSource:[{
        text:"File Types",
        items:[
            {
                text:"<input type='checkbox' value='type'> JPG</input>",
                encoded:false
            },
            {
                text:"<input type='checkbox' value='type'> CADRG</input>",
                encoded:false
            }
        ]
    }]);
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 27 Apr 2012 Link to this post

    Hi,

    Currently Kendo DataSource is not supported in Menu, PanelBar and TreeView, because Kendo DataSource doesn't support hierarchical structures - currently you can only use inline JSON objects to initialize those widgets. The good news is that such support is planned for the next release (Q2 2012).

    Greetings,
    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!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 27 Apr 2012 Link to this post

    So to recap and check if I got it right:

    1. Inline DataSource Objects in PanelView with local JSON will work.
    2. However, if the DataSource is inline to the PanelView, but the source of the data is remote, then this does not work, but will be supported in the next release.

    So the real issue is not DataSource support of JSON, but rather does it support remote or only local JSON. (where local is not just a local file, but actually part of the the JS file).

    Actually, my remote data is not hierachical, but a 1-D JSON array that I want to use to fill a 1-D array of checkboxes that are hidden inside a PanelBar till it is opened up. Is there some way of mapping data using the DataSource (I am new to KendoUI, but from what I have seen I suspect that I could use a ListView for this, is that correct? And then put the LIstView inside the PaneBar? Or should I be looking at MVVM solutions) Give me a pointer, I will figure out the rest.

    Also, Since I am a paying subscriber, currently running:

    kendoui.complete.2012.1.423.commercial.zip (.zip, 10370 KB)

    is there any chance I will see it before the full Q2, so I can test it out?
  5. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 May 2012 Link to this post

    Hello,

    In its current implementation PanelBar is not using the DataSource construct at all - for the already listed reason, the missing hierarchy. Your data the way you described it in the first post is still hierarchical even though it has only one element in the first level. In any way - PanelBar doesn't support it yet.

    The internal builds we offer to paying customers are coming from the production branch that contains only fixes. The new features and potential breaking changes intended for the next major releases are living in another branch which will be released first as the beta scheduled for the end of May (if the hierarchy feature is ready by then).

    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!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 04 May 2012 Link to this post

    OK, fair enough.

    But I wanted to tell you that I did figure out a way this can be done.

    I have a PanelBar that has one item in it (an li with a DIV) the DIV is then filled in with a ListView which is populated from DataSource.
    So the list is a 1-D non hierarchical data (which is what I want) and the PanelBar can either open or close to show this list.

    That is exactly the "hierarchy" I was looking for.

    <ul id="creatorSelect" class="selectFeature">
        <li>Creators:
            <div id="creatorListView" />
        </li>
    </ul>

    Where the List and Pane are created as follows:

    function buildCreatorSelector1() {
        var dataSource;
        var template;
        var source;
     
        $("#creatorSelect").kendoPanelBar();
        source = clone(dataSourceTemplate);
        source.transport.read.url = "http://ysg4206/CatalogService/CatalogService.svc/Mcreators";
        dataSource = new kendo.data.DataSource(source);
        template = ListEntryTemplate.format("Creator");
        $("#creatorListView").kendoListView({
            dataSource:dataSource,
            pageable:false,
            template:kendo.template(template)
        });
    }
  7. Dina
    Dina avatar
    2 posts
    Member since:
    Jul 2012

    Posted 16 Aug 2012 Link to this post

    I have a similar issue - data coming from Json.
    Couldn't I just parse the Json and add the <li> elements myself then do a panelBar.reload();?


  8. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 15 Jan 2014 Link to this post

    Is there any update for this.

    I am having problems with mvvm/datasource and the panelbar.
    So I suspect it may not be supported yet

    if it is supported
    is there any demo/example of using mvvm and the panelbar.

    thanks
    dco
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 16 Jan 2014 Link to this post

    Hello David,

    No, HierarchicalDataSource is not yet supported. However, PanelBar does support MVVM for the rest of its functionality.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 11 Feb 2014 Link to this post

    So now that 2012 is way behind us does Panel Bar now support full use of data source?
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 14 Feb 2014 Link to this post

    Hello Shawn,

    The Kendo UI PanelBar does not support dataSource binding with remote operations. You can check the current user requests for the Kendo UI PanelBar on the following link:

    http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback?query=panelbar

    If you can not find what you are looking there, you can open a new request, so it will be considered for a future implementation.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready