CODEWITHSUNDEEP
kendo-ui
David
David

Reputation: 219027

KendoUI Web Grid Popup Displays Small, Removes Record

I've put together a simple example of a KendoUI web grid:

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

The grid initializes and looks correct. And when I click on an edit button on a record or the create button in the toolbar, the popup displays. However, it doesn't appear to be animating. It's visible in the center of the window as only a few pixels.

Examining the DOM shows this as a style for the popup's containing element:

transform: scale(0.1);

Editing this in the DOM fixes the display. So it looks like there should be some animation taking place which isn't. Is there something wrong in my code that's preventing it, or maybe another resource I need to include? When the popup is active, pressing esc to close it results in a small animation which expands it to normal size while at the same time fading it out. So the animation appears to be happening at the wrong time. Any ideas?

Additionally, I'm seeing that when the popup is closed the associated record is removed from the grid. That one I have no idea why it's happening. But any advice would be much appreciated. Thanks!

Upvotes: 0

Views: 903

Answers (2)

Mat
Mat

Reputation: 1688

I had the same problem. Turns out it was caused by using a slightly out-of-date verion of jQuery.

Kendo UI currently requires version 1.8.2

Upvotes: 0

Atanas Korchev
Atanas Korchev

Reputation: 30671

This sounds like a bug that we fixed. Try downloading the latest internal build.

Upvotes: 1

Related Questions