Skip to main content Skip to footer

Improved C1GridView Scrolling in IE Compatibility view

Many of our customers have faced a problem in C1GridView that the data rows are displayed on top of the headers when the grid is scrolled vertically. The issue is observed when few columns of the grid are fixed and the Paging is enabled in such a way that the Pager is shown above the column headers. The problem only occurs when compatibility mode is enabled in IE8/IE9, or in the old versions of Internet Explorers (IE6/IE7). Through this blog, we will provide a workaround to correct the gridview rendering when it is scrolled. We will start with binding C1GridView to a data source. For simplicity we are binding with Order Details table of C1Nwind.mdb database. Set the following properties to enable scrolling : a. ScrollSettings.ScrollMode = ScrollBar b. ScrollSettings.ScrollOrientation = Both c. Width=500px d. Height=500px Once scrolling is enabled, we enable Paging in the grid, by specifying the following properties: a. PagerSettings.Position = Top b. PagerSettings.Mode = NumericFirstLast c. PageSize = 10 We also set the "Fixed" property of OrderId column to True in the C1GridView's Property builder. When the C1GridView is scrolled while debugging, the rows appear above the header. This is IE6\IE7 bug and it won't be fixed in C1GridView. As a workaround the following css should be added to the page: [css] [/css] After the above changes in the application code the C1GridView rows appear correctly when scrolled. Download Sample_C1GridViewPaging.zip

MESCIUS inc.

comments powered by Disqus