title: Kendo Grid Column Width + Scrollable
body: <p>I'm trying to bind to a scrollable kendo grid from javascript and having a few issues with column widths.  This <a href="http://jsfiddle.net/mnTGm/1/" rel="noreferrer">fiddle</a> demonstrates the issue (code at the end of the question).  I'm specifying the headers in the html and adding a width to one of the headers.  The javascript then sets the dataSource (in production code this is done via an ajax call).</p>
  
  <p>I want to avoid having to set the columns.width property in the javascript because</p>
  
  <ul>
  <li>I have many grids that, since my viewmodels are carefully constructed are able to automatically discern the columns required.  We have over 100 girds in our app and having to specify the column list for all of them would be unwieldy.</li>
  <li>It feels wrong anyway, this is styling information.</li>
  </ul>
  
  <p>I do understand that the functionality is due to kendo creating two grids, one for the headers and one for the scrolling content.  However, other control libs I have used in the past that do similar things have always copied the styling information between the two grids in order to facilitate declarative styling while keeping the two tables in sync - I'm just not sure what the "kendo" way for this is.</p>
  
  <p>HTML from fiddle</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;th class="p20" data-field="status"&gt;Status&lt;/th&gt;
          &lt;th data-field="description"&gt;Description&lt;/th&gt;
      &lt;/thead&gt;
  &lt;/table&gt; 
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('table').kendoGrid({
      dataSource: [
          { status: 'On', description: 'a longer description' },
          { status: 'On', description: 'a longer description' },
          { status: 'On', description: 'a longer description' },
          { status: 'On', description: 'a longer description' },
          { status: 'On', description: 'a longer description' },
          { status: 'On', description: 'a longer description' }
      ],
      scrollable: true
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.k-grid-content {
      height: 100px;
  }
  .p20 {
      width: 20%;
  }
  </code></pre>