Kendo Grid dataSource usage

Posted on Edited on In Views: Disqus:

 

kendo grid 的 dataSource 屬性值可以是 data object、javascript objects、kendo.data.DataSource instance。

一、data object

$("").kendoGrid({
    dataSource: {
        data: [
            { FirstName: "Joe", LastName: "Smith" },
            { FirstName: "Jane", LastName: "Smith" }
        ]
    }
});

如下範例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>

<body>

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

    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                columns: [{
                    field: "FirstName",
                    title: "First Name"
                },
                {
                    field: "LastName",
                    title: "Last Name"
                }],
                dataSource: {
                    data: [
                        { FirstName: "Joe", LastName: "Smith" },
                        { FirstName: "Jane", LastName: "Smith" }
                    ]
                }
            });
        });
    </script>
</body>

</html>

 

二、javascript objects

$("").kendoGrid({
    dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
    ]
});

如下範例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>

<body>

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

    <script>
        $("#grid").kendoGrid({
            columns: [
                { field: "name" }, { field: "age" }
            ],
            dataSource: [
                { name: "Jane Doe", age: 30 },
                { name: "John Doe", age: 33 }
            ]
        });
    </script>
</body>

</html>

 

三、kendo.data.DataSource instance (CRUD operations)

1、官方範例

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/products",
            dataType: "jsonp"
        }
    }
});

如下範例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="grid"></div>
    <script>
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                }
            },
            pageSize: 10
        });
        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true
        });
    </script>
</body>

</html>

 

2、北風資料庫範例

Model 的部份，去連北風資料庫，詳細作法就不提了。

此範例只會用到 Product 資料表。

 

HomeController.cs 的內容為

using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        private NorthwindEntities db = new NorthwindEntities();
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetProducts()
        {
            return JsonNetResult(db.Products);
        }

        private ContentResult JsonNetResult(object model)
        {
            return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model), "application/json", System.Text.Encoding.UTF8);
        }
    }
}

 

Index.cshtml 的內容為

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

@model IEnumerable<WebApplication1.Models.Product>

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

@section scripts{
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
    <script>
        $(document).ready(init);

        function init() {
            var dataSource = new kendo.data.DataSource({
                pageSize: 5,
                transport: {
                    read: {
                        datatype: "json",
                        type: "post",
                        url: "/Home/GetProducts",
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true
            });
        }
    </script>
}

 

執行畫面為

 

參考資料：

DataSource Overview

kendo.data.DataSource