[Solved] Filtering without showing filter images?

[Patrik]

On my page right now i am allowing a user to filter the search data. I do this by having 2 textboxes above the grid. When the user enters data and presses apply i then combine the request through javascript.

Now comes the funny part.

I allow filtering on the telerik object. No icons are shown above the column names (perfect). I can now filter with my textboxes without having the icons in my columns.

Now if i implement sorting on specific columns, the icons appear!?

So how can i allow sorting of columns without showing the icons. I still want to do filtering with my textboxes.

@(Html.Telerik()
    .Grid(Model.Model)
    .Name("CommunityUsersGrid")
    .Columns(columns =>
    {
        columns.Bound(dlm => dlm.Firstname).Sortable(true).Title("Firstname");
        columns.Bound(dlm => dlm.Surname).Sortable(true).Title("Surname");
        columns.Bound(dlm => dlm.NumberOfPosts).Sortable(false).Title("Number of posts");
        columns.Bound(dlm => dlm.CanPost).Sortable(false).Title("Can user post?");
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select(new RouteValueDictionary { { "eventName", Model.EventShortName }, { "Action", "_GetUserList" }, { "Controller", "Ajax" }, { "Area", "Community" } }))
    .EnableCustomBinding(true)
    .Filterable(x =>
    {
        x.Enabled(true);
        if (!string.IsNullOrEmpty(Model.SearchString1))
            x.Filters(c => c.Add(v => v.Firstname).Contains(Model.SearchString1));
        if (!string.IsNullOrEmpty(Model.SearchString2))
            x.Filters(c => c.Add(v => v.Surname).Contains(Model.SearchString2));
    })
    .Sortable(x =>
    {
        x.SortMode(GridSortMode.SingleColumn);
    })
    .Pageable(paging => paging.PageSize(10))
    .DataKeys(dk => dk.Add(key => key.Id)))

Javascript (works):

function CommunityUsersGrid_applyFilter() {
    // Get a copy of the telerik grid
    var grid = getGrid('CommunityUsersGrid');
    if (grid == null) return;

    // Get the search fields
    var firstname = $("#firstname").val();
    var surname = $("#surname").val();
    // Check what fields that we need to apply searching on and add them to the filters in the grid
    if (firstname != "" && surname != "")
        grid.filter("substringof(Firstname,'" + firstname + "')~and~substringof(Surname,'" + surname + "')");
    else if (firstname != "")
        grid.filter("substringof(Firstname,'" + firstname + "')");
    else if (surname != "")
        grid.filter("substringof(Surname,'" + surname + "')");
    else
        grid.filter();
}

So to sum it up.
- No icons should be shown besides the column name.
- 2 of the 4 columns should be sortable.
- It should be filterable from the textboxes above the grid.

[Dimo]

Hello Patrik,

In order to prevent all Grid header icons from showing, please use CSS:

.t-grid-header  .t-icon ,
.t-grid-filter
{
     display: none !important ;
}

If you want to apply the above to a specific Grid instance on the page / site, you can use a custom CSS class for the Grid wrapper:

Html.Telerik().Grid()
        .Name("Grid")
        .HtmlAttributes(new { @class = "myGrid"} )

.myGrid  .t-grid-header  .t-icon ,
.myGrid  .t-grid-filter
{
     display: none !important ;
}

Regards,
Dimo
the Telerik team

[Patrik]

Worked like a charm, thanks!

[Jim]

How do you remove the filter icon from some columns but not others?   I have 5 columns with buttons and 2 with data the two with data need to be filterable and the Business likes the Funnel icon, the five buttons should not be Filterable.