This is a migrated thread and some comments may be shown as answers.

Issue with changing the background of active filter

3 Answers 187 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Tilak asked on 26 Apr 2010, 09:43 PM

Hi,
I am using custom filtering and setting the filter expression programmatically. I am using a custom skin and in there I have the following to for rgFilterActive with the assumption that this will be applied to filters that are active.

    
            .RadGrid_Resonance .rgFilterActive,  
        
            .RadGrid_Resonance .rgFilterActive:hover  
        
            {  
        
                background-color: #ffffB0;  
        
            }

Firstly, with this it doesn't apply the style for the filters that are active, so to workaround in the item created event, I did the following:

    
            foreach (GridColumn column in grid.Columns)  
        
                            {  
        
                                if (((GridTemplateColumn)column).AllowFiltering == true)  
        
                                {  
        
                                    if (column.CurrentFilterFunction != GridKnownFunction.NoFilter)  
        
                                    {  
        
                                           (filteringItem[column.UniqueName].Controls[1] as Button).CssClass = "rgFilter rgFilterActive";  
        
                                    }  
        
                                    else 
        
                                    {  
        
                                        if (filteringItem[column.UniqueName].Controls.Count > 1)  
        
                                        {  
        
                                            (filteringItem[column.UniqueName].Controls[1] as Button).CssClass = "rgFilter";  
        
                                        }  
        
                                    }  
        
                                }  
        
                            }

With this everything works as expected, but when we click on the filter image and click outside, it loses the active styling.

Kindly note although this is a small issue, but needs to be resolved. Please let me know should I follow any other way to implement this, or is this an issue grid styling itself.

Thanks,
Tilak

3 Answers, 1 is accepted

Accepted

answered on 29 Apr 2010, 10:05 AM

Hi Tilak,

The rgFilterActive CSS class is applied to the filter button when it is clicked and the dropdown is displayed. The class is not related to the state of the column itself.

In your case you can implement the following. Note that I have removed the filtering button background image, so that you can see the background color is changed.

<%@ 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 colsNum = 4;

int rowsNum = 5;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

RadGrid grid = sender as RadGrid;

if (e.Item is GridFilteringItem && !String.IsNullOrEmpty(grid.MasterTableView.FilterExpression))

{

string colName = Regex.Match(grid.MasterTableView.FilterExpression, "\\[(\\w)+\\]").ToString().Replace("[", "").Replace("]", "");

if (!String.IsNullOrEmpty(colName))

(e.Item as GridFilteringItem)[colName].CssClass = "rgFiltered";

}

</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 id="Head1" runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.RadGrid .rgFiltered .rgFilter

{

background-color:#ffffb0;

background-image:none;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="800px"

AllowFilteringByColumn="true"

OnNeedDataSource="RadGrid_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated">

</telerik:RadGrid>

</form>

</body>

</html>

All the best,
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.

answered on 19 Feb 2014, 09:30 AM

Hello Andrea,

I remake the script, please give a try and let us know how it goes:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

RadGrid grid = sender as RadGrid;

if (e.Item is GridFilteringItem && !String.IsNullOrEmpty(grid.MasterTableView.FilterExpression))

{

foreach (GridColumn column in (e.Item as GridFilteringItem).OwnerTableView.AutoGeneratedColumns)

{

if (column.CurrentFilterFunction != GridKnownFunction.NoFilter)

{

(e.Item as GridFilteringItem)[column.UniqueName].CssClass = "rgFilter";

}

Regards,
Galin
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.