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

IE RadGrid Horizontal Scroll issue

7 Answers 238 Views

Grid

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

Bernard Myers asked on 03 Nov 2010, 03:53 PM

Windows 7 x64, VS 2008, ASP.Net AJAX v 2010.2.826.35.

I'm auto generating RadGrids from the database using codesmith/nettiers and it works perfectly for some tables but doesn't for others. This particular issue only seems to be IE as it works in other browsers. It also happens whether there is data or not.

Bascially it gets confused with the position on the scrollbar and as you scroll right it can reset back to the left or as you reach the end of the table it loses track of earlier columns and just shows the last page with the scrollbar on the left and then last field with the scrollbar disabled.

If I drag the scrollbar to the right it continuosly moves left/right and occasionalyy I get an 'Unspecified Error' on:-

setTimeout(

"Telerik.Web.UI.Grid.frozenScrollHanlder("+this._frozenScrollCounter+")",0);

I think the issue is a problem with the column headers - below is a single column for a RadGrid that scrolls perfectly.

<telerik:GridBoundColumn DataField="LabourCardNumber" HeaderText="Labour Card Number" SortExpression="[LabourCardNumber]" HeaderStyle-Width="100px" HeaderStyle-VerticalAlign="Top" ItemStyle-VerticalAlign="Top" />

if I do something as simple as changing the HeaderText to "Labour Card Number Reference" the horizontal scrollbar no longer functions correctly in IE (6,7 or 8).

Think its something to do with the length of the HeaderText. Can you confirm its an issue and being looked into?

Thanks

B

7 Answers, 1 is accepted

answered on 09 Nov 2010, 02:41 PM

radgrid2.gif

radgrid1.gif

radgrid3.gif

There are several inconsistencies in the horizontal scrollbar and IE so I thought I'd reproduce the error using your VB scrolling code from the RadControls for ASP.NET AJAX Q2 2010 Live demos.

I thought I'd have to make changes to the code to show the scolling issues, however, the unchanged code immediately shows a similar but different problem.

I attach 3 images, the first the initial image showing the northwind data, the second showing the data with the scrollbar to the right both with no problem. Now I simply click on the left of the scollbar to go back to the left and rather than reverting back to RadGrid1 as it should I get the RadGrid3 image.

The horizontal scrollbar has now completely gone and I am simply leff with the ProductId and Units on Order columns.

Do I need to issue a support ticket or is someone looking into this?

B

answered on 12 Nov 2010, 02:42 PM

The standard code generates EntityGridViews and its relatively simple to change the grid definition and data columns to use RadGrid .

I've actually changed it so that the GUI is all VB rather than C# but here's my Entity.aspx.cst file which you should be able to convert easily enough.

B

<%@ CodeTemplate Src="..\..\..\TemplateLib\CommonSqlCode.cs" Inherits="MoM.Templates.CommonSqlCode" Language="C#" TargetLanguage="C#" Description="Generates GridView using EntityDataSource Control." Debug="True" ResponseEncoding="UTF-8" NoWarn="0108,0618,1572,1573,1574,0162,2002"%>

<%@ Assembly Name="SchemaExplorer" %>

<%@ Assembly Name="System.Design" %>

<%@ Import Namespace="SchemaExplorer" %>

<%@ Import Namespace="System.Collections" %>

<%@ Import Namespace="System.Text" %>

<%@ Property Name="SourceTable" Type="SchemaExplorer.TableSchema" Category="Connection" Description="Table that the data access class should be based on." %>

<%@ Property Name="SourceTables" Type="SchemaExplorer.TableSchemaCollection" Category="Connection" Description="All Tables that are selected, this will be used to see which relationships are available." %>

<%@ Property Name="NameSpace" Type="System.String" Category="Style" Description="Class Namespace." %>

<%@ Property Name="BLLNameSpace" Type="System.String" Category="Data" Description="BLL Namespace." %>

<%@ Property Name="IncludeAtlasLibrary" Type="System.Boolean" Default="false" Category="06b. Website - Advanced" Description="Indicates whether to include a reference to the Atlas component library." %>

<%@ Property Name="IncludeAtlasToolkit" Type="System.Boolean" Default="false" Category="06b. Website - Advanced" Description="Indicates whether to include a reference to the Atlas Control Toolkit. This property is only taken into account when IncludeAtlasLibrary is true." %>

<%@ Property Name="IncludeGetListByFK" Type="System.Boolean" Default="True" Category="Options" Description="If true get functions will be generated." %>

<%@ Property Name="IncludeRelations" Type="System.Boolean" Default="True" Category="Options" Description="If true DeepSave/Load will have a collection to fill.  There's still a requirement for IncludeByFk && IncludeSave" %>

<%

// Collection of all columns in the table.

ColumnSchemaCollection cols = SourceTable.Columns;

// Collection of all columns in the table that are not primary keys.

//ColumnSchemaCollection nonKeys = SourceTable.NonPrimaryKeyColumns;

// Collection of all primary key columns.

ColumnSchemaCollection keys = SourceTable.PrimaryKey.MemberColumns;

// Collection of ForeignKeys. Provides information about the foreign keys

//(keys where the current table is the foreign table) contained in the table.

TableKeySchemaCollection fkeys = SourceTable.ForeignKeys;

//Provides information about the primary keys

//(keys where the current table is the primary table) contained in the table.

//TableKeySchemaCollection pkeys = SourceTable.PrimaryKeys;

//Provides information about the indexes contained in the table.

//IndexSchemaCollection indexes = SourceTable.Indexes;

ColumnSchemaCollection colsUpdatable = new ColumnSchemaCollection();

foreach (ColumnSchema column in cols)

{

if ( ! IsIdentityColumn(column) && ! IsComputed(column) && IncludeInOutput(SourceTable, column))

colsUpdatable.Add(column);

}

//sort the columnschema based on what is in mapping file

colsUpdatable.Sort(new ColumnSchemaComparer("Id",SourceTable,CurrentNetTiersMap));

TableKeySchemaCollection fKeysSingle = new TableKeySchemaCollection();

foreach(TableKeySchema tableKey in fkeys)

{

if ( tableKey.ForeignKeyMemberColumns.Count == 1)

fKeysSingle.Add(tableKey);

}

// Holds the RowVersion column if there's any

ColumnSchema RowVersion = null;

foreach (ColumnSchema column in cols)

{

if (column.NativeType.ToLower() == "timestamp")

RowVersion = column;

}

string entityName = GetClassName(SourceTable);

string friendlyName = GetFriendlyName(SourceTable);

string className = NameSpace + "." + entityName;

string providerName = GetClassName(SourceTable, ClassNameFormat.Provider);

%>

<%%@ Page Language="VB" MasterPageFile="~/MasterPages/AppMaster.master" AutoEventWireup="true"  CodeFile="<%=entityName%>.aspx.vb" Inherits="<%=entityName%>" Title="<%=NameSpace%> | <%=friendlyName%>" %%>

<%%@ MasterType TypeName="AppMaster" %%>

<asp:Content ID="Content1" ContentPlaceHolderID="mainCopy" Runat="Server">

<div class="container" runat="server" id="results">

<asp:ImageButton ID="helpButton" runat="server"

OnClientClick="showHelp('<%=entityName%> List'); return false;" ImageAlign="right" style="float: right;" ImageUrl="~\images\ico_help.gif" ToolTip="Help" />

<h4><%=friendlyName%><asp:Literal ID="Header" runat="server" ></asp:Literal></h4>

<telerik:RadGrid ID="GridView1" runat="server" DataSourceID="<%=entityName%>DataSource"

GridLines="None" AllowAutomaticDeletes="False" AllowAutomaticInserts="False"

AllowAutomaticUpdates="True" AllowSorting="True" PageSize="10" AllowPaging="True"

OnSelectedIndexChanged="GridView1_SelectedIndexChanged"

ExportSettings-FileName="Export_<%=entityName%>" SkinID="GvSkin"

ClientSettings-AllowColumnsReorder="true" ClientSettings-Resizing-AllowColumnResize="true"

ClientSettings-Resizing-AllowRowResize ="true" ClientSettings-Resizing-EnableRealTimeResize="true"

AllowFilteringByColumn="True" >

<PagerStyle Mode="Slider" AlwaysVisible="true" />

<ExportSettings IgnorePaging="true" ExportOnlyData="true">

<Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"

PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />

</ExportSettings>

<MasterTableView AutoGenerateColumns="false" CellSpacing="-1"

DataKeyNames="<%=GetDataKeyNames(keys)%>"

TableLayout="Fixed"

CommandItemDisplay="Bottom"

AllowFilteringByColumn="True"

IsFilterItemExpanded="false" >

<CommandItemTemplate>

<div style="padding: 5px 5px;">

<asp:LinkButton ID="AddButton" runat="server" CommandName="InitInsert" ToolTip="Add new" OnClick="AddButton_Click" Visible='false'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/AddRecord.gif" /> Add new</asp:LinkButton>

<div style="float: right">

<asp:LinkButton ID="RefreshButton" runat="server" CommandName="RebindGrid" ToolTip="Refresh"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Refresh.gif" /> Refresh</asp:LinkButton>

<asp:LinkButton ID="FilterButton" runat="server" ToolTip="Show Filters" OnClientClick="showFilter();" Visible='false'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Filter.gif" /> Show Filters</asp:LinkButton>

<asp:LinkButton ID="ExportButton" runat="server" CommandName="ExportToExcel" ToolTip="Export To Excel" Visible='false'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/ExportToExcel.gif" /></asp:LinkButton>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="imagebutton" HeaderStyle-Width="25px" visible="false" />

<telerik:GridTemplateColumn UniqueName="Select" HeaderStyle-Width="65px" ItemStyle-VerticalAlign="Top" Reorderable="false" Resizable="false" AllowFiltering="false" >

<ItemTemplate>

<asp:Button runat="server" ID="lblTest" Text="Select" CommandName="Select" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<%

string entityDSO = string.Empty;

int suffix = 1;

foreach( ColumnSchema column in colsUpdatable)

{

if (column.Name != "CreationUserId" && column.Name !="CreationDateTime" && column.Name != "LastUpdatedUserId" && column.Name !="LastUpdatedDateTime")

{

if (column.IsForeignKeyMember && IncludeRelations && IncludeGetListByFK)

{

string tempDSO = string.Empty;

Response.Write(WriteTemplateField(column, 4, out tempDSO, suffix) + "\r\n");

//entityDSO+=tempDSO;

suffix++;

}

else if (IsBlobField(column)

&& SourceTable.PrimaryKey.MemberColumns.Count == 1

&& IncludeAtlasToolkit)

{

string tempDSO = string.Empty;

Response.Write(WriteBlobTemplateField(column, suffix) + "\r\n");

//entityDSO+=tempDSO;

suffix++;

}

else

{

Response.Write(WriteBoundField(column, 4) + "\r\n");

}

%> <telerik:GridButtonColumn UniqueName="DeleteCommandColumn" ButtonType="PushButton" HeaderStyle-Width="100px" visible="false" Text="Remove" ButtonCssClass="button" CommandName="Delete" ConfirmTitle ="Remove <%=friendlyName%>" ConfirmText="Are you Sure?" ConfirmDialogType="RadWindow" />

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" FrozenColumnsCount="1">

</Scrolling>

</ClientSettings>

</telerik:RadGrid>

<% if (IncludeAtlasToolkit && SourceTable.PrimaryKey.MemberColumns.Count == 1) {

foreach (ColumnSchema col in SourceTable.Columns)

{

if (!IsBlobField(col))

continue;

%>

<asp:Panel ID="Panel1" runat="server" CssClass="popup" >

<h2>Content Preview <asp:Button ID="Button1" runat="server" Text="Close Preview"/></h2><hr />

<asp:Label ID='lblPreview' runat="server" />

</asp:Panel>

<%

break;

}

%>

<% } %>

<%

// -- write out the data source object for each templatefield

if (entityDSO != string.Empty) Response.Write(entityDSO);

%>

<data:<%=entityName%>DataSource ID="<%=entityName%>DataSource" runat="server"

SelectMethod="<%= MethodNames.GetPaged %>" EnablePaging="True" EnableSorting="True" EnableDeepLoad="False">

<Parameters>

<data:CustomParameter Name="WhereClause" Value="" ConvertEmptyStringToNull="false" />

<data:CustomParameter Name="OrderByClause" Value="" ConvertEmptyStringToNull="false" />

</Parameters>

</data:<%=entityName%>DataSource>

<%

Hashtable children = GetChildrenCollections(SourceTable, SourceTables);

if (SourceTable.ForeignKeys.Count > 0) {

if ( IncludeRelations && IncludeGetListByFK )

{

//Generate DataSource for each child type foreign key relation

System.Collections.ArrayList addedList = new System.Collections.ArrayList();

foreach(TableKeySchema tableKey in SourceTable.ForeignKeys)

{

// related table must be in the selection

if (SourceTables.Contains(tableKey.PrimaryKeyTable))

{

string pkClassName = GetClassName(tableKey.PrimaryKeyTable);

string pkProperty = GetKeysName(tableKey.PrimaryKeyMemberColumns);

string fkPropertyName = GetKeysName(tableKey.ForeignKeyMemberColumns);

string compositePropertyName = fkPropertyName + "Source";

if (addedList.Contains(pkClassName))

continue;

addedList.Add(pkClassName);

%>

<data:<%= pkClassName %>DataSource ID="<%= fkPropertyName %>DataSource" runat="server" />

<%

} // end if

} // end foreach

}

%>

</div>

</asp:Content>

<script runat="template">

public void RenderGridViewSearchPanel() {

Response.Write (Tab(2) + "<data:GridViewSearchPanel

ID=\"GridViewSearchPanel1\" runat=\"server\" GridViewControlID=\"GridView1\" PersistenceMethod=\"Session\" />\n" + Tab(2) + "<

br />\n");

}

public string WriteTemplateField(ColumnSchema column, int tabs, out string entityDSO, int suffix) {

//const string _templateField = @" ";

const string _templateField = @" <telerik:GridDropDownColumn UniqueName=""{0}"" ListTextField=""{5}"" ListValueField=""{2}"" DataSourceID=""{0}DataSource"" HeaderText=""{7}"" DataField=""{0}"" DropDownControlType=""RadComboBox"" AllowSorting=""true"" HeaderStyle-Width=""100px"" HeaderStyle-VerticalAlign=""Top"" ItemStyle-VerticalAlign=""Top"" />";

string propertyName = GetPropertyName(column);

string pkPropertyName = String.Empty;

string pkColumnName = String.Empty;

string fkPropertyName = String.Empty;

string fkFriendlyName = String.Empty;

string fkColumnName = String.Empty;

string pkDisplayField = String.Empty;

string objectDataSource = String.Empty;

string pkCSType = String.Empty;

string fkFriendlyNameLessId = String.Empty;

TableSchema fkTable = null;

entityDSO = string.Empty;

foreach (TableKeySchema tableKey in column.Table.ForeignKeys)

{

//Key Tables must be in SourceTables

if (!SourceTables.Contains(tableKey.ForeignKeyTable) || !SourceTables.Contains(tableKey.PrimaryKeyTable))

continue;

fkTable = tableKey.PrimaryKeyTable;

ColumnSchema fKeyColumn = tableKey.ForeignKeyMemberColumns[0];

fkPropertyName = GetPropertyName(fKeyColumn);

fkFriendlyName = GetFriendlyName(fKeyColumn);

fkFriendlyNameLessId = GetFriendlyName(fKeyColumn);

if (fkFriendlyNameLessId.EndsWith(" Id"))

{

fkFriendlyNameLessId = fkFriendlyNameLessId.Substring(0, fkFriendlyNameLessId.Length - 3);

}

fkColumnName = fKeyColumn.Name;

if ( GetPropertyName(fKeyColumn) == propertyName )

{

pkPropertyName = GetPropertyName(tableKey.PrimaryKeyMemberColumns[0]);

pkColumnName = tableKey.PrimaryKeyMemberColumns[0].Name;

pkCSType = GetCSType(tableKey.PrimaryKeyMemberColumns[0]);

//Find the first non-key column for display

foreach(ColumnSchema pkColumn in tableKey.PrimaryKeyTable.Columns)

if ( !pkColumn.IsForeignKeyMember && !pkColumn.IsPrimaryKeyMember )

{

pkDisplayField = GetPropertyName(pkColumn);

break;

}

if (objectDataSource == String.Empty )

objectDataSource = GetClassName(tableKey.PrimaryKeyTable);

if (pkDisplayField == String.Empty )

pkDisplayField = pkPropertyName;

break;

}

if (fkPropertyName == string.Empty || pkPropertyName == string.Empty)

return string.Empty;

return string.Format(_templateField,

/*0*/ fkPropertyName,

/*1*/ fkFriendlyName,

/*2*/ pkPropertyName,

/*3*/ GetClassName(fkTable),

/*4*/ fkColumnName,

/*5*/ pkDisplayField,

/*6*/ string.Concat(objectDataSource, "DataSource", suffix.ToString()),

/*7*/ fkFriendlyNameLessId);

}

public string WriteBlobTemplateField(ColumnSchema column, int suffix)

{

string propertyName = GetPropertyName(column);

return string.Format(_blobTemplate, GetFriendlyName(column), propertyName, GetPropertyName(SourceTable.PrimaryKey.MemberColumns[0]), suffix);

}

public string WriteBoundField(ColumnSchema column, int tabs) {

string propertyName = GetPropertyName(column);

// -- exclude DbType.Xml from report

if (column.NativeType.ToLower().Equals("xml")) return string.Empty;

if (column.DataType == DbType.Date || column.DataType == DbType.DateTime)

{

//return string.Format("{1}<telerik:GridBoundColumn

DataField=\"{0}\" DataFormatString=\"{{0:d}}\" HtmlEncode=\"False\" HeaderText=\"{4}\" SortExpression=\"[{2}]\" {3} />", propertyName, Tab(tabs), column.Name, (column.IsPrimaryKeyMember)?"ReadOnly=\"True\"":"", GetFriendlyName(column));

return string.Format(_dateTemplate, propertyName, Tab(tabs), column.Name, (column.IsPrimaryKeyMember)?"ReadOnly=\"True\"":"", GetFriendlyName(column));

}

else if (column.NativeType == "bit") {

return string.Format("{1}<telerik:GridCheckBoxColumn

DataField=\"{0}\" HeaderText=\"{4}\" SortExpression=\"[{2}]\" {3} HeaderStyle-Width=\"50px\" HeaderStyle-VerticalAlign=\"Top\" ItemStyle-VerticalAlign=\"Top\" />", propertyName, Tab(tabs), column.Name, (column.IsPrimaryKeyMember)?"ReadOnly=\"True\"":"", GetFriendlyName(column));

}

else if (column.NativeType != "text" && column.NativeType != "ntext")

{

return string.Format("{1}<telerik:GridBoundColumn

DataField=\"{0}\" HeaderText=\"{4}\" SortExpression=\"[{2}]\" {3} HeaderStyle-Width=\"100px\" HeaderStyle-VerticalAlign=\"Top\" ItemStyle-VerticalAlign=\"Top\" />", propertyName, Tab(tabs), column.Name, (column.IsPrimaryKeyMember)?"ReadOnly=\"True\"":"", GetFriendlyName(column));

}

else

{

return string.Format("{1}<telerik:GridBoundColumn

DataField=\"{0}\" HeaderText=\"{4}\" SortExpression=\"\" {3} HeaderStyle-Width=\"100px\" HeaderStyle-VerticalAlign=\"Top\" ItemStyle-VerticalAlign=\"Top\" />", propertyName, Tab(tabs), column.Name, (column.IsPrimaryKeyMember)?"ReadOnly=\"True\"":"", GetFriendlyName(column));

}

const string _blobTemplate = @"

<telerik:GridTemplateColumn headertext='{0} Preview'>

<itemtemplate>

<ajaxToolkit:ModalPopupExtender id='ModalPopupExtender{3}' runat='server'

TargetControlID='LinkButton{3}'

PopupControlID='Panel1'

OkControlID='Button1'

BackgroundCssClass='ModalBackground'

DynamicControlID='lblPreview'

DynamicContextKey='<%# DataBinder.Eval(Container.DataItem, ""{2}"") %>'

DynamicServiceMethod='Get{1}Content' />

<asp:LinkButton ID='LinkButton{3}' runat='server' Text='Preview' />

</itemtemplate>

</telerik:GridTemplateColumn>

";

const string _dateTemplate = @" <telerik:GridTemplateColumn HeaderText=""{4}"" UniqueName=""{0}"" HeaderStyle-Width=""70px"" HeaderStyle-VerticalAlign=""Top"" ItemStyle-VerticalAlign=""Top"">

<ItemTemplate>

<asp:Label runat=""server"" ID=""lbl{0}"" Text='<%# Eval(""{0}"", ""{{0:d}}"") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>";

</script>