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

ScrollingHeader grid column problem

3 Answers 104 Views

Grid

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

shunman asked on 27 Nov 2013, 01:22 AM

SC.png

Hello Telerik team.

I'm using telerik 2013.3.1114.40 version

Please look at this sample code. it's very simple code.
The problem is, if radgrid set scrolling header. header column width and data column width are not fit slightly.
I attached screenshots IE and chrome. please let me know any solutions.
thank you.

sample source link Downloading sample source here click me !!!!!!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGridOtherMembersStateList" runat="server" Width="100%"

OnItemDataBound="RadGridOtherMembersStateList_ItemDataBound">

<MasterTableView AutoGenerateColumns="false" AllowSorting="false" AllowPaging="false"

AllowNaturalSort="false" AllowCustomPaging="false" AllowCustomSorting="false"

CommandItemDisplay="None" TableLayout="Auto">

<Columns>

<telerik:GridHyperLinkColumn HeaderText="State" DataTextField="StateName" UniqueName="StateName"

ItemStyle-HorizontalAlign="Left">

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn HeaderText="Count" DataField="StateCount" UniqueName="StateCount"

HeaderStyle-Width="100" HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Right">

</telerik:GridBoundColumn>

</Columns>

<NoRecordsTemplate>

<div class="divNoRecordsTemplateLayout">

No records found.

</div>

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

3 Answers, 1 is accepted

answered on 29 Nov 2013, 04:12 PM

sample.zip

Hi Shunman,

I tested the provided code in IE and chrome and it is working properly. You can find my test page attached and test it on your to see how it goes. The only change in the code is that I set px width for the second column and TableLayout is Fixed, but there is no difference in the behavior.

Regards,
Pavlina
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 02 Dec 2013, 12:23 AM

TelerikExample.png

Hello, Pavlina

Thank you for reply.

Unfortunately, Your example source code still has problem.

This problem only appears while scrollbar is showing at grid.

I can find this symptom both IE and Chrome browser

I attach screenshot of this issue from your example code.

Accepted