KendoUI Web Grid Popup 显示小，删除记录答案

【问题标题】：KendoUI Web Grid Popup Displays Small, Removes RecordKendoUI Web Grid Popup 显示小，删除记录
【发布时间】：2012-12-14 16:20:56
【问题描述】：

我整理了一个简单的 KendoUI 网络网格示例：

<div id="peopleGrid"></div>

<link type="text/css" rel="stylesheet" href="/Content/kendoui.web.2012.3.1114.commercial/styles/kendo.common.min.css" />
<link type="text/css" rel="stylesheet" href="/Content/kendoui.web.2012.3.1114.commercial/styles/kendo.default.min.css" />
<script type="text/javascript" src="/Content/kendoui.web.2012.3.1114.commercial/js/kendo.web.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#peopleGrid').kendoGrid({
            dataSource: {
                type: 'json',
                transport: {
                    read: '/People/JsonTest'
                },
                schema: {
                    model: {
                        fields: {
                            ID: { type: 'number' },
                            FirstName: { type: 'string' },
                            LastName: { type: 'string' }
                        }
                    }
                },
                pageSize: 10,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false
            },
            height: 250,
            filterable: true,
            sortable: true,
            pageable: true,
            resizable: true,
            reorderable: true,
            editable: {
                mode: 'popup'
            },
            toolbar: ['create'],
            columns: [
                {
                    field: 'ID',
                    filterable: false,
                    hidden: true
                },
                {
                    field: 'FirstName',
                    title: 'First Name'
                }, {
                    field: 'LastName',
                    title: 'Last Name'
                },
                   {
                    command: ['edit', 'destroy'], title: '&nbsp;'
                }
            ]
        });
    });
</script>

网格初始化并且看起来正确。当我单击记录上的编辑按钮或工具栏中的创建按钮时，会显示弹出窗口。但是，它似乎没有动画。它在窗口中心仅显示为几个像素。

检查 DOM 将其显示为弹出窗口包含元素的样式：

transform: scale(0.1);

在 DOM 中编辑它会修复显示。所以看起来应该有一些动画正在发生，但没有。我的代码中是否有问题阻止了它，或者可能是我需要包含的其他资源？当弹出窗口处于活动状态时，按esc 将其关闭会产生一个小动画，将其扩展为正常大小，同时将其淡出。所以动画似乎发生在错误的时间。有什么想法吗？

此外，我看到当弹出窗口关闭时，关联的记录会从网格中删除。我不知道为什么会这样。但任何建议将不胜感激。谢谢！

【问题讨论】：

标签： kendo-ui

【解决方案1】：

这听起来像是我们修复的错误。尝试下载最新的内部版本。

【讨论】：

果然解决了显示问题。如果我将来遇到问题，我一定会检查更新的版本，谢谢！不过，看起来编辑后的记录仍在从网格中删除。虽然这可能值得对 SO 提出自己的问题，但您是否碰巧对此有建议？我现在所做的就是点击Edit，然后点击Cancel，点击的记录就会从网格中消失。我知道我的 CRUD 服务还有更多的连接，但编辑/取消不应该这样做，对吧？
不应该那样做。在我们的在线演示中似乎可以正常工作：demos.kendoui.com/web/grid/editing-popup.html

【解决方案2】：

我遇到了同样的问题。原来这是由于使用了稍微过时的 jQuery 版本造成的。

Kendo UI 当前需要 1.8.2 版

【讨论】：