Skinning and resizing the Grid

8 posts, 1 answers
  1. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 09 Dec 2008 Link to this post

    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) });  
     

     

  2. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 09 Dec 2008 Link to this post

    Cripes. I'm told the grid redraws itself completely on postback which causes everything I've done to reset.
    If I resize the grid every postback, I'm told I'll get an annoying flicker.
    It seems like there's nothing I can do about the skin except for going all client-side.

    Any thoughts?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 10 Dec 2008 Link to this post

    Hi Matt,

    First, putting CSS styles in the <body> is not correct, you should place them in the <head> or in an external CSS file.

    As for the RadGrid resizing, please read my answer at

    http://www.telerik.com/community/forums/aspnet/grid/client-side-settings-help.aspx

    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 10 Dec 2008 Link to this post

    Hey Dimo.
    Thanks for the reply.

    If I place the CSS inside the Head tag, my styles don't get applied. If I place the styles in the body then the telrik embedded styles get assigned first and then my styles get overwritten but then get reset after a post back. This is a hack. Supposed to be temporary until we figure out a way to suppor custom skins for the ajax controls, which means changing the skins file structure.

    The resizing references you suggested are pretty good. I can get that to comply in IE but I have to decrease the percentage. 100% is too much and some of the grid is getting cut off.

    This, however, is not working in Firefox and I'm not sure why.

    Here's what I'm trying.
     For the Update Panel CSS, I initially tried #<%=MyUpdatePanel.ClientID%>
    but doing that caused the following error


    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

     
    Therefore I changed it to #<%#MyUpdatePanel.ClientID%> 
    Can anyone suggest a way to get this to work in Fire Fox?

        <style type="text/css">  
                html  
                {  
                    overflow:auto;  
                }  
     
                html,  
                body,  
                form  
                {  
                    margin:0;  
                    height:94%;  
                }  
                  
                #<%#MyUpdatePanel.ClientID%> 
                {  
                    margin:0;  
                    height:100%;  
                }  
        </style> 

    In addition, isolating the CSS individually for the html, body and form has different results.

                html     
                {     
                    overflow:auto;    
                    height=100%;   
                }
        
       
                body   
       
                {     
                    margin:0;     
                    height:100%;     
                }    
     
                form{  
                    height:85%;  
                }   
                     
                #<%#MyUpdatePanel.ClientID%>    
                {     
                    margin:0;     
                    height:100%;     
                }     
     

    The Grid markup.

            <asp:UpdatePanel ID="UpdatePanelUnitGrid" runat="server" UpdateMode="Conditional"  > 
              
              
                <ContentTemplate> 
                          
                    <telerik:RadGrid    ID="TheGrid"   
                                                Width="100%" 
                                                Height="100%" 
                                                EnableEmbeddedSkins="true" 
                                                Skin="Office2007" 
                                                GridLines="None" 
                                                runat="server" 
                                                PageSize="50"   
                                                AllowPaging="True"   
                                                AllowSorting="True"   
                                                ShowGroupPanel="False"   
                                                AutoGenerateColumns="False" > 
                                                  
                                <MasterTableView  CommandItemDisplay="Top">  
     
                                    <Columns> 
                                        <telerik:GridTemplateColumn UniqueName="EditColumn" AllowFiltering="False" Groupable="False">  
                                            <ItemTemplate> 
                                                <asp:ImageButton CausesValidation="false" ID="btnEdit" CommandName="EditUnitMetadata" OnClick="btnEdit_Click" runat="server" ImageUrl="../Images/edit.gif" CssClass="pointer" AlternateText="<%$ Resources:Default, EDIT_UNIT_METADATA %>" /> 
                                            </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> 

    Thanks a lot.
  6. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 10 Dec 2008 Link to this post

    Hi Matt,

    Please place the styles in the <head> and increase their specificity in order to make them override the embedded skins:

    http://blogs.telerik.com/dimodimov/posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx


    In order to prevent the codeblock error, please use telerik:RadCodeBlock around the <style> tag, as described here:

    http://www.telerik.com/help/aspnet-ajax/troubleshooting.html


    If you are using non-100% heights for nested element, it is expected that the layout will be different from what you expect. This is because setting

    html,
    body,
    form
    {
        height : 90% ;
    }

    will cause the form to have a 90% * 90% * 90% which is 72.9%.


    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 10 Dec 2008 Link to this post

    Very cool.
    Thanks a lot. I appreciate the help, Dimo.
    The telerik rad code block stuff seems to have solved the Firefox resizing problem. Firefox must not like the <#% %> syntax for CSS.
  8. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 10 Dec 2008 Link to this post

    Just one more question.

    Concerning Specificity in CSS.

    When working with different controls and different styles, how do I know how to provide more specificity? How would I know when to specifiy div or something else?

    For example

    In the case of .GridRow_Default2006 td would I place td in front of .GridRow_Default?

    What about all the combo box classes?

    Please advise. Thanks.

    Thanks.
  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 11 Dec 2008 Link to this post

    Hello Matt,

    The easiest and fastest way to get familiar with a web control's HTML and CSS structure is to use Firebug for Firefox. Alternatively, you can use Web Developer Toolbar for IE, but it's not that convenient.

    For most controls we also provide help articles related to this topic, for example:

    http://www.telerik.com/help/aspnet-ajax/calendar_appearanceunderstandingtheskincssfile.html

    http://www.telerik.com/help/aspnet-ajax/calendar_appearancecssskinfileselectors.html

    Look for these in each control's Appearance/Styling help section.


    If you can't use browser tools, you can review the non-embedded versions of RadControls skins. They are provided in the /Skins/ subfolder of your RadControls for ASP.NET AJAX location. After seeing a CSS class there, you can see to what element it is applied to by viewing the web page HTML output.


    Best wishes,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017