This is a migrated thread and some comments may be shown as answers.

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

6 Answers 134 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jayesh Goyani
Top achievements
Rank 2
Jayesh Goyani asked on 25 Dec 2012, 12:54 PM
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

6 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 25 Dec 2012, 12:56 PM
Please check files for FF issue.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 25 Dec 2012, 01:00 PM
Please attached files for IE issue.

0
Accepted
Dimo
Telerik team
answered on 26 Dec 2012, 10:01 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jayesh Goyani
Top achievements
Rank 2
answered on 28 Dec 2012, 08:54 AM
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
0
Dimo
Telerik team
answered on 28 Dec 2012, 09:37 AM
Hello,

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

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jayesh Goyani
Top achievements
Rank 2
answered on 28 Dec 2012, 04:11 PM
Hello,

Thanks for this.

Thanks,
Jayesh Goyani
Tags
Grid
Asked by
Jayesh Goyani
Top achievements
Rank 2
Answers by
Jayesh Goyani
Top achievements
Rank 2
Dimo
Telerik team
Share this question
or