Popular Posts

Monday, December 2, 2013

Kendo UI example binding to oData and binding to MVC action

@{
    ViewBag.Title = "Home Page";
}
@section featured {

    <div id="grid">
    </div>

    <div id="grid2">
    </div>


}

<script>

    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Customers"
                },
                pageSize: 10
            },
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 140
            }, {
                field: "ContactTitle",
                title: "Contact Title",
                width: 190
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 110
            }]
        });
    });

    $(document).ready(function () {
        $("#grid2").kendoGrid({
            dataSource: {
                transport: {
                    read: "Home/Contacts"
                },
                pageSize: 5
            },
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 140
            }, {
                field: "ContactTitle",
                title: "Contact Title",
                width: 190
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 110
            }]
        });
    });

</script>

No comments:

Post a Comment