title: Kendo Grid Automatically Fit Column Width except for Specific Column
body: <p>I am looking for a way to let <code>column(index = n)</code> (by index number) or <code>column(headingText = 'Address')</code> (by column name) fill the gap on my kendo grid.</p>
  <p>I know how to automatically fit column widths for a Kendo Grid:</p>
  <pre class="lang-js prettyprint-override"><code>  &lt;div id=&quot;example&quot;&gt;
      &lt;div id=&quot;grid&quot;&gt;&lt;/div&gt;
  
      &lt;script&gt;
        $(document).ready(function() {
          var grid = $(&quot;#grid&quot;).kendoGrid({
            dataSource: {
              type: &quot;odata&quot;,
              transport: {
                read: &quot;https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders&quot;
              },
              schema: {
                model: {
                  fields: {
                    OrderID: {
                      type: &quot;number&quot;
                    },
                    ShipCountry: {
                      type: &quot;string&quot;
                    },
                    ShipCity: {
                      type: &quot;string&quot;
                    },
                    ShipName: {
                      type: &quot;string&quot;
                    },
                    OrderDate: {
                      type: &quot;date&quot;
                    },
                    ShippedDate: {
                      type: &quot;date&quot;
                    }
                  }
                }
              },
              pageSize: 15
            },
            height: 550,
            sortable: true,
            resizable: true,
            pageable: true,
            dataBound: function() {
              for (var i = 0; i &lt; this.columns.length; i++) {
                this.autoFitColumn(i);
              }
            },
            columns: [{
              field: &quot;OrderDate&quot;,
              title: &quot;Order Date&quot;,
              format: &quot;{0:MM/dd/yyyy}&quot;
            },
            {
              field: &quot;ShipCountry&quot;,
              title: &quot;Ship Country&quot;
            },
            {
              field: &quot;ShipCity&quot;,
              title: &quot;Ship City&quot;
            },
            {
              field: &quot;ShipName&quot;,
              title: &quot;Ship Name&quot;
            },
            {
              field: &quot;ShippedDate&quot;,
              title: &quot;Shipped Date&quot;,
              format: &quot;{0:MM/dd/yyyy}&quot;
            },
            {
              field: &quot;OrderID&quot;,
              title: &quot;ID&quot;
            }, {
              field: &quot;OrderDate&quot;,
              title: &quot;Order Date&quot;,
              format: &quot;{0:MM/dd/yyyy}&quot;
            },
            {
              field: &quot;ShipCountry&quot;,
              title: &quot;Ship Country&quot;
            },
            {
              field: &quot;ShipCity&quot;,
              title: &quot;Ship City&quot;
            },
            {
              field: &quot;ShipName&quot;,
              title: &quot;Ship Name&quot;
            },
            {
              field: &quot;ShippedDate&quot;,
              title: &quot;Shipped Date&quot;,
              format: &quot;{0:MM/dd/yyyy}&quot;
            },
            {
              field: &quot;OrderID&quot;,
              title: &quot;ID&quot;
            }
           ]
          });
        });
      &lt;/script&gt;
    &lt;/div&gt;
    &lt;style&gt;
      #grid&gt;table
      {
        table-layout: fixed;
      }
    &lt;/style&gt;
  </code></pre>
  <p>I made a fiddle, but I don't know how to link in kendo grid:</p>
  <p><a href="https://jsfiddle.net/jp2code/p6cu5r29/2/" rel="nofollow noreferrer">https://jsfiddle.net/jp2code/p6cu5r29/2/</a></p>
  <p>I could HARD CODE the column widths:</p>
  <pre class="lang-js prettyprint-override"><code>columns: [
       { field: &quot;name&quot;, width: &quot;200px&quot; },
       { field: &quot;tel&quot;, width: &quot;10%&quot; }, // this will set width in % , good for responsive site
       { field: &quot;age&quot; } // this will auto set the width of the content 
     ],
  </code></pre>
  <p>But I'd like the grid to be more dynamic.</p>
  <p>I can remove the empty space in a grid by leaving the <code>autoFitColumn</code> off of the last column:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;style&gt;
      .k-grid {
          width: 700px;
      }
  &lt;/style&gt;
  
  &lt;div id=&quot;grid1&quot;&gt;&lt;/div&gt;
  
  &lt;script&gt;
      function getMasterColumnsWidth(tbl) {
          var result = 0;
          tbl.children(&quot;colgroup&quot;).find(&quot;col&quot;).not(&quot;:last&quot;).each(function (idx, element) {
              result += parseInt($(element).outerWidth() || 0, 10);
          });
  
          return result;
      }
  
      function adjustLastColumn() {
          var grid = $(&quot;#grid1&quot;).data(&quot;kendoGrid&quot;);
          var contentDiv = grid.wrapper.children(&quot;.k-grid-content&quot;);
          var masterHeaderTable = grid.thead.parent();
          var masterBodyTable = contentDiv.children(&quot;table&quot;);
          var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();
  
          masterHeaderTable.width(&quot;&quot;);
          masterBodyTable.width(&quot;&quot;);
  
          var headerWidth = getMasterColumnsWidth(masterHeaderTable),
              lastHeaderColElement = grid.thead.parent().find(&quot;col&quot;).last(),
              lastDataColElement = grid.tbody.parent().children(&quot;colgroup&quot;).find(&quot;col&quot;).last(),
              delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);
  
          if (delta &gt; 0) {
              delta = Math.abs(delta);
              lastHeaderColElement.width(delta);
              lastDataColElement.width(delta);
          } else {
              lastHeaderColElement.width(0);
              lastDataColElement.width(0);
          }
  
          contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
          contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
      }
  
  
      $(&quot;#grid1&quot;).kendoGrid({
          dataSource: {
              type: &quot;odata&quot;,
              transport: {
                  read: &quot;https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees&quot;
              },
              pageSize: 6,
              serverPaging: true,
              serverSorting: true
          },
          height: 430,
          pageable: true,
          resizable: true,
          columnResize: adjustLastColumn,
          dataBound: adjustLastColumn,
          columns: [{
              field: &quot;FirstName&quot;,
              title: &quot;First Name&quot;,
              width: &quot;100px&quot;
          }, {
              field: &quot;LastName&quot;,
              title: &quot;Last Name&quot;,
              width: &quot;150px&quot;
          }, {
              field: &quot;Country&quot;,
              width: &quot;100px&quot;
          }, {
              field: &quot;City&quot;,
              width: &quot;100px&quot;
          }, {
              field: &quot;Title&quot;,
              width: &quot;200px&quot;
          }, {
              template: &quot;&amp;nbsp;&quot;
          }]
      });
  &lt;/script&gt;
  </code></pre>
  <p>But, I don't want to always leave the last column super wide to fill the page.</p>
  <p>I am looking for a more generic example showing how to let <code>column(index = n)</code> or <code>column(headingText = 'Address')</code> be the column that fills the gap.</p>