Formatting error in grid control

[Andrew]

Hello,

I'm using the Kendo UI trial version and have been able to get the grid working correctly, however I'm seeing some weird behavior when the grid is rendered ( see attached ). Any idea what's causing this problem and how can I fix this?

Thanks.

[Vladimir Iliev]

Hi Andrew,

Most probably the reason for this behavior is custom CSS styles applied to the page. Could you please provide runable project where the issue is reproduced in order to investigate further the current behavior?

Regards,
Vladimir Iliev
Telerik

[Andrew]

Hello Vladimir,

Thank you for your response. Unfortunately I can't publish any code, but I can tell you that I'm using the default MVC 5 project template in Visual Studio 2013. The only style that I've applied to the grid is to a container div tag, which I grabbed from the Kendo demo page:

.grid-panel {
    padding: 30px;
}

.select-panel, .grid-panel{
    padding: 10px;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.07) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.07)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
}

My grid code:

<div class="grid-panel" >
    @(Html.Kendo().Grid<MyModel>()
      .Name("grid")
      .AutoBind(false)
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("GetSomeData", "MyController").Data("additionalData"))
          .PageSize(30)
       )
      .Columns(columns =>
      {
          columns.Bound(decode => decode.id).Title("ID").Width("20");
          columns.Bound(decode => decode.c1).Title("FName1").Width("200");
          columns.Bound(decode => decode.c2).Title("FName2").Width("50");
          columns.Bound(decode => decode.c3).Title("FName3").Width("200");
          columns.Bound(decode => decode.c4).Title("Desc.").Width("200");
          columns.Bound(decode => decode.c5).Format("{0:MM/dd/yyyy}").Title("Update Date").Width("30");
          columns.Bound(decode => decode.c6).Title("Sort Field").Width("20");
          columns.Bound(decode => decode.c7).Title("Help Text").Width("200");
          columns.Bound(decode => decode.c8).Title("Ext Count").Width("20");
          columns.Bound(decode => decode.c9).Title("Data1 Count").Width("20");
          columns.Bound(decode => decode.c10).Title("Data2 Count").Width("20");
          columns.Bound(decode => decode.c11).Title("Data3 Count").Width("20");
          columns.Bound(decode => decode.c12).Title("Data4 Count").Width("20");
          columns.Bound(decode => decode.c13).Title("Ext Count").Width("20");
      })
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
    )
</div>

This issue only seems to be occurring on the white alternate columns in the grid.

Thanks,
Andrew

[Vladimir Iliev]

Hi Andrew,


For convenience I created small demo based on the provided information and attached it to the current thread - could you please check it and let us know how it differs from your real setup?

Kind Regards,
Vladimir Iliev
Telerik

[Andrew]

Hi Vladimir,

Thanks for the response. If you change the grid code in your example to the grid I have posted below, you should be able to reproduce the issue.

<div class="grid-panel">
    @(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Order>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID);
        columns.ForeignKey(p => p.EmployeeID, (System.Collections.IEnumerable)ViewData["employees"], "EmployeeID", "Name");
        columns.Bound(p => p.OrderDescription);
        columns.Bound(p => p.OrderDate).Format("{0:d}");
        columns.Bound(p => p.OrderTotal).Format("{0:c}");
        columns.Bound(p => p.IsCompleted).Width("100px");
        columns.Bound(p => p.IsCompleted).Width("100px");
        columns.Bound(p => p.IsCompleted).Width("100px");
        columns.Bound(p => p.IsCompleted);
        columns.Bound(p => p.IsCompleted);
        columns.Bound(p => p.IsCompleted);
    })
    .ToolBar(toolBar => toolBar.Create())
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.OrderID);
            model.Field(p => p.OrderID).Editable(false);
        })
        .Events(e => e.RequestEnd("onRequestEnd"))
        .Create(create => create.Action("Create", "Home").Data("sendCulture"))
        .Destroy(destroy => destroy.Action("Delete", "Home").Data("sendCulture"))
        .Read(read => read.Action("Read", "Home").Data("sendCulture"))
        .Update(update => update.Action("Update", "Home").Data("sendCulture")))
    )
</div>

[Vladimir Iliev]

HI Andrew,

Unfortunately we still unable to reproduce the issue on our side - could you please modify the previously provided example to reproduce the issue and send it back to us? Also please provide the exact browser (version) that your are using. 

Regards,
Vladimir Iliev
Telerik

[Andrew]

Hi Vladimir,

I'm using the following browsers to test my UI:
Google Chrome v. 31.0.1650.63
Internet Explorer v. 10.0.9200.16736 (with update 10.0.11)

I've attached screen shots of the grid's results in both browsers. I'm unable to attach the project solution because it's greater than 18MB. I can email the solution to you if you can send me your email address.

Regards,
Andrew

[Vladimir Iliev]

Hi Andrew,

Thank you for the provided information. After further investigation it seems that the current behavior is related to the current settings of the Grid and the current CSS styles applied to the page. The container that wraps the separate views ("div" element with class "container" in "_Layout.cshtml" page) have "max-width" CSS property set to "1170px", however the Grid columns width sum exceeds that value and the columns are overflowing. In current case I would suggest to enable the Grid Scrollable option and set explicit width of all columns - that way if the columns exceeds max Grid width a scrollbar will be rendered. Please check the example below:

@(Html.Kendo().Grid<MyModel>()
    .Name("grid")
    .AutoBind(false)
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetSomeData", "MyController").Data("additionalData"))
        .PageSize(30)
    )
    .Columns(columns =>
    {
        columns.Bound(decode => decode.id).Title("ID").Width("20");
        columns.Bound(decode => decode.c1).Title("FName1").Width("200");
        columns.Bound(decode => decode.c2).Title("FName2").Width("50");
        columns.Bound(decode => decode.c3).Title("FName3").Width("200");
        columns.Bound(decode => decode.c4).Title("Desc.").Width("200");
        columns.Bound(decode => decode.c5).Format("{0:MM/dd/yyyy}").Title("Update Date").Width("30");
        columns.Bound(decode => decode.c6).Title("Sort Field").Width("20");
        columns.Bound(decode => decode.c7).Title("Help Text").Width("200");
        columns.Bound(decode => decode.c8).Title("Ext Count").Width("20");
        columns.Bound(decode => decode.c9).Title("Data1 Count").Width("20");
        columns.Bound(decode => decode.c10).Title("Data2 Count").Width("20");
        columns.Bound(decode => decode.c11).Title("Data3 Count").Width("20");
        columns.Bound(decode => decode.c12).Title("Data4 Count").Width("20");
        columns.Bound(decode => decode.c13).Title("Ext Count").Width("20");
    })
    .Pageable() // Enable paging
    .Sortable() // Enable sorting
)

Kind Regards,
Vladimir Iliev
Telerik

[Andrew]

Hi Vladimir,

Thanks for the information. Is there a way to make the grid container resizable? This particular grid might contain a lot of data and it's difficult to understand the results without being able to see all or most of the results at the same time. It would be helpful if the user could grab the bottom right corner of the grid and expand the grid to a larger size if needed. Otherwise I fear that the user will get frustrated with having to scroll through the grid results.

Basically, I'd like to be able to use this resizable attribute from JQuery on the grid. If I apply it to the grid it only expands the footer rather than the entire grid.

I tried this:

$(function () {
    $(".k-grid-content").resizable();
});

and this:

$(function () {
    $("#grid").resizable();
});

The top example (resizable applied to the content pane) allows the grid content to be resizable, but it breaks alignment with the column headers and forces both horizontal and vertical scroll bars to appear.

The second example (resizable applied to the main grid element) only allows the footer to be expandable.

I would expect to be able to do something like the second example and have the grid be fully resizable. Do you have a solution to facilitate this?

Regards,
Andrew

[Andrew]

I found a solution that works pretty well:

$(function () {
    $("#grid").resizable({ alsoResize: '.k-grid-content'});
});

Using this allows the entire grid to be resizable. I'm satisfied with this behavior for now. Thanks for your help.