5.20231.904
5.20231.904

Custom Filter Icons in FlexGrid

You can customize the icons shown by the FlexGridFilter using CSS.

You can create custom icons:

/* show images on filtered columns */
.wj-glyph-filter {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: bottom right;
    margin-top: 2px;
    width: 20px; height: 20px;
    border: none;
}
.wj-glyph-filter:after {
    display: none;
}
/* make active filter images 25% larger */
.wj-filter-on .wj-glyph-filter {
    transform: scale(1.25)
}

Or just customize the colors of the existing icons:

/* change the color of the filter glyphs */
.wj-glyph-filter {
    color: red;
    font-size: 125%;
}