PanelBar with specific datasource class

3 posts, 0 answers
  1. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 09 Jan 2013 Link to this post

    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. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Hafiz
    Hafiz avatar
    4 posts
    Member since:
    Nov 2013

    Posted 10 Nov 2013 Link to this post

    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
Back to Top