[Solved] MVC Razor Grid scroll with background image

[dacanetdev]

Hello guys,

I'm trying to apply a two colums web design using the css background image trick. Inside of that div I'm putting a MVC grid with no scroll on it but with a fixed width on the container div with overflow:auto and works perfectly when no scrolling but when I scroll horizontally the rest of the colums that can't be seen without scrolling are taking the background image. That's a weird behavior for me.

I'm attaching two image before scrolling and with scroll.

This is part of my code

this is the container div of the Grid

 <div style="width: 800px; overflow: auto; background: none repeat scroll 0 0 transparent;">
            @{Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(t => t.ProgramId).Hidden();
                columns.Bound(t => t.OrganizationId).Hidden();
                columns.Bound(t => t.Year).Hidden();
                columns.Bound(t => t.SelectionId).Hidden();
                columns.Bound(t => t.ApplicationId).Hidden();
                columns.Bound(t => t.TestId).Hidden();
                columns.Bound(t => t.ProgramCode).Title("Program").Width(60);
                columns.Bound(t => t.ParticipantName).Title("Participant").Width(180);
                columns.Bound(t => t.Year).Title("Year").Width(50);
                columns.Bound(t => t.AHRIRefNo).Title("AHRI Ref Number").Width(100);
                columns.Bound(t => t.ModelNo).Title("Model No").Width(100);
                columns.Bound(t => t.SelectionDate).Title("Sel. Date").Width(100);
                columns.Bound(t => t.EquipmentType).Title("Unit Type").Width(100);
                columns.Bound(t => t.TestNumber).Title("Test Number").Width(150);
                columns.Bound(t => t.TestType).Title("Test Type").Width(80);
                columns.Bound(t => t.Status).Title("Status").Width(100);
                columns.Bound(t => t.TestGeneratedOn).Title("Test Gen. On").Width(100);
                columns.Bound(t => t.TestResult).Title("Test Result").Width(100);
                columns.Template(
                @<text>
                @if (!string.IsNullOrEmpty(item.TestReportURL))
                { <a href="@item.TestReportURL">View Report</a> }
                </text>
                ).Title("Report").Width(100);
                columns.Template(@<text>
                <!--Only if it is Failed -->
                @if (item.TestResultCode == 402)
                {
                <a href="#">Send MDF</a>
                }
                </text>).Title("MDF").Width(100);
 
            })
            .DataBinding(dataBinding => dataBinding.Ajax().Select("_Paging", "Test"))
            .Pageable(paging => paging.Style(pagerStyles).Position(position).PageTo(currentPage).PageSize(30).Enabled(false))
            .Scrollable(s => s.Enabled(false))
            .Selectable()
            .Groupable()
            .Sortable()
            .Footer(false)
            .ClientEvents(events => events
                .OnDataBound("OnBoundTests")
                .OnDataBinding("OnBindingTests")
            )
            .Render();
            }
        </div>

I'm wrapping that div inside other div being the last div one with id="page" and the css for that is

#page
{
    background: url(images/bgdark.png) repeat; 
    overflow:hidden;
	clear:both;
}

 could you please help me to fix this? 

Thanks

David

[Petur Subev]

Hello David,

To fix the styling you can set the following html attribute to your Grid.

.HtmlAttributes(new { style = "display:table"})

I hope this helps.


Greetings,
Petur Subev
the Telerik team

[dacanetdev]

Thank you Petur,

That worked fine in Firefox but not working for IE 8, do you have any hack for that version of that browser?

[Petur Subev]

Hi David,

I do not encounter the same behavior. Could you please send us a working sample so it reproduces the problem so we can check for a solution ?
Thank you in advance for the cooperation.

Kind regards,
Petur Subev
the Telerik team

[dacanetdev]

Sorry. All of a sudden is working now in IE 8. Thank you for your help.