Remote JSON Data to initialize PanelBar

[Dr.YSG]

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

        }

    ]

}]);

[Kamen Bundev]

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

[Dr.YSG]

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?

[Kamen Bundev]

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

[Dr.YSG]

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)

    });

}

[Dina]

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();?

[David Ocasio]

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

[Kamen Bundev]

Hello David,

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

Regards,
Kamen Bundev
Telerik

[Shawn]

So now that 2012 is way behind us does Panel Bar now support full use of data source?

[Kiril Nikolov]

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