Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Grid Pager Issue - IE9

2 Answers 79 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AGB
Top achievements
Rank 1
Iron
AGB asked on 04 Dec 2014, 03:36 PM
Hi Guys,

Have just tripped over a IE9 rendering issue whereby the grid pager crawls up and down the screen as you move the mouse over the grid rows.

To illustrate the problem open the following fragment in IE9 and move the mouse over the grid rows.

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
 
        <div id="example">
            <div id="grid"></div>
 
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 5,
                            group: { field: "ContactName" },
                        },
 
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 400
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title",
                            width: 400
                        }, {
                            field: "CompanyName",
                            title: "Company Name",
                            width: 400
                        }, {
                            field: "Country",
                            width: 400
                        }]
                    });
                });
            </script>
        </div>
</body>
</html>

The problem appears to be related to grouping because if you remove the

    group: { field: "ContactName" }

line the grid renders without problem under IE9.

Regards
Alan

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 Dec 2014, 09:43 AM
Hello Alan,

The problem with the empty space being added at the bottom of the Grid is an IE9-specific browser bug. It is exhibited when you have a horizontally scrollable container with no height, and elements with hover styles inside this container. There are two possible workarounds:

1. Apply an explicit height to the horizontally scrollable container. When using the Grid, this can be achieved in a couple of different ways:

+ set a height style to the Grid <div> before initialization, or set the Grid's height property in the widget's configuration statement. The Grid will calculate and set the data area height automatically
+ set a height style to the div.k-grid-content element via external CSS

2. Use the following CSS style:


.k-grid-content
{
   min-height: 0%;
}


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AGB
Top achievements
Rank 1
Iron
answered on 11 Dec 2014, 10:55 AM
Thanks Dimo,

The CSS workaround worked a treat.

Regards
Alan
Tags
Grid
Asked by
AGB
Top achievements
Rank 1
Iron
Answers by
Dimo
Telerik team
AGB
Top achievements
Rank 1
Iron
Share this question
or