Grid Data looks jumbled before formatted

[Paul]

I have a data of about 1000 rows, about a dozen columns wide that I am populating to a grid.  However the grid data looks all jumbled for a few seconds before the grid is transformed and formatted the way it should.  Is there anyway to hide or fix this?

 

 

[Boyan Dimitrov]

Hello Paul,

The problem occurs since the browser encounters some difficulties to render row elements for all data. In such case I would suggest make the Grid page-able so it will render only the current potion of data instead all of it.

 

@(Html.Kendo().Grid<KendoGridAjaxBinding.Models.Product>()
      .Name("grid")
     ....
      .Pageable() // Enable paging
)

 

By default the Grid for ASP.NET MVC enables the server operations, so paging will be handled on the server. In order to avoid server operations you can set ServerOperations(false).

.DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .ServerOperation(false)
          .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
       )

  

 

Regards,
Boyan Dimitrov
Telerik

[Paul]

As you can see below, I already had the pageable() option set.
@(Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        about 12 columns
    })
    .Groupable()
    .Filterable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
    .Sortable(sortable => sortable
        .SortMode(GridSortMode.MultipleColumn))
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .Events(events => events.Change("onChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("Code").Ascending())
        .ServerOperation(false)
        .PageSize(50)
    )
    )

[Boyan Dimitrov]

Hello Paul,

Please find attached a sample project with Grid bound to Model with 10 fields and about 1000 records. The paging is enabled and the grid table is rendered right away. 

Could you please clarify whether there are templates used in the columns definition with some complex logic? 

 

Regards,
Boyan Dimitrov
Telerik

[Paul]

yes I have 3 ClientTemplates.

 

columns.Bound("").Locked(true).Filterable(false).Sortable(false).ClientTemplate("<img height='30' width='44' src='/images/" + "#= Code#.png'/>").Width(75).Title("").Groupable(false);

columns.Bound("").ClientTemplate("#=Conference#, #=Association# (#=Division#)").Title("Conference");

columns.Bound("").HtmlAttributes(new { @class = "k-group-cell" }).Width(60).Title("").Filterable(false).Sortable(false).Groupable(false)
.ClientTemplate(
@"<div class='btn-group'>
   <button type='button' class='btn btn-success dropdown-toggle'
        data-toggle='dropdown' aria-expanded='false'>
    Action <span class='caret no-margin-top'></span>
   </button>
   <ul class='dropdown-menu' role='menu'>
     <li><a href='/Test/TestInfo/#=Code#'>Info</a></li>
     <li class='divider'></li>
     <li><a href='/Test/Restrict/#=Code#'>Restrict</a></li>
     <li class='divider'></li>
     <li><a href='/Test/Person/#=Code#'>Person</a></li>
     <li class='divider'></li>
     <li><a href='/Test/Support/#=Code#'>Support</a></li>
     <li class='divider'></li>
     <li><a href='/Test/Schedule/#=Code#'>Schedule</a></li>
   </ul>
</div>");

[Paul]

If I comment out the first ClientTemplate with the image the data seems to load instantly.  Is there a way to load the images async so that the table loads like it should?

[Boyan Dimitrov]

Hello Paul,

 

Could you please confirm that the problem consists in the fact that at first the images are not loaded (showing indication when an image could not be displayed) and after that the image is displayed? Also please clarify what is the size of each image. 

 

 

 

 

Regards,
Boyan Dimitrov
Telerik

[Paul]

Boyan,

I captured a screenshot of how the data is displayed at first and a second shot of the final form. It's not that the image isn't loading. The formatting around the data seems to take awhile to apply even on very fast machines.

 

[Boyan Dimitrov]

Hello Paul,

I would like to clarify that we are not aware of such behavior. It seems that all filed values from the model are rendered at first in the columns with ClientTemplate. 

Since I am not able to replicate such problem at my side I would need an isolated runnable example in order to investigate it. 

Finally something that I would recommend is to update to the latest official release 2015 Q2 SP1 version if you are currently using an older version. I am not sure that if this will help, but you can try it before sending a project. 

Regards,
Boyan Dimitrov
Telerik