title: Resizing of kendo grid columns to fit filters
body: <p>I have a kendo grid with filter operators on it. the problem is that the filters are extending beyond the grid with and resulting in a view which makes them look cut off where the column ends. Here is an image:</p>
  
  <p><a href="https://i.stack.imgur.com/yF2Ys.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yF2Ys.png" alt="Grid"></a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="gridDiv"&gt;
  @(Html.Kendo().Grid&lt;Website.Models.VisitModel.VisitGridModel&gt;()
          .Name("grid")
          .ToolBar(toolbar =&gt;
          {
              toolbar.Custom().Text("Create").Action("AddPatient", "Patient").HtmlAttributes(new { @class = "k-primary k-button" });
          })
          .Columns(column =&gt;
          {
              column.Bound(c =&gt; c.DateS);
              column.Bound(c =&gt; c.PreScreening);
              column.Bound(c =&gt; c.Screening);
              column.Bound(c =&gt; c.ReadyMadeReaders);
              column.Bound(c =&gt; c.EyeExam);
              column.Bound(c =&gt; c.Glasses);
              column.Bound(c =&gt; c.Contacts);
              column.Bound(c =&gt; c.RetinalGrading);
  
          })
          .Events(e =&gt;
          {
  
          })
          .Sortable()
          .Scrollable()
          .Selectable()
          .Resizable(resize =&gt; resize.Columns(true))
          .Reorderable(reorder =&gt; reorder.Columns(true))
          .NoRecords("No data")
          //.ClientDetailTemplateId("template")
          .Filterable(ftb =&gt; ftb.Mode(GridFilterMode.Row))
          .Filterable(f =&gt; f.Operators(o =&gt; o.ForString(fs =&gt; fs.Clear().Contains("Contains").StartsWith("Start With").EndsWith("End with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
          .Pageable(page =&gt; page
          .Refresh(true)
          .ButtonCount(5)
          .PageSizes(new string[] { "5", "10", "20", "100", "All" })
          )
          .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .ServerOperation(true)
          .Sort(s =&gt;
          {
              s.Add(a =&gt; a.ID).Ascending();
          })
          .Model(model =&gt;
          {
              model.Id(i =&gt; i.ID);
          })
          .Read("ReadAllVisits", "EyeTestReport")
          .Events(events =&gt; events.Error("Shared.onGridDataSourceError").RequestEnd("Shared.onGridRequestEnd"))
          )
  )
  </code></pre>
  
  <p></p>
  
  <p>How can I get the columns to be the right size?</p>