DataSource binding of ListView

1 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 code.  This is a MVC application accessing web-server that is returned as json:
    @{
        ViewBag.Title = "Home Page";
    }
    <script id="contact-template" type="text/x-kendo-template">
        <div class="mm-contact">
            <span class="mm-title" data-bind="text: Title"></span><br />
            <span data-bind="text: FirstName"></span> <span data-bind="text: LastName"></span><br />
            Extension: <span data-bind="text: Extension1"></span><br />
            mail: <span data-bind="text: Email"></span>
        </div>
    </script>
    <div id="ProductSales" data-role="view" data-model="vm" data-layout="default" data-title="Product Sales">
        <header data-role="header">
            <div data-role="navbar">Product Sales</div>
        </header>
        <div id='lv' data-role="listview" data-bind="source: productSalesContacts" data-template="contact-template"></div>
    </div>
    <script type="text/javascript">
        var Staff = kendo.data.Model.define({
            id: "ID",
            fields: {
                // data type of the field {Number|String|Boolean|Date} default is String
                ID: { type: "Numeric", editable: false, nullable: true },
                LastName: { type: "String", validation: { required: true } },
                FirstName: { type: "String", validation: { required: true } },
                Title: { type: "String" },
                City: { type: "String" },
                State: { type: "String" },
                Email: { type: "String" },
                Phone1: { type: "String" },
                Extension1: { type: "String" },
                Sequence: { type: "Numeric", nullable: true }
            }
        });
        var vm = kendo.observable({
            productSalesContacts: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Services/Contacts.asmx/ProductSales",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8"
                    },
                },
                schema: {
                    data: "d",
                    model: Staff
                }
            })
        });
    </script>
    Good luck:
    Phil
Back to Top