The column headers are not horizontally scrolling with the data and I need to fix it so it does. This is what I have to capture data from a .NET data table:

 

@if (Model != null)
{
 
    @(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    foreach (System.Data.DataColumn column in Model.Columns)
                    {
                        var c = columns.Bound(column.ColumnName);
                        if(column.ColumnName.Equals("Quarter"))
                        {
                            c.Width(100);
                        }
                        else
                        {
                            c.Width(100);
                        }
                    }
                })
                .Pageable()
                .Sortable()
                .Filterable()
                .Scrollable()
                //.Groupable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                 .Model(model =>
                 {
                     //var id = Model.PrimaryKey[0].ColumnName;
                     foreach (System.Data.DataColumn column in Model.Columns)
                     {
                         var field = model.Field(column.ColumnName, column.DataType);
                         field.Editable(false);


                     }
                 })
                 //.Read(read => read.Action("Read", "QuickQuery"))
                 )
        )