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

[Solved] Changing Filtered Icon?

12 Answers 267 Views

Grid

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

This question is locked. New answers and comments are not allowed.

12 Answers, 1 is accepted

Accepted

answered on 11 Jan 2010, 09:48 AM

telerik-web-mvc-content.zip

Hello A A,

Here are the necessary changes in order to get this to work:

In telerik.grid.filtering.js, in the filter function, change the line



this

.ajaxRequest();

to

else {

// highlight filtered icons

var filteredColumns = [];

$.each(filterExpression.split('~and~'), function(index, item) {

if (item != "")

filteredColumns.push(item.substring(0, item.indexOf('~')));

});

var filterIcons = $('.t-grid-filter', this.element);

var columns = this.columns;

$.each(columns, function() {

filterIcons

.eq($.inArray(this, columns))

.toggleClass('t-active-filter', $.inArray(this.name, filteredColumns) >= 0);

});

// filter data

this.ajaxRequest();

}

This is used to highlight the filtered columns when the grid is in Ajax mode.

In the GridBoundColumnRenderer.cs file, find the following line:

if (Column.Filterable && Column.Grid.Filtering.Enabled)

and replace the line

htmlWriter.AddAttribute(HtmlTextWriterAttribute.Class, "t-grid-filter t-state-default");

with

string filterCssClass = "t-grid-filter t-state-default";

IList<IFilterDescriptor> filter = Column.Grid.DataProcessor.FilterDescriptors;

FilterDescriptor descriptor = filter.SingleOrDefault(c => (c as FilterDescriptor).Member.IsCaseInsensitiveEqual(Column.Name)) as FilterDescriptor;

if (descriptor != null)

{

filterCssClass += " t-active-filter";

}

htmlWriter.AddAttribute(HtmlTextWriterAttribute.Class, filterCssClass);

This is necessary to show the highlight when the grid is rendered from the server (i.e. initial rendering or ajax mode is disabled).

I am sending you the latest skins which have the t-active-filter styling.

Kind regards,
Alex
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.

answered on 11 Jan 2010, 01:44 PM

Hi,
Thank you very much for your quick response and support.
I've edited, js file and Ajax binding mode is working perfectly.
- But when I click "Clear Filter", it's not closing.

I tried to fix C# side of the project.
First of all I don't have file called GridBoundColumnRenderer.cs, intstead rendering is done inside GridRenderer.cs.
I'm using BETA 2009.3.1223 version.
I've replaced following line:

    
            Writer.AddAttribute(HtmlTextWriterAttribute.Class, "t-grid-filter t-state-default");

with

    
               string filterCssClass = "t-grid-filter t-state-default";

            IList<IFilterDescriptor> filter = 
            Grid.DataProcessor.FilterDescriptors;   //no Column before
            Grid.DataProcessor.FilterDescriptors

            FilterDescriptor descriptor = filter.SingleOrDefault(c => (c as 
            FilterDescriptor).Member.IsCaseInsensitiveEqual(column.Name)) as FilterDescriptor;

                            if (descriptor != null)

                            {

                                filterCssClass += " t-active-filter";

                            }

                            Writer.AddAttribute(HtmlTextWriterAttribute.Class, filterCssClass);

in GridRenderer.cs file.
After these changes:
1) When there is filter on the column, different css is shown when filter is applied(cool)
2) Filter criteria dissappers in the filter form, after filter is applied.
3) I can NOT apply filter on more than one columns.
Example:
column1: column2 column3
date         date         string

a) filter column2 - OK, then filter column3   => FormatException("String was not recognized as a valid DateTime.") in ParseDateTimeExpression function in FilterParser.cs
b) filter column3 - OK, then filter column2 => NullReferenceException in the
"FilterDescriptor descriptor = filter.SingleOrDefault(c => (c as FilterDescriptor).Member.IsCaseInsensitiveEqual(column.Name)) as FilterDescriptor;"
of the above change.

How to solve this problem? Thanks.

answered on 29 Jan 2010, 02:38 PM

Hello Dunston,

I'm afraid we messed up the release notes a bit - the change will be available with the Q1 release.

Until then, you can use the approach in the following way:

add the following CSS rule (the color may vary depending on your theme, this one is for Vista):
.t-active-filter
{
background-color: #ceeefd;
}
In the telerik.grid.filtering.js file, in the filter function, replace the line
this.ajaxRequest();
with
// highlight filtered icons
var filteredColumns = [];

$.each(filterExpression.split('~and~'), function(index, item) {
    if (item != "")
        filteredColumns.push(item.substring(0, item.indexOf('~')));
    });

var filterIcons = $('.t-grid-filter', this.element);
var columns = this.columns;
$.each(columns, function() {
    filterIcons
        .eq($.inArray(this, columns))
        .toggleClass('t-active-filter', $.inArray(this.name, filteredColumns) >= 0);
});

// filter data
this.ajaxRequest();
In the ColumnRenderer, change the handling of filterable columns (Column.Filterable && Column.Grid.Filtering.Enabled) from
htmlWriter.AddAttribute(HtmlTextWriterAttribute.Class, "t-grid-filter t-state-default");
to
string filterCssClass = "t-grid-filter t-state-default";

IList<IFilterDescriptor> filter = Column.Grid.DataProcessor.FilterDescriptors;
FilterDescriptor descriptor = filter.SingleOrDefault(c => (c as FilterDescriptor).Member.IsCaseInsensitiveEqual(Column.Name)) as FilterDescriptor;

if (descriptor != null)
{
filterCssClass += " t-active-filter";
}

htmlWriter.AddAttribute(HtmlTextWriterAttribute.Class, filterCssClass);

I am sorry for the caused inconvenience.

Kind regards,
Alex Gyoshev
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.

answered on 03 Feb 2010, 12:45 PM

Thanks for this code.

It seems to not take into account un-filterable columns (such as check-box columns) so can highlight the wrong column filter.

Cheers,

Rob

Edit:

Solution as follows:

    
                        // Assumes filteredColumns.length == columns.length!  
        
            //            var filterIcons = $('.t-grid-filter', this.element);  
        
            //            var columns = this.columns;  
        
            //            $.each(columns, function() {  
        
            //                filterIcons  
        
            //                    .eq($.inArray(this, columns))  
        
            //                    .toggleClass('t-active-filter', $.inArray(this.name, filteredColumns) >= 0);  
        
            //            });  
        
                        var columns = this.columns;  
        
                        var domColumns = $('.t-header', this.element);  
        
                        $.each(domColumns, function(index) {  
        
                            $('.t-grid-filter', this)  
        
                                .toggleClass('t-active-filter', $.inArray(columns[index].name, filteredColumns) >= 0);  
        
                        });

answered on 05 Feb 2010, 05:00 PM

I've found another issue with this code in that it only works for 'equals', 'greater than' and 'less than' type filters. 'contains(...)', 'startswith(...)' and 'endswith(...)' filters don't work.

Fix is as follows:

    
                        // Only considers filters split with '~' and not startswith(...), contains(...) or endswith(...)  
        
            //            $.each(filterExpression.split('~and~'), function(index, item) {  
        
            //                if (item != "") filteredColumns.push(item.substring(0, item.indexOf('~')));  
        
            //            });  
        
                        $.each(filterExpression.split('~and~'), function(index, item) {  
        
                            if (item != "") {  
        
                                // Try to get column name using '~'  
        
                                var column = item.substring(0, item.indexOf('~'));  
        
                                // Otherwise, it's likely in a function  
        
                                if (column == "") column = item.substring(item.indexOf('(') + 1, item.indexOf(','));  
        
                                filteredColumns.push(column);  
        
                            }  
        
                        });