在Kendo UI網格中僅顯示兩個記錄

Question

我在這里要求在頁面加載時僅顯示兩個記錄，並且當用戶單擊“顯示”時，應顯示所有按鈕的其余記錄。

我當前正在做的是，在加載時僅將兩個記錄綁定到網格，然后單擊“顯示全部”按鈕銷毀網格並使用所有記錄再次創建它。

使用這種方法，當我顯示記錄數時，用戶會感到困惑，因為最初的記錄總數僅為2，而單擊“顯示”時，所有記錄都會根據記錄而改變。

為了避免這種情況，我想首先綁定所有記錄，並通過某種劍道設置僅顯示兩個記錄。

這可能嗎？

我也使用angularjs，並將角$ scope對象分配為網格的數據源。

Answer 1

請嘗試使用以下代碼段。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding"> 
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" /> 
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <button value="show all" onclick="ShowAll()">Show All</button>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    }
                },
                height: 550,
                groupable: true,
                dataBound: onDataBinding,
                sortable: true,
                columns: [{
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        }); 
        function onDataBinding(arg) {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).find("tr").hide();
            $(grid.tbody).find("tr:eq(0)").show();
            $(grid.tbody).find("tr:eq(1)").show();
        }
        function ShowAll() {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).find("tr").show();
        }
    </script> 
</body>
</html>

讓我知道是否有任何問題。

在Kendo UI網格中僅顯示兩個記錄

問題描述

1 個解決方案

解決方案1
3 已采納 2015-10-28 12:21:56

在Kendo UI網格中僅顯示兩個記錄

問題描述

1 個解決方案

解決方案1 3 已采納 2015-10-28 12:21:56

解決方案1
3 已采納 2015-10-28 12:21:56