This is a migrated thread and some comments may be shown as answers.

Remote JSON Data to initialize PanelBar

9 Answers 395 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Dr.YSG
Top achievements
Rank 2
Dr.YSG asked on 26 Apr 2012, 07:42 PM
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
        }
    ]
}]);

9 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 27 Apr 2012, 08:43 AM
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!
0
Dr.YSG
Top achievements
Rank 2
answered on 27 Apr 2012, 02:43 PM
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?
0
Accepted
Kamen Bundev
Telerik team
answered on 02 May 2012, 09:27 AM
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!
0
Dr.YSG
Top achievements
Rank 2
answered on 04 May 2012, 04:16 PM
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)
    });
}
0
Dina
Top achievements
Rank 1
answered on 16 Aug 2012, 10:43 PM
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();?


0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 15 Jan 2014, 02:39 PM
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
0
Kamen Bundev
Telerik team
answered on 16 Jan 2014, 02:00 PM
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!
0
Shawn
Top achievements
Rank 2
answered on 11 Feb 2014, 11:21 PM
So now that 2012 is way behind us does Panel Bar now support full use of data source?
0
Kiril Nikolov
Telerik team
answered on 14 Feb 2014, 04:53 PM
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!
Tags
PanelBar
Asked by
Dr.YSG
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
Dr.YSG
Top achievements
Rank 2
Dina
Top achievements
Rank 1
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Shawn
Top achievements
Rank 2
Kiril Nikolov
Telerik team
Share this question
or