Hey Folks. Could use some helpful advice and direction.
We're in the process of migrating to the new ajax controls. We currently have a file structure setup where we tell the classic controls which directory holds all the skin files. This has to change for the ajax controls but until we setup a way to handle the skins for the ajax controls, I need a way to use my own skin for the grid in the meantime without having to change or create a new file structure.
Another employee here found a way to overwrite an existing embedded telerik skin.
He applied the office 2007 skin and then, in the body tag temporarily for now, overwrote some CSS for this embedded skin.
I've tried to emulate this. It works on initial load but I'm having some problems and I am doing some things a little differently from the app that I'm using as a model.
First of all, my grid is inside an Update Panel in order to support ajax. One of the main aspects of my screen is having the user click an edit/view button which is stationed in column one of each row. When this is clicked I use a modal popup extender to show a dialog that allows the user to do some things.
The main problem here is the ajax postback. Whenever an ajax postback occurs, even when I click the grid filter icon or the grid refresh, everything is reset. The skin reverts to the blue office 2007 default skin and the grid is resized to the original size. I have javascript that resizes the grid when the browser is resized.
I need a way to cancel these updates on the ajax postback or a way to keep them up to date when postbacks occur. Can anyone offer any help?
Here's some of the markup using version 2008.2.1001.35 of the Ajax controls.
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional" > |
<Triggers> |
<asp:AsyncPostBackTrigger ControlID="MyGrid" /> |
<asp:AsyncPostBackTrigger ControlID="btnActivate"/> |
</Triggers> |
<ContentTemplate> |
<telerik:RadGrid ID="MyGrid" Skin="Office2007" |
GridLines="None" |
runat="server" |
PageSize="15" |
AllowPaging="True" |
AllowSorting="True" |
ShowGroupPanel="False" |
AutoGenerateColumns="False" |
<MasterTableView CommandItemDisplay="Top" |
TableLayout="Fixed" |
<Columns> |
<telerik:GridTemplateColumn UniqueName="EditColumn" AllowFiltering="False" Groupable="False"> |
<ItemTemplate> |
<asp:ImageButton CausesValidation="false" ID="btnEdit" CommandName="Edit" OnClick="btnEdit_Click" runat="server" /> |
</ItemTemplate> |
</Columns> |
<CommandItemTemplate> |
<asp:LinkButton ID="lbRefresh" runat="server" CommandName="RebindGrid" ToolTip="Refresh"> <asp:Image ID="imgRefresh" runat="server" AlternateText="Refresh" ImageUrl="../Images/Reload.gif" /> |
</asp:LinkButton> |
<asp:LinkButton ID="lbFilter" runat="server" CommandName="ToggleFilter" ToolTip="Filter"> <asp:Image ID="imgFilter" runat="server" AlternateText="Filter" ImageUrl="../Images/Filter.gif" /> |
</asp:LinkButton> |
</CommandItemTemplate> |
</MasterTableView> |
<ClientSettings> |
<Resizing AllowColumnResize="true" /> |
<Scrolling UseStaticHeaders="true" AllowScroll="true" ScrollHeight="100%" /> |
</ClientSettings> |
</telerik:RadGrid> |
</ContentTemplate> |
</asp:UpdatePanel> |
Here's the CSS that I'm using to overwrite the Office 2007 skin. I'm putting this in the body tag. Why does this get reset on ajax postback?
<style type="text/css"> |
.RadGrid |
{ |
background:#FFFFFF; |
border:1px solid #cac9b9; |
color:#333; |
outline:none; /* Firefo dashed outline when interacting with the DOM table */ |
zoom:1; /* IE6 dangles the scrollbars off the left side */ |
} |
.RadGrid table thead th |
{ |
background:none; |
border-color:#acacac; |
border-bottom:none; |
} |
.RadGrid table thead th { padding-top:0; padding-bottom:0; } |
.GridHeaderDiv_Office2007 |
{ |
background:#e1decd url(images/gray-bg.gif) repeat-x; |
border-bottom:1px solid #acacac; |
} |
#MainGrid .GridHeaderDiv_Office2007 |
{ |
padding-right:16px; |
width:auto !important; |
} |
.GridHeaderDiv_Office2007 table thead tr th { border-left-width:0; border-right-width:1px; } |
.GridPager_Office2007 { background:#efecdf url(images/gray-bg.gif) repeat-x; } |
.GridPager_Office2007 td { border-top-color:#acacac; } |
.RadMenu_Vista .rmLeftImage { left:5px; } |
.GridDataDiv_Office2007 table tbody tr td { border-color:#e1e6f0; } |
</style> |
Here's some sample javascript I'm using.
function pageLoad() |
{ |
sizeGridToViewport(); |
} |
function sizeGridToViewport() { |
var height = $telerik.getClientBounds().height; |
if (height != arguments.callee.lastValue) |
{ |
arguments.callee.lastValue = height; |
var dataDiv = $get('MyGrid_GridData'), |
display = dataDiv.style.display; |
dataDiv.style.display = 'none'; // removes thing to size from the document flow |
dataDiv.style.height = height - document.forms[0].offsetHeight - 30 + 'px'; |
dataDiv.style.display = display; // reset |
} |
} |
// Expand grid to fit window size |
Sys.Application.add_init(function() { $addHandler(window, 'resize', sizeGridToViewport) }); |