Radgrid CommandBar CSS

3 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    4 posts
    Member since:
    Jun 2014

    Posted 08 Feb Link to this post

    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-position:center;
        width:32px;
        height:32px;
        }
     
    #ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_CancelChangesIcon
        {
        background-position:center;
        width:32px;
        height:32px;
        }

  2. Mohammed
    Mohammed avatar
    4 posts
    Member since:
    Jun 2014

    Posted 09 Feb in reply to Mohammed Link to this post

    Anybody?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 11 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top