Kendo UI Grid Fix

Question

Ich habe einen Kendo UI Grid Code Setup wie dieses

<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> 

Wenn ich es laufen sie fein auf Vollbild ist. Bei kleineren Geräten ist das Gitter jedoch verzerrt und der Gitterkopf ist ausgeschaltet. Wie repariere ich es? Ich habe .Scrollable() hinzugefügt, es hilft, aber es setzt die Höhe des Gitters auf 200px. Ich möchte, dass es automatisch ist. Ich bin relativ neu dazu. Bitte helfen. Danke

Answer 1

Für den Start lesen Sie diese article von Telerik.

Grundidee, dass Sie eine feste Größe für Widgets abhängig von der Bildschirmgröße einrichten können. So etwas:

$(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'); 

Sie können auch adaptive rendering Funktion für Ihr Gitter verwenden.