Filter Row - how to reduce the width of the filter boxes?

[Robert]

In the following example, the width of the filter boxes are much bigger than the data for that column.  For example, the max number of digits for Order ID is 5.  Therefore, the filter box only needs to be wide enough to hold 5 digits. 

https://demos.telerik.com/aspnet-core/grid/filter-row

 

How do you reduce the width of the filter boxes?

 

Thanks,

Robert

[Petar]

Hi Robert,

The width of the filter input depends on the width of the Grid's column. The width of these filter fields expands to the boundaries of the column. One of the ways you can control the size is to define a smaller width of a given column. The other approach you can use is to define a CSS similar to the below one that will control the width of the filter fields.  

    .k-filter-row > th > span[data-field="OrderID"] {
      width: 100px
    }
    
    .k-filter-row > th > span[data-field="ShipName"] {
      width: 200px
    }
    
    .k-filter-row > th > span[data-field="Freight"] {
      width: 200px
    }

Here is a Dojo example demonstrating the usage of the above code. The CSS above controls the width of the wrapper element that holds the elements in the different filter cells. 

I hope the above example will help you achieve what you need in your application.

Regards,
Petar
Progress Telerik

[Robert]

That particular style change didn't work for me, but it led me down the right track.  I was able to find a solution using a using a cell template and <style> change.  Here is an example:

 

                           @(Html.Kendo().Grid<ProductModel>()
                                .Name("grid")
                                .Pageable(pageable =>
                                {
                                    pageable.PageSizes(Model.AvailablePageSizes.Split(", ").Select(int.Parse).ToArray());
                                })
                                    .Sortable(sortable => sortable.AllowUnsort(false).SortMode(GridSortMode.SingleColumn))
                                .Filterable(filterable => filterable
                                    .Extra(false)
                                    .Mode(GridFilterMode.Menu | GridFilterMode.Row)  //enable both, but decide at field level which one to use
                                .Operators(operators => operators
                                    .ForString(forString => forString.Clear().Contains("Contains"))
                                )
                                )

                                .DataSource(dataSource =>
                                {
                                    dataSource
                                        .Ajax()
                                        .PageSize(15)
                                        .ServerOperation(true)
                                        .Read(read => read.Url("SBFGetGridData").Data("getAntiForgeryToken"))
                                        .Sort(sort => sort.Add(add => add.Id).Descending())
                                        ;

                                })
                                .Columns(columns =>
                                {
                                    columns.Bound(bound => bound.Id).Title("Id")
                                        .ClientTemplate("<a href=\"/Admin/Product/Edit/#=Id#\"><b>#:Id#</b></a>")
                                        .Filterable(false)
                                        ;
                                    columns.Bound(bound => bound.Sku).Title("Sku")
                                        .Filterable(filterable => filterable.Cell(cell => cell.Template("filterBoxTemplate").Operator("contains").ShowOperators(false)))
                                    ;
                                    columns.Bound(bound => bound.Name).Title("Name")
                                        .Filterable(filterable => filterable.Cell(cell => cell.Template("filterBoxTemplate").Operator("contains").ShowOperators(false)))
                                        ;
                                    columns.Bound(bound => bound.ImageFlagType).Title("ImageFlagType")
                                        .Filterable(filterable => filterable.Cell(cell => cell.Template("filterBoxTemplate").Operator("contains").ShowOperators(false)))
                                        ;

                                })
                             )

<script>
    //filterBoxTemplate is used so that just a normal "k-textbox" is used for the filter box.  Otherwise, there is unwanted dropdown functionality that is present
    function filterBoxTemplate(args) {
        console.log("filterBoxTemplate().start");
        console.log("filterBoxTemplate().args: ", args);
        args.element.addClass('k-textbox').css("width", "100%")
        console.log("filterBoxTemplate().args.after change: ", args);
        console.log("filterBoxTemplate().end");
    }
</script>

<style>
    /*Remove filter menus for certain fields*/
    [data-field='Sku'] .k-grid-filter,
    [data-field='Name'] .k-grid-filter,
    [data-field='ImageFlagType'] .k-grid-filter {
        display: none;
    }
    /*Remove filter box for certain fields*/
    [data-field='Id'] .k-textbox {
        display: none;
    }
    /*Change box size/padding for certain fields*/
    [data-field='Sku'] .k-textbox,
    [data-field='ImageFlagType'] .k-textbox {
        max-width: 115px;
        padding: 0;
    }

    [data-field='Name'] .k-textbox
    {
        max-width: 200px;
        padding: 0;
    }
</style>

[Petar]

Hi Robert. 

Thank you for sharing the implementation that worked on your end with the community! It will surely help someone who wants to implement a similar to your scenario.