I'm using a RadGrid and in this grid there are buttons with a ImageUrl . and in IE8 I have some problems displaying them correctly (horizontally) and not like this
So I thought i should change the width of the button but then something happen that i really dont know why this happening ... I have just change the width from 20px to 30px
Can someone please help me how to change this that it is normal like in every other browser (horizontally the both images ...
My code
<telerik:RadGrid ID="rgGrid" runat="server" DataSourceID="SqlDataSource1"
AllowSorting="True" AllowPaging="True" PageSize="20"
AllowFilteringByColumn="True" ShowStatusBar="True" Width="100%"
CellSpacing="0" GridLines="None" OnItemCommand="rgGrid_ItemCommand">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrganisationId">
<NoRecordsTemplate>
Can't find Organisations to display
</NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn DataField="OrganisationId" DataType="System.Int32"
FilterControlAltText="Filter OrganisationId column"
HeaderText="OrganisationId" ReadOnly="True" SortExpression="OrganisationId"
UniqueName="OrganisationId" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="OrganisationName" FilterControlAltText="Filter
OrganisationName column" HeaderText="Name" ItemStyle-Width="60px"
SortExpression="OrganisationName" UniqueName="OrganisationName">
<ItemStyle Width="60px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CountryName" FilterControlAltText="Filter
CountryName column" HeaderText="Country" ItemStyle-Width="60px"
SortExpression="CountryName" UniqueName="CountryName">
<ItemStyle Width="60px" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="DeleteColumn" ItemStyle-Width="20px"
AllowFiltering="false"ItemStyle-HorizontalAlign="Right" >
<ItemTemplate>
<telerik:RadButton ID="btnEdit" CommandName="Edit" runat="server"
Width="30px" ToolTip="View Details" Height="20px"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "OrganisationId")%>'>
<Image ImageUrl="~/Resources/Images/Grid/edit-app.png"
IsBackgroundImage="true" />
</telerik:RadButton>
<telerik:RadButton ID="btnDelete" CommandName="Delete" runat="server"
Width="20px" ToolTip="Delete Vacation"
Height="20px" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "OrganisationId")%>'>
<Image ImageUrl="~/Resources/Images/Grid/delete-app.png"
IsBackgroundImage="true" />
</telerik:RadButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
Thanks for help ans fast answer !!
Give a class to image first:
<Image ImageUrl="~/Resources/Images/Grid/edit-app.png"
IsBackgroundImage="true" CssClass="someclass" />
Add css
.someclass {
background-repeat: no-repeat;
}
as it is rendered as background image.
Related
I have asp:GridView. I can edit all columns without problems, except this one:
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="hyperlinkEdocs" runat="server" Target="HyperLink"
HeaderText="Dopolnitve (eDocs)"
NavigateUrl='<%# String.Format("http://{0}", Eval("CUSTOMER").ToString()) %>'
Text='<%# Eval("CUSTOMER") %>'></asp:HyperLink>
</ItemTemplate>
I am editing columns by click on 'Edit' link (this triggers that columns content is displayed in a text boxes).
How can I make this column editable, so I will be able to edit and update hyperlink in column?
<asp:GridView runat="server" ID="gvrecords" AutoGenerateColumns="false"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" DataKeyNames="UserId">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Email" HeaderText="Email" />
</Columns>
</asp:GridView
I'm not 100% sure what you are trying to do because I can't see your code behind but why don't you use an edit item template?
<asp:TemplateField HeaderStyle-Width="100px" HeaderText = "ABC">
<ItemTemplate>
<asp:Label ID="label" runat="server"
Text='<%# Eval("id")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="textbox1" Width="100px" Height="50px" runat="server"
Text='<%# Eval("id")%>'></asp:TextBox>
</EditItemTemplate>
<HeaderStyle Width="80px" HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
Edit link click open textbox
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
grd_view();
}
I have a gridview whose data's are coming from the database. I also want to show the paging in the gridview. I want the paging as below mentioned in the image.
Image. As I have no idea from where to start this, can you let me know any helpful links So that I can start developing it. Also please see the code for your reference:-
<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" AutoGenerateColumns="false" OnDataBound="grdCSRPageData_DataBound" PageSize="5" AllowPaging="true" OnPageIndexChanging="grdCSRPageData_PageIndexChanging" OnRowCommand="grdCSRPageData_RowCommand">
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField ItemStyle-Width="30">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" />
<asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" />
<asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" />
<asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" />
<asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" />
<asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" runat="server" ImageUrl="~/images/edit.png" Width="15" Height="15" />
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="DeleteRow" CommandArgument="<%# Eval("Id") %>" OnClientClick="return confirm('Are you sure to delete?');" />
</span>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="btnUpdate" Text="Update" runat="server" CommandName="Update" />
<asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Right now, I have only this much of code for PageIndexChanging, if you need anything else let me know
protected void grdCSRPageData_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdCSRPageData.PageIndex = e.NewPageIndex;
grdCSRPageData.DataBind();
}
You should write C# code on event 'grdCSRPageData_PageIndexChanging' same as 'grdCSRPageData_DataBound'
I can't get the value. What I do get is a blank value or videoName = " ". How can I get the value of videoName? In the rowdeleting event, I am using Rows(e.Index).Cells(2).Text to get the value but it is blank. Is there another way to get the field, "videoname"?
Protected Sub GridView1_RowDeleting(sender As Object, e As GridViewDeleteEventArgs)
Dim videoName As String = gridview1.Rows(e.RowIndex).Cells(2).Text
Dim val As String = videoName
If File.Exists(HttpContext.Current.Server.MapPath(HttpContext.Current.Request.ApplicationPath) + "\contents\published" + videoName) Then
File.Delete(HttpContext.Current.Server.MapPath(HttpContext.Current.Request.ApplicationPath) + "\contents\published" + videoName)
End If
End Sub
<asp:GridView id="GridView1" runat="server" Width="680px" GridLines="None" DataSourceID="SqlDataSource2" DataKeyNames="id" CellSpacing="1" CellPadding="3" BorderWidth="2px" BorderStyle="Ridge" BorderColor="White" AutoGenerateColumns="False"
AllowPaging="True" AllowSorting="True" EmptyDataText="No Record Found" OnRowDeleting="GridView1_RowDeleting" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="9" >
<Columns>
<asp:BoundField HeaderText="Id" DataField="Id" ReadOnly="true" visible="false" />
<asp:BoundField HeaderText="CustomerID" DataField="CustomerID" ReadOnly="true" visible="false"/>
<asp:BoundField HeaderText="VideoName" DataField="VideoName" ReadOnly="true" visible="false"/>
<asp:TemplateField>
<HeaderStyle Width="5%" />
<ItemStyle Width="5%" />
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" Runat="server" OnClientClick="return confirm('Are you sure you want to delete this video?');"
CommandName="Delete">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Clip" SortExpression="ThumbName">
<HeaderStyle Width="5%" />
<ItemStyle Width="5%" />
<ItemTemplate>
<div style="margin:2px; width:133px; background-color:rgb(68,68,68); -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow:5px 5px 5px rgba(68,68,68,0.6);box-shadow:5px 5px 5px rgba(68,68,68,0.6); zoom: 1;">
<asp:hyperlink id="link" NavigateUrl='<%# Eval("VideoName", "~/Test/playVideos2.aspx?FileName={0}&Thumb=" + Eval("ThumbName") + "&Duration=" + Eval("Duration"))%>' runat="server">
<asp:image id="img" ImageUrl='<%# String.Format("~/contents/thumbs/{0}",Eval("ThumbName"))%>' width="130" height="80" runat="server" />
</asp:hyperlink>
<asp:Label ID="lblMovieName" Text='<%#Bind("VideoName") %>' runat="server"></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date">
<HeaderStyle Width="15%" />
<ItemStyle Width="15%" />
<ItemTemplate>
<asp:Label ID="date" runat="server" Text='<%# Bind("DateCreated") %>'></asp:Label><br />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle Width="75%" />
<ItemStyle Width="75%" />
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
</asp:GridView>
This is prone to erros when you add or delete a column from gridview in future your code would fail again. I suggest you use a label inside template field for your MovieName field & use FindControl to find your label.
Aspx
<asp:TemplateField HeaderText="Movie Name" >
<ItemTemplate>
<asp:Label ID="lblMovieName" Text='<%#Bind("MovieName") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Code behind
protected void gvCustomer_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
Label lblMovieName = gvCustomer.Rows[e.RowIndex].FindControl("yourLableControlName") as Label;
// Perform your delete
}
Updated
I found that in your code you have the movieName Visibleproperty set to false. This will prevent it from rendering on page. You can either store values in DataKeys or remove visible=false to fetch desired value.
I have a gridview which is displaying products information (code below)
now I would like to limit description field so that only the first few is shown if there is a long description and also resize the image to fit in the image column (and making the image, description column a bit bigger than the others
Thanks
<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductId" OnRowDeleting="gvProducts_RowDeleting" OnSelectedIndexChanged="gvProducts_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="Productname" HeaderText="Name" />
<asp:BoundField DataField="ProductDescription" HeaderText="Description" />
<asp:BoundField DataField="ProductSupplier" HeaderText="Supplier" />
<asp:BoundField DataField="ProductCategory" HeaderText="Category" />
<asp:BoundField DataField="ProductSubCategory" HeaderText="SubCategory" />
<asp:BoundField DataField="ProductVAT" HeaderText="VAT" />
<asp:BoundField DataField="ProductStock" HeaderText="Stock" />
<asp:ImageField DataImageUrlField="ProductImage" HeaderText="Image"/>
<asp:CheckBoxField DataField="ProductActive" HeaderText="Active" />
<asp:CommandField ButtonType="Button" ShowDeleteButton="True" />
</Columns>
<SelectedRowStyle CssClass="selectedrow" />
</asp:GridView>
Using css we can limit the description text to be displayed. Like this....
<asp:GridView ID="gvProducts" runat="server" CssClass="GridCSS" AutoGenerateColumns="False" DataKeyNames="ProductId" OnRowDeleting="gvProducts_RowDeleting" OnSelectedIndexChanged="gvProducts_SelectedIndexChanged">
<Columns>
-----------------------
-----------
---------
<asp:BoundField DataField="ProductDescription" HeaderText="Description" ItemStyle-CssClass="limittext" />
------------------
---------
-------------
</Columns>
</asp:GridView>
CSS style:
.GridCSS {
table-layout:fixed;
width:100%;
}
.GridCSS .limittext{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can use mask for fw 4.5 or some external pluging lika Jquery Mask.
or You can make them Template Item and put some code like <%# Eval("ProductDescription").SubString(0,50) %>
If you're working with MVC, you can alter your GridView's data in your controller before binding it to GW. If you're not using MVC, the only thing I can offer is: in your RowDataBound event, check if description exceeds your defined max. chars and then truncate it.
Not a proper answer I know, but it may give you a few ideas. Can't provide code right now as I'm at work, but I'll check later if there is no answer to your post.
For further reading:
http://www.dotnetspider.com/resources/43687-How-show-formatted-html-content-grid-view.aspx
http://forums.asp.net/t/1391922.aspx/1
Try this
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<%# Eval("ProductDescription").ToString().Length > 50 ? Eval("ProductDescription").ToString().Substring(0,50)+"..." : Eval("ProductDescription").ToString() %>
</ItemTemplate>
</asp:TemplateField>
If text is more than 50 characters, display first 50, otherwise, display the whole text.
Another option is return a shortDescription from the database or from the Product object
public string ShortDescription
{
get
{
return ProductDescription.Length > 50 ? ProductDescription.Substring(0,50) : ProductDescription;
}
}
<table style="table-layout: fixed">
<tr>
<td>
<telerik:RadGrid ID="radGVEmployee" runat="server" AllowSorting="True" GridLines="None"
AutoGenerateColumns="False" CellSpacing="0" OnNeedDataSource="radGVEmployee_NeedDataSource"
Visible="True" OnSortCommand="radGVEmployee_SortCommand" AllowPaging="true" OnPageIndexChanged="radGVEmployee_PageIndexChanged"
Width="900px" OnItemDataBound="radGVEmployee_ItemDataBound" OnItemCommand="radGVEmployee_ItemCommand"
PageSize="5">
<FilterMenu EnableTheming="True">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
<GroupingSettings CaseSensitive="False" />
<MasterTableView DataKeyNames="UsrId" AllowFilteringByColumn="true" TableLayout="Fixed"
Visible="true" AllowMultiColumnSorting="false">
<NoRecordsTemplate>
<div style="width: 700px;" align="center">
There is No Data to display</div>
</NoRecordsTemplate>
<CommandItemSettings ExportToPdfText="Export to PDF" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn SortExpression="UserName" DataField="UserName" HeaderText="UserName"
HeaderStyle-Width="60px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmUserName" runat="server" Text='<%# Eval("UserName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="FullName" DataField="FullName" HeaderText="FullName"
HeaderStyle-Width="60px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmFullName" runat="server" Text='<%# Eval("FullName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="MobileNo" DataField="MobileNo" HeaderText="MobileNo"
HeaderStyle-Width="40px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmMobileNo" runat="server" Text='<%# Eval("MobileNo") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="CompanyName" DataField="CompanyName"
HeaderText="CompanyName" HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmCompanyName" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="BranchName" DataField="BranchName" HeaderText="BranchName"
HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmBranchName" runat="server" Text='<%# Eval("BranchName") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="Designation" DataField="Designation"
HeaderText="Designation" HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblItmDesignation" runat="server" Text='<%# Eval("Designation") %>'></asp:Label>
<asp:Label ID="lblItmLockStatus" runat="server" Text='<%# Eval("LockStatus") %>'
Visible="false"></asp:Label>
<asp:Label ID="lblItmUserStatus" runat="server" Text='<%# Eval("UserStatus") %>'
Visible="false"></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn SortExpression="UserImage" DataField="UserImage" HeaderText="UserImage"
HeaderStyle-Width="50px" FilterControlWidth="75%" HeaderStyle-HorizontalAlign="Center"
AllowFiltering="false">
<ItemTemplate>
<asp:Image ID="lblUserImage" runat="server" ImageUrl='<%#Eval("ImageName")!=DBNull.Value?
System.Configuration.ConfigurationManager.AppSettings["AzureImagePath"]+Eval("ImageName"):System.Configuration.ConfigurationManager.AppSettings["UserImagePath"]+"profile-empty-head.gif"%>'
Height="100px" Width="90px" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn AllowFiltering="false" DataField="Actions" HeaderText="Actions"
HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center">
<%--OnClientClick='radconfirm("Are you sure you want to Change this LockStatus?", ClientGridCallback,300,150); return false;' --%>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgLockStatus" ImageUrl="~/App_Themes/DefaultClient/images/unlock.png"
CommandName="ChangeLockStatus" CommandArgument='<%# Eval("UsrId") %>' ToolTip="UserLockStatus"
AlternateText="LockStatus" OnClientClick="return blockConfirm('Are you sure you want to Change Lock Status?', event, 340, 150,'','Change Lock Status')" />
<asp:ImageButton runat="server" ID="imgUserStatus" ImageUrl="~/App_Themes/DefaultClient/images/select.png"
CommandName="ChangeUserStatus" CommandArgument='<%# Eval("UsrId") %>' ToolTip="UserActivationStatus"
AlternateText="UserActivationStatus" OnClientClick="return blockConfirm('Are you sure you want to Change Activation Status?', event, 340, 150,'','Change Activation Status')" />
<asp:ImageButton runat="server" ID="imgResetPassword" ImageUrl="~/App_Themes/DefaultClient/images/logoff.png"
CommandName="ResetPassword" CommandArgument='<%# Eval("UsrId") %>' ToolTip="ResetPassword"
Width="22px" Height="22px" AlternateText="ResetPassword" OnClientClick="return blockConfirm('Are you sure you want to Reset Password?', event, 340, 150,'','Reset Password')" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Wrap="false"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<%-- <telerik:GridButtonColumn ConfirmText="Are you sure you want to Change LockStatus ?<br /><br /><br />"
ConfirmDialogType="RadWindow" HeaderStyle-Width="15px" ConfirmDialogHeight="150px"
HeaderText="LockStatus" HeaderStyle-HorizontalAlign="Center" CommandName="ChangeLockStatus"
ButtonType="ImageButton" ImageUrl="~/App_Themes/DefaultClient/images/unlock.png"
ItemStyle-HorizontalAlign="Center" ConfirmTitle="Delete Currency" UniqueName="ChangeLockStatus">
</telerik:GridButtonColumn>
<telerik:GridButtonColumn ConfirmText="Are you sure you want to Change ActivationStatus ?<br /><br /><br />"
ConfirmDialogType="RadWindow" HeaderStyle-Width="15px" ConfirmDialogHeight="150px"
HeaderText="ActivationStatus" HeaderStyle-HorizontalAlign="Center" CommandName="ChangeUserStatus"
ButtonType="ImageButton" ImageUrl="~/App_Themes/DefaultClient/images/unlock.png"
ItemStyle-HorizontalAlign="Center" ConfirmTitle="Delete Currency" UniqueName="ChangeUserStatus">
</telerik:GridButtonColumn>--%>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<GroupingSettings CaseSensitive="False" />
<ClientSettings>
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
</telerik:RadGrid>
</td>
</tr>
</table>
Try this ..........
The group headers in my RadGrid align properly when I don't use static headers, but when I do, they get out of alignment. Can't seem to find anything that fixes this. Relevant code, unimportant details omitted:
<telerik:RadGrid runat="server" ID="RadGrid1" GridLines="None" AllowSorting="True" AutoGenerateColumns="False" AllowMultiRowSelection="True" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView DataKeyNames="PageID">
<GroupHeaderTemplate>
<asp:CheckBox runat="server" ID="cbGroupHeader"/>
<asp:Label runat="server" ID="lblGroupHeader" Text='<%# (((GridGroupHeaderItem)Container).AggregatesValues["Group"]) %>'/>
</GroupHeaderTemplate>
<Columns>
<telerik:GridClientSelectColumn HeaderStyle-Width="2.5%"/>
<telerik:GridBoundColumn DataField="PageName" HeaderText="Page Name" UniqueName="PageName"/>
<telerik:GridBoundColumn DataField="PageID" Display="False" ReadOnly="True" UniqueName="PageID"
...
</Columns>
<GroupByExpressions>
<telerik:GridGroupByExpression>
<GroupByFields>
<telerik:GridGroupByField FieldName="Order"/>
</GroupByFields>
<SelectFields>
<telerik:GridGroupByField FieldName="Group"/>
</SelectFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="True" AllowColumnsReorder="True" ReorderColumnsOnClient="False">
<Selecting AllowRowSelect="True"/>
<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="False" ClipCellContentOnResize="True" EnableRealTimeResize="True" AllowResizeToFit="True"/>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"/>
</ClientSettings>
</telerik:radGrid>
Pictures (imgur):
UseStaticHeaders="False"
UseStaticHeaders="True"
I just ran into a similar issue.
The site I'm working has has radGrids, which are re-sized when the browser window is re-sized. The radGrid header looked normal when the browser window size was small, but became misaligned as the browser size increased.
I have UseStaticHeaders set to "true" and TableLayout set to "fixed". I'm also using specific Header Widths instead of percentages.
When re-sizing radGrids, its best to leave off the width of one column. I noticed this wasn't the case on the grid I was working on. When I removed one column's width, the headers immediately aligned correctly.
I'm not sure if this solution will work for you, but it worked for me.
UPDATE
Here's the markup for one of the grid's I've been working on:
<telerik:RadGrid ID="grdItems" runat="server" OnNeedDataSource="grdItems_NeedDataSource" AutoGenerateColumns="False" Width="100%" Height="100%"
GridLines="None" EnableOutsideScripts="True" PagerStyle-AlwaysVisible="true" PagerStyle-Mode="NextPrevAndNumeric" AllowPaging="true" PageSize="250"
AllowSorting="true" OnItemCreated="grdItems_ItemCreated" OnItemCommand="grdItems_ItemCommand" OnPreRender="grdItems_PreRender" TabIndex="17"
OnItemDataBound="grdItems_ItemDataBound" >
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="reorder">
<Selecting AllowRowSelect="False" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize="True" ClipCellContentOnResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="true" />
</ClientSettings>
<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="ei_pk" DataKeyNames="ei_pk,ei_eco_fk" AllowAutomaticInserts="True" GridLines="None" TableLayout="fixed" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
<CommandItemTemplate>
<asp:Image ID="AddItem" runat="server" ImageUrl="~/RadControls/Grid/Skins/Office2007/AddRecord.gif" AlternateText="Add Item" /><asp:Label ID="lblAddItem" runat="server" Text="Add Item" />
</CommandItemTemplate>
<Columns>
<telerik:GridTemplateColumn UniqueName="Edit" Visible="False" Resizable="false" Reorderable="false">
<ItemTemplate>
<asp:HyperLink ID="EditLink" runat="server" Text="Edit" ImageUrl="../RadControls/Grid/Skins/Office2007/Edit.gif" />
</ItemTemplate>
<HeaderStyle Width="20" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn Resizable="false" Reorderable="false" ConfirmText="Are you sure you want to delete this item?" UniqueName="Delete" CommandName="Delete" Visible="False" ButtonType="ImageButton" ImageUrl="../RadControls/Grid/Skins/Office2007/Delete.gif">
<HeaderStyle Width="20"/>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn HeaderText="Trade" DataField="ftr_description" UniqueName="ftr_description" />
<telerik:GridBoundColumn HeaderText="Cost Type" DataField="combined_itemType" UniqueName="combined_itemType" />
<telerik:GridBoundColumn HeaderText="Est. Type" DataField="etp_code" UniqueName="etp_code" />
<telerik:GridBoundColumn HeaderText="Item Code" DataField="combined_code" UniqueName="combined_code" />
<telerik:GridBoundColumn HeaderText="Quantity" DataField="ei_quantity" UniqueName="ei_quantity">
<HeaderStyle Width="50" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Unit Cost" DataField="ei_unitCostworking" UniqueName="ei_unitCostworking" >
<HeaderStyle Width="75" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Total Cost" DataField="ei_extendedCostWorking" UniqueName="ei_extendedCostWorking" DataFormatString="{0:#0.00}">
<HeaderStyle Width="80" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Budget" DataField="ei_budgetworking" UniqueName="ei_budgetworking">
<HeaderStyle Width="80" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridHyperLinkColumn HeaderText="Change Order" DataTextField="eco_number" UniqueName="eco_number" DataNavigateUrlFields="eco_number" SortExpression="eco_number">
<HeaderStyle Width="104" />
</telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>