Wide filter controls

2 posts, 0 answers
  1. Paul Ridden
    Paul Ridden avatar
    49 posts
    Member since:
    Mar 2007

    Posted 11 Mar 2015 Link to this post

    Hi Telerikains,

    I have a grid with 6 columns and filtering active. The last column width is stretched to fill grid. However the filter control is not drawn correctly. Is there anything I can do to fix this?

    @(Html.Kendo().Grid<WebUserViewModel>()
           .Name("WebUsersGrid")
           .HtmlAttributes(new { @class = "js-full-height-grid" })
           .Columns(columns =>
           {
               columns.Bound(c => c.Id).Title("").ClientTemplate(Html.BuildWebUserIcons<WebUserViewModel>(this.User, "WebUsersGrid")).Width(StyleValues.Grid.ThreeIconColWidth).Filterable(x => x.Enabled(false)).Sortable(false).HtmlAttributes(new { style = " text-align:center;" });
     
               columns.Bound(c => c.Id).Visible(false);
               columns.Bound(c => c.AccountId).Visible(false);
     
               columns.Bound(c => c.Active)
                   .ClientTemplate(Html.ClientTemplate_ActiveImg())
                   .Width(100)
                   .HtmlAttributes(new { style = " text-align:center;" });
     
               columns.Bound(c => c.UserNameWithinAccount).Title("User Name").Filterable(filterable => filterable.UI("NameFilter")).Width(200);
               columns.Bound(c => c.FirstName).Width(200);
               columns.Bound(c => c.LastName).Width(200);
               columns.Bound(c => c.Email);
           })
           .ToolBar(toolbar =>
           {
               toolbar.Create().Text("Add Web User");
           })
           .Filterable(filterable => filterable
               .Extra(false)
               .Mode(GridFilterMode.Row)
               .Messages(x => x.IsFalse("N"))
               .Messages(x => x.IsTrue("Y"))
               .Operators(operators => operators
                   .ForString(str => str.Clear()
                       .Contains("Contains")
                       .DoesNotContain("Does Not Contain")
                       .StartsWith("Starts with")
                       .IsEqualTo("Is equal to")
                       .IsNotEqualTo("Is not equal to")
                   )
               )
           )       
           .Scrollable()
           .Sortable()
           .Pageable(pageable => pageable
               .Refresh(true)
               .PageSizes(true)
               .ButtonCount(5)
           )
       )

    Thanks,

  2. Paul Ridden
    Paul Ridden avatar
    49 posts
    Member since:
    Mar 2007

    Posted 12 Mar 2015 Link to this post

    My bad. There is
    input,
    select {
        max-width: 280px;
    }

    in our CSS that was causing the bad effect on the filter controls. I've added:
    .k-filtercell .k-input {
        max-width: 100% !important;
    }

    And all is well again.
Back to Top