Setting columns' HeaderStyle.CssClass prevents default CSS classes from rendering (.rgHeader, .rgSorted)

[bdukes]

I'm setting the CssClass of the HeaderStyle in all of my columns, so that the columns can be styled completely through CSS (i.e. someone could target the entirety of a specific column, or just the header of a specific column).

However, when setting that, I no longer get the default CSS classes that I would expect from the grid.  For example, the rgSorted class does not get added when a column is being sorted, and the rgHeader class is not present on any of the headers.

I'm using the 2009.3.1103.35 version of the controls.

Firstly, is there any way to get those styles added back without doing it manually?  Obviously I can add rgHeader to everything pretty easily, but having to keep track of the dynamically added styles will be painful.

Secondly, is there a way that I can add my custom CSS classes to the <col/> elements, instead of the Header (which would at least allow someone to hide the entire column if they wanted).

Thanks in advance for the help,

[Dimo]

Hello Brian,

Indeed, currently if you use a custom header CSS class, you need to also include the RadGrid's native one. We will research for ways to improve this in the future. Sorry about the inconvenience.

As for your second question, I am afraid you can't set CSS classes to the <col> elements, unless you do it manually on the client. However, note that this will not work well across all browsers.

Sincerely yours,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Panos]

Hi Dimo,

I am facing a similar issue. I have a GridColumnTemplate. On this I am programaticaly adding the rgHeader class to the header style for the template. My grid is configured to allow multi column sorting. On normal bound columns the sorted column cells get rgSorted added to their class. However when using this custom template I cannot find away of ensuring that on sort the rgSorted class is added for each cell in the column. Does this make sense?

Is there a good way to achieve this?

Thanks

Panos

[Dimo]

Hi Panos,

Well, you have to check whether there is a SortExpression for any of the DataFields used in the template column and if so, apply the rgSorted CSS class in addition to the rgHeader CSS class.

http://www.telerik.com/help/aspnet-ajax/grdsortingexpressions.html

Best wishes,
Dimo
the Telerik team

[Panos]

Hi Dimo,

Thanks for the quick response. I am not completely up to speed with how RadGrid works and didn't quite get your point.

We have a grid column template:

public

 

class CustomCurrencyColumn : System.Web.UI.ITemplate

 

This gets created as follows:

private

 

static GridColumn GetCurrencyColumn(IE.Business.UserInterface.Presentation.IItemProvider columnItem)

 

{

 

GridTemplateColumn template = new GridTemplateColumn();

 

template.HeaderText = columnItem.GetFieldByName(

"header text").Value;

 

template.DataField = columnItem.GetFieldByName(

"data field").Value;

 

 

string allowSort = columnItem.GetFieldByName("allow sorting").Value;

 

 

if (!string.IsNullOrEmpty(allowSort))

 

{

template.SortExpression = template.DataField;

template.HeaderTooltip =

"Sort by " + template.HeaderText;

 

}

 

CustomCurrencyColumn currencyCol = new CustomCurrencyColumn();

 

currencyCol.HeaderText = template.HeaderText;

currencyCol.GridColumn = template;

currencyCol.DataField = template.DataField;

currencyCol.ConditionalDataField = columnItem.GetFieldByName(

"conditional field").Value;

 

currencyCol.CreditText = columnItem.GetFieldByName(

"credit suffix").Value;

 

currencyCol.DebitText = columnItem.GetFieldByName(

"debit suffix").Value;

 

currencyCol.FormatString = columnItem.GetFieldByName(

"format string").Value;

 

template.ItemTemplate = currencyCol;

 

return template;

 

}

We retrieve it and add this to the masterview as follows:

this

 

.grid.MasterTableView.Columns.Add(fieldFactory.GetDataControlField(columnItem));

We dont explicitly handle the sorting, so there is not a sort expression for this specificaly.
We do override the template css with our class.
Is there a way I can allow the sorting to automaticaly add the rgSorted class as it did before we maded this fields a custom column template? or where can I intercept the sorting call to add this class manually at runtime?

Apologies if I missed your point!

Thanks
Panos

 

[Panos]

P.S. obviously if we dont override the css class the custom column template styles correctly to add rgSorted when we sort on that column.

[Dimo]

Hi Panos,

Please inspect the following demo and let me know if there is anything unclear.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int rowsNum = 6;
        string[][] colsInfo = {
        new string[] { "ID", "number" },
        new string[] { "Date1", "date" },
        new string[] { "Number1", "number" },
        new string[] { "String1", "string" },
        new string[] { "Date2", "date" },
        new string[] { "Number2", "number" },
        new string[] { "String2", "string" }
    };

        for (int i = 0; i < colsInfo.Length; i++)
        {
            switch (colsInfo[i][1])
            {
                case "string":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(String)));
                    break;
                case "number":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Int32)));
                    break;
                case "date":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(DateTime)));
                    break;
                case "bool":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Boolean)));
                    break;
                default:
                    break;
            }
        }

        for (int j = 1; j <= rowsNum; j++)
        {
            dr = dt.NewRow();

            for (int k = 0; k < colsInfo.Length; k++)
            {
                switch (colsInfo[k][1])
                {
                    case "string":
                        dr[colsInfo[k][0]] = String.Format("{0} Row{1}", colsInfo[k][0], j);
                        break;
                    case "number":
                        dr[colsInfo[k][0]] = j;
                        break;
                    case "date":
                        dr[colsInfo[k][0]] = DateTime.Now;
                        break;
                    case "bool":
                        dr[colsInfo[k][0]] = j % 2 == 1 ? true : false;
                        break;
                    default:
                        break;
                }
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        GridTableView mtv = (sender as RadGrid).MasterTableView;
        GridHeaderItem headerItem = mtv.GetItems(GridItemType.Header)[0] as GridHeaderItem;
        foreach (GridSortExpression sortExp in mtv.SortExpressions)
        {
            headerItem[sortExp.FieldName].CssClass = String.Format("{0} rgSorted", mtv.GetColumn(sortExp.FieldName).HeaderStyle.CssClass);

            // if the sort expression is relevant to the template column, then apply the rgSorted CSS class by using the custom UniqueName:
            if (sortExp.FieldName == "Number1")
            {
                headerItem["MyCustomUniqueName"].CssClass = String.Format("{0} rgSorted", mtv.GetColumn("MyCustomUniqueName").HeaderStyle.CssClass);
            }
        }
    }

    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        e.Column.HeaderStyle.CssClass = "rgHeader MyHeaderClass";
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>Sort the Number1 column to see how the rgSorted CSS class is applied to the template column as well.</p>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AllowSorting="true"
    OnNeedDataSource="RadGrid_NeedDataSource"
    OnPreRender="RadGrid1_PreRender"
    OnColumnCreated="RadGrid1_ColumnCreated">
    <MasterTableView AllowMultiColumnSorting="true">
        <Columns>
            <telerik:GridTemplateColumn UniqueName="MyCustomUniqueName" HeaderText="template column" SortExpression="Number1">
                <ItemTemplate>
                    ItemTemplate <%# Eval("Number1") %>
                </ItemTemplate>
                <HeaderStyle CssClass="rgHeader MyHeaderClass" />
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

All the best,
Dimo
the Telerik team