This is a migrated thread and some comments may be shown as answers.

Can't get Horiztonal scroll bars in Kendo grid in MVC not showing up.

8 Answers 269 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
James
Top achievements
Rank 2
James asked on 26 Jul 2012, 06:56 PM
Hi all,

I'm new to using the Kendo grid or the Telerik MVC extentions at all. But I looked on Google quite a bit for this answer and didn't find anything, so here I am.

Subject pretty much says it all. My columns get scrunched to fit the containing div, but I really need a horizontal scroll bar here.

Here's a snippet of my code:

@(Html.Kendo().Grid(Model.CurrentClient.Users)
.Name("ClientUsers")
.Columns(columns =>
{
columns.Bound(u => u.FirstName).Width(100);
columns.Bound(u => u.LastName).Width(100)
<snip!>
columns.Bound(u => u.Employee).Width(100);
columns.Bound(u => u.Username).Width(100);
})                                       
.Scrollable(builder => builder.Enabled(true).Height(200))
)


Any advice?

Thanks,
James

8 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Jul 2012, 07:50 AM
Hello James,

In order to get a horizontal scrollbar, you need to have explicit widths for all columns and the Grid width needs to be smaller than the sum of the column widths - that's all. An alternative approach is to use TableHtmlAttributes() and define a large enough width to the Grid table.

I am not sure what is the purpose of the <snip!> string, but it should not be there.

All the best,
Dimo
the Telerik team
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
James
Top achievements
Rank 2
answered on 27 Jul 2012, 12:23 PM
Dimo,

The "snip" string is there to signify that I didn't list all 14 columns (each with a width of 100) that are in the grid. I did it for the sake of clarity. Sorry for the confusion.

Having said that my column widths are all 100 and the grid is in a div that has the width set as 710. No better. I set the TableHtmlAttribute as you suggested below (I set style to "width: 710px;"). No better.

I want this to work, but if I can't get it resolved soon (like in a few hours) I need to go back to jQuery UI. :(
0
Dimo
Telerik team
answered on 27 Jul 2012, 12:46 PM
Hi James,

There is no use in setting the table width to match the Grid width. It should be larger than the Grid width in order to obtain a horizontal scrollbar.

On a side note, if you have explicit pixel widths for all columns, there is no need to define a table width.

If you need further assistance, please send a runnable example and I will take a look. I am sure the problem is trivial to resolve.

Greetings,
Dimo
the Telerik team
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
James
Top achievements
Rank 2
answered on 27 Jul 2012, 12:54 PM
Dimo,

There is nothing else to send you other than what's in my original post. I have a table with a dozen or so columns all with 100px width. I need it to fit in a space of 710px with a horizontal scroll bar. I have followed every example of how to do this you have (not that they were easy to find by the way) and it doesn't work.

jQuery is free and I have NEVER had an issue getting a scroll bar to work. WTH?!
0
Dimo
Telerik team
answered on 27 Jul 2012, 01:54 PM
James,

I am not sure that phrases such as "WTH?!" or "extremely shitty" are very constructive and contribute to a better cooperation with support staff.

I am attaching a runnable project, which demonstrates Grid scrollbar usage. Please compare with your implementation.

Kind regards,
Dimo
the Telerik team
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
James
Top achievements
Rank 2
answered on 27 Jul 2012, 02:46 PM
Dimo,

The communication has been poor on both sides. This is probably something you and I shouldn't hash out here.

A friend of mine solved the problem; there was an issue being caused by the fact that an upstream _layout page was using a bundle with a VERY old version of jQuery that was somehow overriding what my bundle was supposed to be putting in. I've ensured that my page is using version 1.7.2 and the grid seems to be working fine now.
0
Vinay
Top achievements
Rank 1
answered on 02 Aug 2012, 02:34 AM
Hi James,

I am having the same problem.. Width of the grid is 700px and the grid is having 10 columns each width is 100px.
I am using ".Scrollable(s => s.Height("auto"))" for vertical scrolling and for horizontal am having problem with the grid.
Grid height is increasing as i mouse hover on grid.

Thanks in advance
0
CAM
Top achievements
Rank 1
answered on 24 Aug 2012, 06:33 PM
Vinay, you must be using IE...it is a known issue with auto heights and links that works fine in other browsers.
The only option I have found to have a separate css for IE that uses a fixed height.  Otherwise turn off hovers and links....but this would render most grids useless..
Tags
Grid
Asked by
James
Top achievements
Rank 2
Answers by
Dimo
Telerik team
James
Top achievements
Rank 2
Vinay
Top achievements
Rank 1
CAM
Top achievements
Rank 1
Share this question
or