Chrome and Rad Grid Rendering issue in UI for ASP.NET AJAX

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

Chrome and Rad Grid Rendering issue

14 Answers 125 Views

Grid

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

Jelly Master asked on 29 Feb 2012, 09:04 PM

Hi Just wondering if someone can help.

I have a strange issue with Chrome and the way it seems to render my rad grid.
Zibrant Test Site

In firefox 10.0.2, IE 7,8,9 the grid renders correctly but in Chrome it seems to create a grid with a massive width on it and also messes up the grouping panel section as well. below is the grid.

<telerik:RadGrid ID="radGrid" runat="server" AutoGenerateColumns="False" OnNeedDataSource="radGrid_NeedDataSource"

AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" ShowFooter="True"

ShowGroupPanel="True" ShowStatusBar="True" CellSpacing="0" OnColumnCreating="radGrid_ColumnCreating"

OnItemCommand="radGrid_ItemCommand" EnableLinqExpressions="false" Width="900px" >

<ExportSettings IgnorePaging="True" ExportOnlyData="true" OpenInNewWindow="true"

FileName="Event List" HideStructureColumns="true">

</ExportSettings>

<ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" AllowKeyboardNavigation="True">

<Scrolling AllowScroll="false" EnableVirtualScrollPaging="True" />

<Animation AllowColumnReorderAnimation="True" AllowColumnRevertAnimation="True" />

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

<MasterTableView NoDetailRecordsText="No Events Currently Listed" NoMasterRecordsText="No Events Currently Listed"

CommandItemDisplay="None" AllowMultiColumnSorting="True" EditMode="PopUp">

<CommandItemSettings ExportToPdfText="Export to PDF" ShowAddNewRecordButton="False"

ShowExportToExcelButton="True" ShowExportToCsvButton="True" ShowExportToPdfButton="True"

ShowExportToWordButton="True" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

</Columns>

<EditFormSettings EditFormType="WebUserControl" UserControlName="~/Controls/EventEmailer.ascx"

PopUpSettings-Modal="true" PopUpSettings-Height="500" PopUpSettings-Width="900" CaptionDataField="TitleOfEvent">

<EditColumn FilterControlAltText="Filter EditCommandColumn column" UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False" EnableRoundedCorners="True">

</FilterMenu>

</telerik:RadGrid>

The columns are added at run time as I am using the google like filtering feature as demo'd on the site.

They are added like this:

if (!IsPostBack)

{

//clear items.

radGrid.MasterTableView.Columns.Clear();

//add events

EventList = LoadEvents(CurrentStyle);

CustomFilteringDropDown title = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(title);

AddGridColumns(ref title, "HtmlEncodeTitle", "Title", string.Empty, "portaltablelink", true, "TitleOfEvent", 400);

CustomFilteringDropDown startDate = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(startDate);

AddGridColumns(ref startDate, "startDate", "Start", "ddd, dd MMM yy", string.Empty, false, "startDate", 100);

CustomFilteringDropDown endDate = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(endDate);

AddGridColumns(ref endDate, "endDate", "End", "ddd, dd MMM yy", string.Empty, false, "endDate", 100);

CustomFilteringDropDown town = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(town);

AddGridColumns(ref town, "Town", "Town", string.Empty, string.Empty, true, "Town", 150);

CustomFilteringDropDown country = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(country);

AddGridColumns(ref country, "Country", "Country", string.Empty, string.Empty, true, "Country", 150);

GridEditCommandColumn editColumn = new GridEditCommandColumn();

radGrid.MasterTableView.Columns.Add(editColumn);

editColumn.UniqueName = "EditCommandColumn";

editColumn.ButtonType = GridButtonColumnType.ImageButton;

editColumn.EditImageUrl = "~/Styles/ClientDefault/Images/ContactUs/email_dialog_icon.png";

editColumn.EditText = "Email Delegates this link";

}

private void AddGridColumns(ref CustomFilteringDropDown item, string dataField, string headerText, string dataFormat, string cssClass, bool enableFilter, string groupByClause, int width)

{

item.DataField = dataField;

item.UniqueName = dataField;

item.HtmlEncode = false;

item.Groupable = true;

item.GroupByExpression = string.Format("{0} Group By {1}", groupByClause, groupByClause);

item.AllowSorting = true;

item.AllowFiltering = enableFilter;

item.SortExpression = dataField;

item.HeaderText = headerText;

item.DataFormatString = "{0:" + dataFormat + "}";

item.ItemStyle.CssClass = cssClass;

item.HeaderStyle.Width = Unit.Pixel(width);

item.FilterControlWidth = Unit.Pixel(width);

}

If anyone can shed any light on why this is happening it would be great.

14 Answers, 1 is accepted

answered on 26 Oct 2012, 03:17 PM

Hi,

I've been trying to do this programmatically because my columns are autogenerated and I can't predict the number and type of columns. Any clue why this code wouldn't work ?

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles ResultGrid.ItemDataBound

If TypeOf e.Item Is GridDataItem Then

For Each col As GridColumn In ResultGrid.MasterTableView.AutoGeneratedColumns

If col.ColumnType = "GridDateTimeColumn" Then

col.FilterControlWidth = New System.Web.UI.WebControls.Unit(100, UnitType.Pixel)

End If

Next

End If

End Sub

answered on 01 Nov 2012, 12:56 PM

I followed the suggested method of setting the "FilterControlWidth" of the columns, in IE9 and FireFox the column widths appear as I have indicated. However, in Chrome/Safari my custom column widths are not observed and the widths of each column are the default width, causing the RadGrid to be much wider than needed/desired. Please have a look at my code and tell me if I am simply doing something wrong, the last three columns are the ones with custom widths.-Thank You

<telerik:RadGrid ID="rgChairReport" runat="server" AllowFilteringByColumn="True"

AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0"

GridLines="None" BorderStyle="None" Style="z-index: 1; left: 0px; top: -15px;

position: relative; width: 1241px; max-width: 1241;" OnNeedDataSource="rgChairReport_NeedDataSource"

OnItemCommand="rgChairReport_ItemCommand" PageSize="6"

OnPageIndexChanged="rgChairReport_PageIndexChanged">

<GroupingSettings CaseSensitive="false" />

<MasterTableView CommandItemDisplay="Top" Width="1241px" AllowFilteringByColumn="true"

BorderStyle="Solid" BorderColor="Gray" BorderWidth="1px" PageSize="5">

<CommandItemSettings ShowExportToExcelButton="true" ShowExportToPdfButton="true"

ShowAddNewRecordButton="false" ShowRefreshButton="false" />

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter CaseId column"

HeaderText="ID" ShowFilterIcon="False" UniqueName="CaseId" DataField="CaseId">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter Committee column"

HeaderText="Committee" ShowFilterIcon="False" UniqueName="Committee" DataField="Committee">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter Facility column"

HeaderText="Facility" ShowFilterIcon="False" UniqueName="Facility" DataField="Facility">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter DOS column"

HeaderText="DOS" ShowFilterIcon="False" UniqueName="DOS" DataField="DateOfService"

HeaderStyle-Width="65px" FilterControlWidth="65px" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="True" FilterControlAltText="Filter Age column"

HeaderStyle-Width="25px" FilterControlWidth="25px" HeaderText="Age" ShowFilterIcon="False"

UniqueName="Age" DataField="PADOS">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

answered on 06 Apr 2017, 02:05 AM

autofilteroff.jpg

autofilteron.jpg

There does seem to be a problem with Chrome and the rendering of the automated filter controls. The appear fine, with width in the headers. The problem is the browser window places a horizontal scroll at the bottom in Chrome only. Testing this with about 25 columns it appears great in the grid.

<telerik:RadGrid runat="server" Width="300" Height="300" ID="RadGridMembers" AllowFilteringByColumn="true">

<MasterTableView AutoGenerateColumns="true" >

</MasterTableView>

</telerik:RadGrid>

...however if the AllowFilteringByColumn is turned on, it thows the scroll bar in the browser. Grid has its bar, but the window should not. If its removed - AllowFilteringByColumn='False' it removes the window horizontal scroll bar.

answered on 28 Aug 2017, 03:58 PM

Hello,

I tried to reproduce the reported problem with version 2017.2.711 (latest one) under the latest version of Google Chrome, but to no avail. For your convenience I recorded a video demonstrating my test which you can see at: https://www.screencast.com/t/NVPiStKLO.

Since the problem could be due to some custom CSS on your end, my advice is to examine the problematic page stylesheet as well as using the browser dev toolbar HTML inspector to find out which class or CSS property is enabling the scroller.

Yet another suggestion is to test the latest version of the control R2 2017 SP2.

If you need further assistance, please recreate the problem in a simple working project and send it via the attachment functionality of the support ticketing system.

Best regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.