[Solved] No Horizontal Scrolling in Grid

[Kunal]

I am unable to get any horizontal scrolling in the ASP.NET MVC telerik grid. When I increase the size of columns, a scroll bar appears on the page instead of the grid.

@Html.Telerik().Grid(Model.YardLists).Name(

 

"Grid").Columns(

columns =>

{

columns.Template(@<text>

 

<input type="checkbox" id='checkedRecords' name='checkedRecords' value='@item.UnitNo'/></text>).Width(30);

columns.Bound(entity => entity.UnitNo).Width(50).Title(

 

"Unit No.");

columns.Bound(entity => entity.Category).Width(50).Title(

 

"Category");

columns.Bound(entity => entity.CustomerName).Width(50).Title(

 

"Customer");

columns.Bound(entity => entity.Dimensions).Width(150).Title(

 

"sz/tp/ht");

columns.Bound(entity => entity.SlotNum).Width(50).Title(

 

"Slot");

columns.Bound(entity => entity.Shipment).Width(50).Title(

 

"Shipment");

columns.Bound(entity => entity.Arrived).Width(50).Title(

 

"Arrived");

columns.Bound(entity => entity.Carrier).Width(50).Title(

 

"Carrier");

columns.Bound(entity => entity.Reefer).Width(150).Title(

 

"Reefer");

columns.Bound(entity => entity.OD).Width(150).Title(

 

"OD");

columns.Bound(entity => entity.Hazmat).Width(50).Title(

 

"Hazmat");

columns.Bound(entity => entity.Hold).Width(150).Title(

 

"Hold");

}).Scrollable().Pageable().Filterable().Selectable().DataKeys(keys => keys.Add(c => c.UnitNo));

[Petur Subev]

Hi Kunal,

I was unable to reproduce the problem, could you share a sample project with your current logic and setup so I can check where the problem comes from ?

Greetings,
Petur Subev
the Telerik team

[Kunal]

Hi Peter,
I just tried with a grid and added a model. The model is a entity class.
 public class YardListModel
    {
        public string txtSearch { get; set; }
        public string ShowSearch { get; set; }
        public List<YardList> YardLists { get; set; }
    }

 public class YardList
    {
        public string UnitNo { get; set; }
        public string Category { get; set; }       
        public string CustomerName { get; set; }   ........ other properties
}

If I bind this model to the grid, and the width of the columns are 100, the grid overshoots my page and then a horizontal scroll bar appears in the page. I want a horizontal scroll bar to appear on the grid (like the vertical scroll bar).

[Petur Subev]

Hi Kunal,


As I mentioned in my previous post I was unable to reproduce the problem. On my side the vertical scroll bar appears in the Grid. Could you please check if the demo I attached reproduces the problem if not please modify it and send it back so we can check where the problem comes from.

Regards,
Petur Subev
the Telerik team

[Anup]

I agree that the vertical scroll is getting displayed but I am more interested in understanding how a horizontal scroll can be displayed.

Think about a scenario where I have 100 columns and hence displaying the grid using a horizontal column is the only way the data can be displayed to the user.

So please let us know how to create horizontal scroll using the same demo project you provided.

Thanks,
Anup

[Petur Subev]

Hi Anup,

Basically there is no need to configure additional settings to enable horizontal scrolling.
Check the attached project, it shows how to enable the horizontal scroll bar and also how to disable the vertical one at the same time.

Regards,
Petur Subev
the Telerik team

[Jason]

This is an incredibly common question, and every time I want a horizontal scrollbar I trawl through the pages to find this one, but have you actually tested this code?
Most people want fixed widths, with a horizontal scrollbar only

Run this example code, and you get vertical and horizontal scrollbars.

OK, so let's try:

.Pageable(p => p.PageSize(20))

Nope, paging works, but now we have a vertical scrollbar, plus the bottom of the grid goes nuts as we mouse over rows!

Next let's try:

.Scrollable(sc=>sc.Enabled(false).Height("*"))

Nope, now the titles of all the columns overlap the right hand side of the the grid body.

How about...

.Scrollable(sc=>sc.Height("600px"))
.Pageable(p => p.PageSize(20))

Almost! We have to guess at the height, but the vertical scrollbar is once again always visible, and I really don't want to have to guess the '600px' at design time

Why not post an example project that does the following? :
Shows a grid with a horizontal scrollbar and no vertical scrollbar that works, then post it in the knowledgebase!

Cheers,
 Jason

[Richard]

Especially not working well with PageOnScroll enabled. Auto height + PageOnScroll = Cannot paging. This is something really need to be fixed.

Richard

[Jason]

The secret is to set the Height to empty ("") in the Scrollable fluent method. If you don't do this the grid automatically adds a value in pixels.
The paging then works, and the grid auto-sizes vertically to match all of the enclosed data.
If it doesn't work for you, then try it on an empty page to see if an outer div is causing issues.

Cheers,
 Jason