Kendo UI Grid Fix

Question

I have a Kendo UI grid code setup like this

<div class="row">
    <div class="col-md-1">
        &nbsp;
    </div>
    <div class="col-md-8">
        <div class="panel panel-default">                
            <div class="panel-heading">
                <span class="panel-control-margin">My Tasks</span>
                @Html.ActionLink("Add Task", "AddActivity", "Activities", new { @id = Model.CurrentUser.ID }, new { @class = "k-button k-primary" })                   
            </div>
            <div class="panel-body">
                @(Html.Kendo().Grid<ETS.Model.ActivitiesList>()
                    .Name("Activitygrid")
                    .Columns(columns =>
                    {
                    columns.Bound(c => c.DueDate).Title("Due Date").Template(@<text> @Html.ActionLink(@item.DueDate.ToShortDateString(), "EditActivity", "Activities", new { @id = @item.ID }, new {@style = item.DueDateStyle })</text>);
                    columns.Bound(p => p.Subject).Title("Subject").Template(@<text> @Html.ActionLink(@item.Subject, "EditActivity", "Activities", new { @id = @item.ID }, new { @style = "color:black; text-decoration:none;" })</text>);
                    columns.Bound(p => p.Status).Title("Status");
                    columns.Bound(p => p.Priority).Title("Priority");
                    columns.Bound(p => p.EntityName).Title("Related To");
                    columns.Bound(p => p.CreatedBy).Title("Assigned By").Template(@<text> @Html.ActionLink(@item.CreatedBy, "Activities", "User", new { @id =item.CreatedByID }, new {  @style = "color:black; text-decoration:none;"})</text>);
                        columns.Bound(p => p.FollowUp).Title("Follow Up");
                    })
                    .Pageable(pageable => pageable
                         .PageSizes(true)
                         .ButtonCount(5)
                         .Refresh(true)
                       )

                    .DataSource(ds => ds.Server().PageSize(20))
                    .Sortable()
                    //.HtmlAttributes(new { style = ""})
                    .BindTo(Model.Activities)
                )
            </div>
        </div>
        <div class="col-md-3">
            &nbsp;
        </div>
    </div>
</div>

When i run it it is fine on full screen. But on smaller devices the grid is distorted and grid header is off. How do i fix it? I added .Scrollable() , it helps but it sets he height of the grid to 200px. I want it to be auto. I am relatively new to it.Please help. Thanks

Answer 1

For the start read this article from telerik.

Main idea that you can setup fixed size for widgets depending on screen size. Something like that:

$(window).resize(kendo.throttle(function(){

        var width = $(window).width();

        if(width < 480){
          splitter.size('.k-pane:first','50%');
          splitter.collapse('.k-pane:first');
        }

        if(width < 1024 && width > 480){
          splitter.size('.k-pane:first','100px');
          splitter.expand('.k-pane:first');
        }

        if(width > 1024){
          splitter.size('.k-pane:first','300px');
          splitter.expand('.k-pane:first');
        }

      },250)).trigger('resize');

Also you can use adaptive rendering feature for your grid.