在Kendo UI网格中仅显示两个记录

Question

I have a requirement over here to display only two records on page load and when user clicks on show all button rest of the records should be displayed. 我在这里要求在页面加载时仅显示两个记录，并且当用户单击“显示”时，应显示所有按钮的其余记录。

What I am currently doing is, on load bind just two records to the grid and when clicking on show all button destroying the grid and creating it again with all the records. 我当前正在做的是，在加载时仅将两个记录绑定到网格，然后单击“显示全部”按钮销毁网格并使用所有记录再次创建它。

With this approach when I display number of records the user will get confused because initially the total records will be just 2 and when clicking on show all it will change according to the records. 使用这种方法，当我显示记录数时，用户会感到困惑，因为最初的记录总数仅为2，而单击“显示”时，所有记录都会根据记录而改变。

To avoid this I am thinking to bind all the records in the first place and display only two records by some sort of kendo setting. 为了避免这种情况，我想首先绑定所有记录，并通过某种剑道设置仅显示两个记录。

Is this possible? 这可能吗？

I am using angularjs as well and will assign angular $scope object as data source to the grid. 我也使用angularjs，并将角$ scope对象分配为网格的数据源。

Answer 1

Please try with the below code snippet. 请尝试使用以下代码段。

<!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>

Let me know if any concern. 让我知道是否有任何问题。

在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