Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

PanelBar with specific datasource class

2 Answers 336 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Phil H.
Top achievements
Rank 2
Phil H. asked on 10 Jan 2013, 12:45 AM
Hi:

I would like to share some success with panelbar and datasource.
I have created a class vwPanelItem to map to the data structure needed for the PanelBar, as follows (see panelbar overview):
public class vwPanelItem
{
    public string value { get; set; }
    public string text { get; set; }
    public string content { get; set; }
}

This is delivered via a web-service as a json object as follows:
<ul id="kjContactsPanel">
</ul>
 
<script type="text/javascript">
    //
    var contactsDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Services/Contacts.asmx/@(ViewBag.RequestService)",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8"
            },
        },
        schema: {
            data: "d"
        },
        change: function () {
            var panelItems = this.view().toJSON();
            var panelBar = $("#kjContactsPanel").kendoPanelBar({
                dataSource: panelItems,
                expandMode: "single"
            }).data("kendoPanelBar");
        }
    });
    //
    contactsDataSource.read();
    //
</script>
This is from a MVC implementation.  Thus the @(ViewBag.RequestService) is dynamic string being handed to the view from the controller (it is the web-service method).

Good luck:
Phil

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Jan 2013, 02:10 PM
Hello Phil,

Thank you for sharing this solution.

Just as a remark, the PanelBar widget is being initialized at the change event of the DataSource. This is not a one-time event which may result it multiple initialization of the widget if for example DataSource is re-read. Multiple initialization is not supported, to avoid it you may use the one method.
var contactsDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/Services/Contacts.asmx/@(ViewBag.RequestService)",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8"
        },
    },
    schema: {
        data: "d"
    }
});
 
contactsDataSource.one("change", function () {
   var panelItems = this.view().toJSON();
   var panelBar = $("#kjContactsPanel").kendoPanelBar({
      dataSource: panelItems,
      expandMode: "single"
   }).data("kendoPanelBar");
});
 
contactsDataSource.read();


Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Hafiz
Top achievements
Rank 1
answered on 10 Nov 2013, 12:21 PM
I worked on provided solution a bit more and was able to get it worked for Static JSON data as well. 

HTML Document start
01.<!DOCTYPE html>
03.<head>
04.    <title></title>
05. 
06.    <link href="CSS/kendo.common.min.css" rel="stylesheet" />
07.    <link href="CSS/kendo.default.min.css" rel="stylesheet" />
08. 
09.    <script src="JS/jquery.min.js"></script>
10.    <script src="JS/kendo/kendo.web.min.js"></script>
11.    <script src="JS/kendo/console.js"></script>
12.     
13.</head>
14.<body>
15.     
16.        <a class="offline-button" href="../index.html">Back</a>
17.     
18.     
19.        <div id="example" class="k-content">
20.            <div class="wrapper">
21.                <ul id="panelbar">                   
22.                </ul>
23.            </div>           
24.        </div>
    JavaScript
01.<script>
02.    $(document).ready(function () {
03.         
04.        var movies = [{
05.            text: "Star Wars: A New Hope",
06.            content: 1977
07.        }, {
08.            text: "Star Wars: The Empire Strikes Back",
09.            content: 1980
10.        }, {
11.            text: "Star Wars: Return of the Jedi",
12.            content: 1983
13.        }
14.        ];
15.        var localDataSource = new kendo.data.DataSource({ data: movies });
16. 
17.        localDataSource.one("change", function (data) {
18. 
19.            //alert('Fetch');
20.            alert(JSON.stringify(data.sender._pristine));
21. 
22.            var panelItems = data.sender._pristine;//this.view().toJSON();
23.            var panelBar = $("#panelbar").kendoPanelBar({
24.                dataSource: panelItems,
25.                expandMode: "single"
26.            }).data("kendoPanelBar");
27.        });
28. 
29.        localDataSource.read();
30.    });
31.</script>
32. 
33.<style scoped>
34.    .wrapper {
35.        width: 310px;
36.        height: 400px;
37.        margin: 20px auto;
38.        padding: 75px 0 0 390px;
39.        background: url('../../content/web/panelbar/astonmartin.png') no-repeat 0 50px transparent;
40.    }
41.    #panelbar {
42.        width: 300px;
43.    }
44.    #panelbar p {
45.        margin-left: 1em;
46.        margin-right: 1em;
47.    }
48.</style>
Closing HTML document
1.</body>
2.</html>
I hope it helps...
Regards,
Asim
Tags
PanelBar
Asked by
Phil H.
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Hafiz
Top achievements
Rank 1
Share this question
or