After filtering grid auto scroll to the left in IE-9 and removed scroll bar in FF 17

[Jayesh Goyani]

Hello,

HTML

<div id="example" class="k-content">

            <div id="clientsDb">

 

                <div id="grid" style="height: 380px"></div>

 

            </div>

</div>

JS

$(document).ready(function() {

                    $("#grid").kendoGrid({

                        dataSource: {

                            type: "odata",

                            transport: {

                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"

                            },

                            schema: {

                                model: {

                                    fields: {

                                        OrderID: { type: "number" },

                                        Freight: { type: "number" },

                                        ShipName: { type: "string" },

                                        OrderDate: { type: "date" },

                                        ShipCity: { type: "string" }

                                    }

                                }

                            },

                            pageSize: 10,

                            serverPaging: true,

                            serverFiltering: true,

                            serverSorting: true

                        },

                        height: 250,

                        filterable: true,

                        scrollable: true,

                        sortable: true,

                        pageable: true,

                        columns: [{

                                field:"OrderID",

                                filterable: false

                            },

                            "Freight",

                            {

                                field: "OrderDate",

                                title: "Order Date",

                                width: 350,

                                format: "{0:MM/dd/yyyy}"

                            }, {

                                field: "ShipName",

                                title: "Ship Name",

                                width: 250

                            }, {

                                field: "ShipCity",

                                title: "Ship City",

                                width: 300

                            }

                        ]

                    });

                });

Steps for produce this issue.

FF-17.

Step 1 : Add above code in to http://try.kendoui.com/web/widget-initialization/1
Step 2 : Filter the 'ship city'  column by 'jayesh' and Click on filter button.
Step 3 : Issue raised here


It removed the scroll bar from the grid.

IE-9.

Step 1 : Add above code in to http://try.kendoui.com/web/widget-initialization/1
Step 2 : Filter the 'ship city'  column by 'jayesh' and Click on filter button.
Step 3 : Clear the filter from 'ship city' column
Step 4 : Issue raised here


It miss aligned the data and header row. (Because it auto scroll to the Left)

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Please check files for FF issue.

[Jayesh Goyani]

Please attached files for IE issue.

[Dimo]

Hello Jayesh,

The described issue is caused by the fact that there are no table rows rendered in the data area. You can use the following function as a workaround and execute it in the Grid's dataBound event:

function addEmptyRow() {
    var contentDiv = this.wrapper.children(".k-grid-content"),
        dataTable = contentDiv.children("table");
    if (!dataTable.find("tr").length) {
        dataTable.children("tbody").append("<tr colspan='" + this.columns.length + "'><td> </td></tr>");
        if ($.browser.msie) {
            dataTable.width(this.wrapper.children(".k-grid-header").find("table").width());
        }
    }
}

The scroll position cannot be persisted unless you take care of saving it and setting it manually, which I think is unnecessary overhead.

Regards,
Dimo
the Telerik team

[Jayesh Goyani]

Hello,

It is possible then can you please inform to developer team about this ? (Because i think this is the BUG in grid)

I have modified your code to resolved IE issue.

function onDataBound(arg) {

        if (arg.sender._data.length == 0) {

            var contentDiv = this.wrapper.children(".k-grid-content"),

            dataTable = contentDiv.children("table");

            if (!dataTable.find("tr").length) {

                dataTable.children("tbody").append("<tr colspan='" + this.columns.length + "'><td> </td></tr>");

                if ($.browser.msie) {

                    dataTable.width(this.wrapper.children(".k-grid-header").find("table").width());

                    contentDiv.scrollLeft(1);

                }

            }

        }

    }

Thanks,
Jayesh Goyani

[Dimo]

Hello,

I have brought this thread to the attention of the dev team for further consideration.

Regards,
Dimo
the Telerik team

[Jayesh Goyani]

Hello,

Thanks for this.

Thanks,
Jayesh Goyani