[Solved] Problem with styling on RadComboBox in custom CommandItemTemplate

[Thomas]

(The whole escaping issue in FF3.1 is really, really annoying.)
One more time. I'm running into an issue whereby the styles from the skin of the RadGrid are interferring with a RadComboBox located in a custom CommandItemTemplate. I have the stylesheetTheme set to my Theme name in the web.config file (i.e., I have it set to Default and I have a Theme called Default). I have a screenshot but am not sure how to post it.

Here are the relevant skins located in a .skin file in my Theme directory:

<telerik:RadGrid runat="server" SkinID="NonPagingGrid"
    Skin="Web20"
    AllowPaging="false"
    AllowSorting="true"
    AutoGenerateColumns="false"
    GridLines="None"
    ShowStatusBar="true"
    SortingSettings-EnableSkinSortStyles="false"
    Width="100%">
    <StatusBarSettings LoadingText="Loading..." ReadyText="Ready" />
    <MasterTableView
        AllowMultiColumnSorting="true"
        AllowNaturalSort="true"
        AllowSorting="true"
        NoMasterRecordsText=""
        ShowHeader="true"
        ShowHeadersWhenNoRecords="true"
        TableLayout="Fixed"
        Width="100%">
        <NoRecordsTemplate>
            <div style="text-align:left;padding-left:15px;padding-top:5px;">No matching records were found.</div>
        </NoRecordsTemplate>
    </MasterTableView>
    <ClientSettings
        AllowColumnsReorder="true"
        AllowGroupExpandCollapse="true"
        AllowKeyboardNavigation="true"
        ClientEvents-OnRowCreated="RowCreated">
        <ClientEvents
           OnGridCreated="AutoFitGridHeight" />
        <Resizing
            AllowColumnResize="true"
            EnableRealTimeResize="true" />
        <Scrolling
            AllowScroll="true"
            UseStaticHeaders="true"
            SaveScrollPosition="true" />
    </ClientSettings>

<telerik:RadComboBox runat="server" SkinID="BorderedComboBox"
    Skin="Vista"
    Font-Size="11px"
    MarkFirstMatch="true"
    NoWrap="true" />

Obviously, I have the SkinID attribute on the RadGrid set to NonPagingGrid. Here is the CommandItemTemplate:

<CommandItemTemplate>
    <div id="CP_Cmd">
        <div class="CP_Cmd_C CP_Cmd_IB">
            <asp:ImageButton ID="AddProjectButtonImage" runat="server" meta:resourcekey="AddProjectButtonImage"
                ImageUrl="~/App_Themes/Default/buttons/add_button.png"
                CommandName="InitInsert" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_LB">
            <asp:LinkButton ID="AddProjectButton" runat="server" meta:resourcekey="AddProjectButton"
                CommandName="InitInsert" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_IB">
            <asp:ImageButton ID="FillProjectButtonImage" runat="server" meta:resourcekey="FillProjectButtonImage"
                ImageUrl="~/App_Themes/Default/buttons/add_button.png"
                OnClick="FillProjectButton_Click" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_LB">
            <asp:LinkButton ID="FillProjectButton" runat="server" meta:resourcekey="FillProjectButton"
                OnClick="FillProjectButton_Click" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_IB">
            <asp:ImageButton ID="FillSubprojectsImageButton" runat="server" meta:resourcekey="FillSubProjectsButton"
                ImageUrl="~/App_Themes/Default/buttons/add_button.png"
                OnClick="FillSubProjectButton_Click" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_LB">
            <asp:LinkButton ID="FillSubprojectsLinkButton" runat="server" meta:resourcekey="FillSubProjectsButton"
                OnClick="FillSubProjectButton_Click" />
        </div>
        <div class="reset CP_Cmd_C CP_Cmd_TempDDL" style="margin:0;padding:0;">
            <telerik:RadComboBox ID="TemplateSelectionEdit" runat="server"
                SkinID="BorderedComboBox"
                meta:resourcekey="TemplateSelectionEdit" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_IB">
        </div>
        <div class="CP_Cmd_C CP_Cmd_IB CP_Cmd_R">
            <asp:ImageButton ID="RefreshGridImageButton" runat="server" meta:resourcekey="RefreshGridImageButton"
                ImageUrl="~/App_Themes/Default/buttons/grid_refresh.gif"
                CommandName="RebindGrid" />
        </div>
        <div class="CP_Cmd_C CP_Cmd_LB CP_Cmd_R CP_Cmd_RLB">
            <asp:LinkButton ID="RefreshGridButton" runat="server" meta:resourcekey="RefreshGridButton"
                CommandName="RebindGrid" />
        </div>
    </div>
</CommandItemTemplate>

And finally here is the relavant CSS:

div#CP_Cmd
{
    height: 2.5em;
    padding-top: 0.5em;
    padding-left: 1em;
}
div#CP_Cmd div.CP_Cmd_C
{
    float: left;
    display:block;
}
/*Image button*/
div#CP_Cmd div.CP_Cmd_IB
{
    width: 2em;
}
/*Link button*/
div#CP_Cmd div.CP_Cmd_LB
{
    width: 8em;
}
/*Refresh buttons*/
div#CP_Cmd div.CP_Cmd_R
{
    float:rightright;
    padding-right: 1em;
}
/*Refresh link buttons*/
div#CP_Cmd div.CP_Cmd_RLB
{
    width: 4em;
    padding-right: 0.5em;
}
/* Template dropdown*/
div#CP_Cmd div.CP_Cmd_TempDDL
{
    width: 15em;
}
/* Template button*/
div#CP_Cmd div.CP_Cmd_TempB
{
}

[Pavlina]

Hi Thomas,

To avoid duplicate posts, we will continue our communication in the other(support ticket) post that you have opened on the matter. I have already answered your other ticket with the same question .

I suggest that you get the latest internal build of RadControls for ASP.NET AJAX and see if it makes any difference.

All the best,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.