I want to freeze the column header, so that i set UseStaticHeaders=True.
But i found that the Group Header had alignment problem (please see attached screen capture).
Please help. Thanks
4 Answers, 1 is accepted
0
Hello,
Which browser you are using? Also could you provide a live URL where the issue can be observed so we can inspect it locally.
Additionally clarify if you are using the latest Telerik UI for ASP.NET AJAX version of the controls.
Regards,
Pavlina
Telerik
Which browser you are using? Also could you provide a live URL where the issue can be observed so we can inspect it locally.
Additionally clarify if you are using the latest Telerik UI for ASP.NET AJAX version of the controls.
Regards,
Pavlina
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Joe
Top achievements
Rank 1
answered on 20 Nov 2015, 01:57 AM
Hi, I had tried IE9, IE11, Firefox and Google Chrome. All of them had the same alignment problem (just like the attached screen capture)
I am using the latest telerik ui version
0
Joe
Top achievements
Rank 1
answered on 23 Nov 2015, 06:06 AM
Hi, i'm using the version 2015.3.1111.35.
code as follows:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Delivery.aspx.vb" Inherits="Project_Delivery" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
script
type
=
"text/javascript"
>
var rowid = 0
function RowSelected(sender, args) {
rowid = args.getDataKeyValue("DeliveryID")
}
</
script
>
<
style
type
=
"text/css"
>
* html .RadGrid .rgGroupHeader td div div
{
top:0.1em !important;
/*font-size:x-large !important;*/
padding-top: 2em;
height: 20em !important;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
asp:Panel
ID
=
"Panel1"
runat
=
"server"
CssClass
=
"subpageheader"
Width
=
"100%"
>
Delivery (Group by Order Form No.)
</
asp:Panel
>
<
telerik:RadToolBar
ID
=
"rtbMain"
runat
=
"server"
Width
=
"100%"
OnClientButtonClicking
=
"OnClientItemClickingHandler"
>
<
Items
>
<
telerik:RadToolBarButton
Value
=
"Add"
Text
=
"Add"
Width
=
"100px"
PostBack
=
"true"
CausesValidation
=
"false"
/>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
/>
<
telerik:RadToolBarButton
Value
=
"Edit"
Text
=
"Edit"
Width
=
"100px"
PostBack
=
"true"
CausesValidation
=
"false"
/>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
/>
<
telerik:RadToolBarButton
Value
=
"Delete"
Text
=
"Delete"
Width
=
"100px"
CausesValidation
=
"false"
PostBack
=
"true"
/>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
/>
<
telerik:RadToolBarButton
Value
=
"Refresh"
Text
=
"Refresh"
Width
=
"100px"
PostBack
=
"true"
CausesValidation
=
"false"
>
</
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
/>
<
telerik:RadToolBarButton
Value
=
"Excel"
Text
=
"Excel"
Width
=
"100px"
PostBack
=
"true"
CausesValidation
=
"false"
/>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
/>
<
telerik:RadToolBarButton
Value
=
"Copy"
Text
=
"Copy as New"
Width
=
"100px"
PostBack
=
"true"
CausesValidation
=
"false"
/>
<
telerik:RadToolBarButton
IsSeparator
=
"true"
></
telerik:RadToolBarButton
>
</
Items
>
</
telerik:RadToolBar
>
<
telerik:RadGrid
ID
=
"rgData"
runat
=
"server"
DataSourceID
=
"ldsDelivery"
AllowFilteringByColumn
=
"True"
AllowSorting
=
"True"
AutoGenerateColumns
=
"False"
GroupPanelPosition
=
"Top"
AllowPaging
=
"True"
PageSize
=
"30"
Width
=
"3000px"
Height
=
"800px"
>
<
ClientSettings
AllowRowsDragDrop
=
"true"
AllowColumnsReorder
=
"True"
AllowDragToGroup
=
"True"
ReorderColumnsOnClient
=
"true"
>
<
Selecting
AllowRowSelect
=
"True"
EnableDragToSelectRows
=
"false"
/>
<
Selecting
AllowRowSelect
=
"True"
/>
<
ClientEvents
OnRowSelected
=
"RowSelected"
/>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
<
MasterTableView
DataSourceID
=
"ldsDelivery"
DataKeyNames
=
"DeliveryID"
HeaderStyle-VerticalAlign
=
"Top"
AlternatingItemStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
HeaderStyle-HorizontalAlign
=
"Center"
>
<
GroupByExpressions
>
<
telerik:GridGroupByExpression
>
<
SelectFields
>
<
telerik:GridGroupByField
FieldAlias
=
"OrderFormNo"
FieldName
=
"OrderFormNo"
/>
<
telerik:GridGroupByField
FieldAlias
=
"Accumulatives"
Aggregate
=
"Sum"
FieldName
=
"Qty"
/>
</
SelectFields
>
<
GroupByFields
>
<
telerik:GridGroupByField
FieldAlias
=
"OrderFormNo"
FieldName
=
"OrderFormNo"
SortOrder
=
"Descending"
/>
</
GroupByFields
>
</
telerik:GridGroupByExpression
>
</
GroupByExpressions
>
<
GroupHeaderItemStyle
Height
=
"20px"
CssClass
=
"rgGroupHeader"
/>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"OrderFormNo"
FilterControlAltText
=
"Filter Concrete Order Form column"
HeaderText
=
"Concrete Order Form No"
SortExpression
=
"OrderFormNo"
UniqueName
=
"OrderFormNo"
>
<
HeaderStyle
Width
=
"150px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridDateTimeColumn
DataField
=
"DeliveryDate"
HeaderText
=
"Delivery Date"
FilterControlWidth
=
"110px"
SortExpression
=
"DeliveryDate"
PickerType
=
"DatePicker"
EnableTimeIndependentFiltering
=
"true"
DataFormatString
=
"{0:dd-MMM-yyyy}"
>
<
HeaderStyle
Width
=
"140px"
/>
</
telerik:GridDateTimeColumn
>
<
telerik:GridBoundColumn
DataField
=
"DocketID"
FilterControlAltText
=
"Filter Docket ID column"
HeaderText
=
"Delivery Docket No"
ReadOnly
=
"True"
SortExpression
=
"DocketID"
UniqueName
=
"DocketID"
>
<
ItemStyle
Width
=
"120px"
/>
<
HeaderStyle
Width
=
"120px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"PourID"
FilterControlAltText
=
"Filter Pour Location column"
HeaderText
=
"Pour ID"
ReadOnly
=
"True"
SortExpression
=
"PourID"
UniqueName
=
"PourID"
>
<
ItemStyle
Width
=
"120px"
/>
<
HeaderStyle
Width
=
"120px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"LocationCode"
FilterControlAltText
=
"Filter LocationCode column"
HeaderText
=
"Location Code"
ReadOnly
=
"True"
SortExpression
=
"LocationCode"
UniqueName
=
"LocationCode"
>
<
ItemStyle
Width
=
"100px"
/>
<
HeaderStyle
Width
=
"100px"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
asp:LinqDataSource
ID
=
"ldsDelivery"
runat
=
"server"
ContextTypeName
=
"dcConcreteDatabaseDataContext"
TableName
=
"view_DeliveryList2s"
OrderBy
=
"DeliveryDate"
>
</
asp:LinqDataSource
>
<
script
type
=
"text/javascript"
>
function OnClientItemClickingHandler(sender, args) {
var grid = $find("<%=rgData.ClientID%>");
var gridSelectedItems = grid.get_selectedItems();
var selectcount = gridSelectedItems.length;
var button = args.get_item();
if (button.get_value() == "Delete") {
if (selectcount == 0) {
alert('Please select an item first!');
eventArgs.set_cancel(true);
}
else {
if (confirm('Are you sure?') == false) {
eventArgs.set_cancel(true);
}
}
}
if (button.get_value() == "Edit") {
if (selectcount == 0) {
alert('Please select an item first!');
eventArgs.set_cancel(true);
}
}
if (button.get_value() == "Copy") {
if (selectcount == 0) {
alert('Please select an item first!');
eventArgs.set_cancel(true);
}
}
}
</
script
>
</
form
>
</
body
>
</
html
>
0
Hello,
Try to remove ItemStyle-Width from your code and see if the alignment issue is still there. Note that for setting column widths in the grid only HeaderStyle-Width property should be used.
Regards,
Pavlina
Telerik
Try to remove ItemStyle-Width from your code and see if the alignment issue is still there. Note that for setting column widths in the grid only HeaderStyle-Width property should be used.
Regards,
Pavlina
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items