Grid Width & Footer Rendering Issues

[Rob]

I am moving a web page with a RadGrid on it from an older app (v2009.1.527.35) to a more recent app (v2011.2.915.35).  They are 2 different VB.Net solutions.  I want to maintain the same look/style of the grid and it appears the grid width and footer have some rendering issues.  Attached (v2009.jpg) is the original appearance of the grid I need to replicate. Attached (v2011.jpg) displays the issues in the more recent version of the app.

The default Skin for RadGrids in the v2011 app is already using Vista with modifications to the Telerik_Styels.css.  v2009 also had a default skin using Vista.  I wanted to use a clean copy of the css that has .RadGrid_Vista so I copied all of .RadGrid_Vista from the v2011 skins folder, pasted into my Telerik_Styles.css, and renamed the class to .RadGrid_VistaSOS.  I also have a skin in v2011 to turn paging on in the footer and use the older paging icons.  This skin uses Skin "VistaSOS".

Here is my RadGrid markup:

<telerik:RadGrid runat="server" ID="grdSquareFootage" SkinID="dgSOS" OnNeedDataSource="Grid_NeedDataSource" OnItemDataBound="Grid_ItemDataBound" OnItemCommand="Grid_ItemCommand" OnDataBound="Grid_DataBound">
    <MasterTableView EditMode="InPlace" DataKeyNames="FiscalYear,LocationId,FamilyOfBusinessId" AllowPaging="true" AllowSorting="true" PageSize="10">
        <Columns>
            <telerik:GridEditCommandColumn UniqueName="UpdateButton" ButtonType="ImageButton" EditImageUrl="~/Images/Edit1.gif" />
            <telerik:GridButtonColumn CommandName="Delete" UniqueName="DeleteButton" ButtonType="ImageButton" ImageUrl="~/Images/Delete.gif" ConfirmText="Deleting this entry cannot be undone." Text="Delete" />
            <telerik:GridNumericColumn DataField="FiscalYear" ReadOnly="true" HeaderText="Year" ItemStyle-Width="60" />
            <telerik:GridNumericColumn DataField="LocationId" UniqueName="LocationId" ReadOnly="true" HeaderText="Store" ItemStyle-Width="60" />
            <telerik:GridNumericColumn DataField="FamilyOfBusinessId" UniqueName="FamilyOfBusinessId" ReadOnly="true" HeaderText="FOB" ItemStyle-Width="60" />
            <telerik:GridNumericColumn DataField="SquareFootage" ColumnEditorID="squareFootageEditor" HeaderText="Square Footage" ItemStyle-Width="60" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Here is my skin:

<telerik:RadGrid SkinID="dgSOS" runat="server" Skin="VistaSOS" AllowMultiRowEdit="True"
    AllowSorting="True" BorderColor="Black" GridLines="Both" Height="90%">
    <ClientSettings>
        <Scrolling UseStaticHeaders="True" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst">
        <ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Resizable="False" Visible="False" />
        <RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Visible="False" />
        <PagerStyle Mode="NextPrevAndNumeric" NextPageText="Next" PrevPageText="Previous" AlwaysVisible="true"
            PrevPageImageUrl="~/App_Themes/2011/Grid/PagingPrev.gif" NextPageImageUrl="~/App_Themes/2011/Grid/PagingNext.gif"
            FirstPageImageUrl="~/App_Themes/2011/Grid/PagingFirst.gif" LastPageImageUrl="~/App_Themes/2011/Grid/PagingLast.gif" />
        <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
            Font-Underline="False" Wrap="False" />
        <ItemStyle Wrap="false" />
        <AlternatingItemStyle Wrap="false" />
    </MasterTableView>
</telerik:RadGrid>

As I already stated, "VistaSOS" is just a clean copy of "Vista".  I need help getting the grid width to fill in wider and the page selector drop down is not rendering correctly. 

Thanks,
Rob

[Galin]

Hi Rob,

Based on the screenshots it seems only part of the Skin styles are applied. For example, the background of headers and footer and the color of borders are fine, but the padding of data cells and pager necessaries styles are gone. Therefore, could you check  again if you have replace the class RadGrid_Vista to RadGrid_VistaSOS in all CSS rules. You can use the "find and replace" feature.

Also, please note is more easier to override some styles on internal Skin than creating a new one.

Additional, in case the issue persists please start a formal support ticket and send the custom Skin that we can use to reproduce the case. Alternatively a live URL will help us as well.

Regards,
Galin
the Telerik team

[Rob]

The problem for this older app is the originally standardized theme was done in v2008 then after upgrading to v2011, an additional set of customized styles had to be applied to the standardized theme.  Now here I'm coming in with a page from an older version v2009 and need to make it v2011 compatible.  With all of the previous customizations in the standardized theme in combination with the styles from the other app, the grid footer was unable render properly.  My solution was to create a new theme just for this page an only make copies of the styles I really need from the standardized theme.  Case closed.