Radgrid CommandBar CSS

[Mohammed]

We are having problems with the way the command bar is displayed on a radgrid. The icons are in the wrong order and not displaying properly. I think this problem started when we updated Telerik to the latest version, but I'm not too sure.

Screenshot_1 shows how it looks on my machine in IE. (This is how it should look).

Screenshot_2 shows how it looks on my colleague's machine (on the same version of IE with same compatibility settings). This is also the way it looks in Chrome.

Radgrid code:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" OnBatchEditCommand="RadGrid1_BatchEditCommand"
    AutoGenerateColumns="False" DataSourceID="sqlReviewPlanner"  OnPreRender="RadGrid1_PreRender" OnDataBound="RadGrid1_DataBound">
    <MasterTableView DataSourceID="sqlReviewPlanner" DataKeyNames="ID" CommandItemDisplay="Top" EditMode="Batch"
        AutoGenerateColumns="false">
        <BatchEditingSettings EditType="Row" OpenEditingEvent="Click" />
        <SortExpressions>
            <telerik:GridSortExpression FieldName="ReviewNo" SortOrder="Ascending" />
        </SortExpressions>
        <Columns>
            <telerik:GridTemplateColumn DataField="ReviewNo" HeaderText="No." UniqueName="ReviewNo" SortExpression="ReviewNo" DataType="System.Int32">
                <HeaderStyle Width="60px" />
                <ItemTemplate><%# Eval("ReviewNo") %></ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="txtReviewNo" runat="server" Value='<%# Bind( "ReviewNo") %>' Type="Number"
                        ShowSpinButtons="true" MinValue="0" MaxValue="50" Width="50px" NumberFormat-DecimalDigits="0">
                    </telerik:RadNumericTextBox>
                    <asp:RequiredFieldValidator ID="valReviewNo" runat="server" ErrorMessage="*Required" ControlToValidate="txtReviewNo"></asp:RequiredFieldValidator>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="ReviewDate" DataType="System.DateTime" FilterControlAltText="Filter ReviewDate column" HeaderText="Plan Date" SortExpression="ReviewDate" UniqueName="ReviewDate">
                <HeaderStyle Width="125px" />
                <EditItemTemplate>
                    <telerik:RadDatePicker ID="ReviewDateRadDatePicker" runat="server" DbSelectedDate='<%# Bind("ReviewDate") %>' Width="110px">
                    </telerik:RadDatePicker>
                    <asp:RequiredFieldValidator ID="valReviewDateRadDatePicker" runat="server" ErrorMessage="*Required" ControlToValidate="ReviewDateRadDatePicker"></asp:RequiredFieldValidator>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="ReviewDateLabel" runat="server" Text='<%# Eval("ReviewDate","{0:d}") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Reviewer" UniqueName="ReviewOwner" DataField="ReviewOwner">
                <ItemTemplate>
                    <%# Eval("ReviewOwnerName") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="drpReviewOwner" DataValueField="staffcode"
                        DataTextField="staff" DataSourceID="SqlReviewOwner" Filter="Contains">
                    </telerik:RadComboBox>
                    <asp:RequiredFieldValidator ID="valReviewOwner" runat="server" ErrorMessage="*Required" ControlToValidate="drpReviewOwner"></asp:RequiredFieldValidator>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Status" UniqueName="ReviewStatus" DataField="ReviewStatus">
                <ItemTemplate>
                    <%# Eval("ReviewStatusDescription") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="drpReviewStatus" DataValueField="Id"
                        DataTextField="Description" DataSourceID="SqlReviewStatus" Filter="Contains">
                    </telerik:RadComboBox>
                    <%--<asp:RequiredFieldValidator ID="valReviewStatus" runat="server" ErrorMessage="*Required"
                        ControlToValidate="drpReviewStatus"></asp:RequiredFieldValidator>--%>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="ReviewStatusDate" DataType="System.DateTime" FilterControlAltText="Filter ReviewStatusDate column" HeaderText="Status Date" SortExpression="ReviewStatusDate" UniqueName="ReviewStatusDate">
                <HeaderStyle Width="125px" />
                <EditItemTemplate>
                    <telerik:RadDatePicker ID="ReviewStatusDateRadDatePicker" runat="server" DbSelectedDate='<%# Bind("ReviewStatusDate") %>' Width="110px">
                    </telerik:RadDatePicker>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="ReviewStatusDateLabel" runat="server" Text='<%# Eval("ReviewStatusDate","{0:d}") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="Comments" HeaderText="Comments">
                <ItemTemplate><%# Eval("Comments") %></ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadTextBox ID="txtComments" runat="server" Text='<%# Bind( "Comments") %>'
                        Columns="30" Rows="3" TextMode="MultiLine">
                    </telerik:RadTextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ConfirmText="Delete this Review?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" HeaderText="Delete"
                HeaderStyle-Width="50px" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
            </telerik:GridButtonColumn>
        </Columns>
        <CommandItemStyle />
        <CommandItemSettings AddNewRecordText="Add New Review" AddNewRecordImageUrl="../assets/img/plus32.png" RefreshImageUrl="../assets/img/refresh32.png" />
    </MasterTableView>
</telerik:RadGrid>

 

CSS file for icons:

 

#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_InitInsertButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_CancelChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_CancelChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_SaveChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_SaveChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_RebindGridButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_RebindGridButton {
    font-size: 12pt;
}

#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_SaveChangesIcon
    {
    background-image:url("https://staff.oldham.ac.uk/assets/img/save32.png");
    background-position:center;
    width:32px;
    height:32px;
    }

#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_SaveChangesIcon
    {
    background-image:url("https://staff.oldham.ac.uk/assets/img/save32.png");
    background-position:center;
    width:32px;
    height:32px;
    }


#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_CancelChangesIcon
    {
    background-image:url("https://staff.oldham.ac.uk/assets/img/cancel32.png");
    background-position:center;
    width:32px;
    height:32px;
    }

#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_CancelChangesIcon
    {
    background-image:url("https://staff.oldham.ac.uk/assets/img/cancel32.png");
    background-position:center;
    width:32px;
    height:32px;
    }

[Mohammed]

Anybody?

[Kostadin]

Hi Mohammed,

Thank you for contacting us.

I examined the provided styles and I noticed that you are using the client IDs of the items. Note that this IDs are generated on runtime and there is a big chance to be different after making a small changes to the page structure. What I would suggest you is to use a CSS classes and html element as selectors to style the items. Keep in mind you can still use the ID's of the element but you need to make sure that they are static and they are not auto generated.

I hope this information helps.

Regards,
Kostadin
Telerik