[Solved] RadGrid Custom CSS Issues

[Peter Parsons]

Hi,

I have created a custom control with a RadGrid that uses custom CSS. I have 2 issues...

1/ The ComboBox on the Pager to set the PageSize is not styled at all. There is no background and no dropdown button.
OOOPS - sorry fixed this one, forgot to include the comboBox style sheet...


2/ Some Grid Rows that have expanded down to 2 lines, text is too long so has word wrapped onto a 2nd line, on hover or row select only have the top half of the row styled with the appropriate background. Starngely this seems only to happen on the even rows, ie. not the alternating row style, the alternating rows that have expanded to 2 lines have the full height background.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CompanyListing.ascx.cs"
    Inherits="FORTUNA.CompanyListing" %>
<telerik:RadGrid ID="rgCompanyListing" runat="server" DataSourceID="dsCompanyListing"
    GridLines="Horizontal" Skin="Fortuna" EnableEmbeddedSkins="false" OnItemCommand="rgCompanyListing_ItemCommand"
    AllowPaging="true" PageSize="20" OnItemDataBound="rgCompanyListing_ItemDataBound" Visible="false" Width="613px">
    <ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="True">
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="False" BorderWidth="0px" ClientDataKeyNames="CompanyProfileID"
        DataKeyNames="CompanyProfileID" DataSourceID="dsCompanyListing" GridLines="None"
        ShowHeader="False" ItemStyle-BackColor="#EAEEF6">
        <NoRecordsTemplate>
            <br>&nbsp;no results returned for that search...</br>
        </NoRecordsTemplate>
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField FieldAlias="CategoryName" FieldName="CategoryName" HeaderText="Category" />
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="CategoryName" SortOrder="Ascending" HeaderText="Category" />
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <Columns>
            <telerik:GridBoundColumn DataField="CompanyProfileID" DataType="System.Int32" Display="False"
                HeaderText="CompanyProfileID" ReadOnly="True" SortExpression="CompanyProfileID"
                UniqueName="CompanyProfileID" Visible="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"
                UniqueName="CompanyName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName"
                UniqueName="CategoryName" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Address1" HeaderText="Address" SortExpression="Address1"
                UniqueName="Address1">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Town" HeaderText="Town" SortExpression="Town"
                UniqueName="Town">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Postcode" HeaderText="Postcode" SortExpression="Postcode"
                UniqueName="Postcode" ItemStyle-Width="60px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="County" HeaderText="County" SortExpression="County"
                UniqueName="County">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ActiveStatus" HeaderText="Active" SortExpression="ActiveStatus"
                UniqueName="ActiveStatus" Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Order" HeaderText="Order" SortExpression="Order"
                UniqueName="Order" Display="false">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="dsCompanyListing" runat="server" ConnectionString="<%$ ConnectionStrings:FORTUNAConnectionString %>">
</asp:SqlDataSource>

using System;
using System.Drawing;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace FORTUNA
{
    public partial class CompanyListing : System.Web.UI.UserControl, ICompanyListing
    {
        public event CommandEventHandler ListingClick;

        public int CompanyId { get { return _companyId; } }
        private int _companyId = 0;

        public void ShowListing(int categoryId, string category, int townId, string town, bool admin)
        {
            ViewState["categoryId"] = categoryId;
            ViewState["category"] = category;
            ViewState["townId"] = townId;
            ViewState["town"] = town;
            ViewState["admin"] = admin;

            string sql = string.Format("EXEC [dbo].[udp_CompanySearch] @CategoryId = {0}, @Category = N'{1}', @TownId = {2}, @Town = N'{3}', @Admin = {4}", categoryId, category, townId, town, admin);
            dsCompanyListing.SelectCommand = sql;
            rgCompanyListing.Visible = true;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                string sql = string.Format("EXEC [dbo].[udp_CompanySearch] @CategoryId = {0}, @Category = N'{1}', @TownId = {2}, @Town = N'{3}', @Admin = {4}", ViewState["categoryId"], ViewState["category"], ViewState["townId"], ViewState["town"], ViewState["admin"]);
                dsCompanyListing.SelectCommand = sql;
            }
        }

        protected void rgCompanyListing_ItemCommand(object source, GridCommandEventArgs e)
        {
            var dataItem = e.Item as GridDataItem;
            if (dataItem != null)
            {
                var item = dataItem;
                try
                {
                    _companyId = Int32.Parse(item.GetDataKeyValue("CompanyProfileID").ToString());
                }
                catch (Exception)
                {
                    _companyId = 0;
                }

                if (ListingClick != null)
                {
                    var args = new CommandEventArgs("ListingClicked", 0);
                    ListingClick(this, args);
                }
            }
        }

        protected void rgCompanyListing_ItemDataBound(object sender, GridItemEventArgs e)
        {
            //Is it a GridDataItem
            if (e.Item is GridDataItem)
            {
                //Get the instance of the right type
                GridDataItem dataBoundItem = e.Item as GridDataItem;

                //Check the formatting condition
                if (int.Parse(dataBoundItem["ActiveStatus"].Text) == 0)
                {
                    dataBoundItem.ForeColor = Color.Red;
                }
                else if (int.Parse(dataBoundItem["Order"].Text) > 3)
                {
                    dataBoundItem.BackColor = dataBoundItem.ClientRowIndex % 2 == 1 ? Color.FromArgb(255, 218, 145) : Color.FromArgb(255, 245, 225);
                }
            }
        }
    }
}

EDIT: Sorry, fxed the first issue...

Cesare

[Dimo]

Hello Anthony,

When requesting assistance for custom skins, it is generally expected to send the custom CSS code as well.

Fortunately, in this case this is not needed. The problem is that the background color of non-alternating rows override the background color of selected rows, because you have set ItemStyle-BackColor="#EAEEF6". Inline styles by default override external CSS styles.

Another case when issue can occur is when the (non-)alternating row styles are placed after the selected row styles in the CSS file, and/or if the (non-)alternating row styles have higher CSS specificity.

So I suggest you to move the ItemStyle-BackColor style to the CSS file of the skin.

Here is a forum thread, which dwells upon the same issue:

http://www.telerik.com/community/forums/community-forums/design/conditional-formatting-skews-all-the-skin-format-once-applied-to-a-row-in-radgrid.aspx#601248

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.