Can we please have a simpler solution for scrollable options

[Bob]

Hi all,

I'm getting so frustrated with your scrollable options on the grid.
It seems to get horizontal scrolling to work we must set the width of the grid which has to be less that the total width of all the columns?
How am we supposed to get that to work when we have column selectors and users are adding and removing columns?
How the hell am I supposed to know the width of the grid when I want it to to expand to 100% width of the container?

Is it not possible for you guys to calculate the width after render, compare this to the parent div and then decide whether or not to implement a horizontal scroll?

A stackable option would be great so on a mobile device columns will stack with a container border around each row.
But let's just get the horizontal scroll sorted first, I have so many customers where the end of the grid simply disappears behind the container div.

Please help, your grid is way ahead of the competition for functionality but way behind in terms of responsive options.  The media-width stuff just causes even more work and confusion, I tried but had to pull it out after a lot of work and a lot of complaints.

BTW - well done on the forum, it's coming along nicely...

Cheers,
Bob

[Bob]

This wasn't a comment, it was a general question on the responsiveness of the grid.  If I have to waste a lot of time putting together an example I will.  But the process is simple, declare a grid with, say, seven columns.  Declare a width for each column (as you always want us do) and leave one as undefined so it can shrink as your instructions say.  Now place a column chooser widget on the grid header and watch the mayhem.

Instructions please, I have a few grids with the same data set but I need to group it if it used for one purpose.  For another purpose I need to remove grouping and columns and add other columns... and so on.  How do I design the grid for a typical Samsung device with 360px width?  It's just not on, please do something with the responsiveness of your grid.  The rendering is all over the place.
I even have instances of the header row disappearing completely if the pixel width is... (add answer here). 
And then I'm told that every column must have a fixed width in order to implement horizontal scrolling?

Our system is built on your grids, we're trying to hit the lower end of the market where 768X1024 is not unusual.  IMHO you keep building more and more functionality on top of an architecture which is simply not responsive.  Please stop the additional functionality, what we have is great.  What we need is attention to the architecture, the grid is simply not responsive and glib answers pointing to setting pixel width really don't cut it any more.

I've been a customer for many years, long before Progress was a sparkle in some investors eye.  If you want to compete in this market you really have to do something other than adding functionality.  Please, please, please get a grip on responsiveness and stop answering requests with media-queries and pixels - it just doesn't cut it any more.

Disgruntled,
Bob

 

 

 

[Martin]

Hello Bob,

Thank you for your honest and detailed feedback regarding the Grid component. We appreciate the time spent on sharing your thoughts.

Let me begin by summarizing how the Grid horizontal scrolling functionality works.

In general, the Grid behaves as any regular HTML table with a fixed layout. The Grid will be scrollable as long as the cumulative width of its visible columns is greater than the Grid width (if its width is not explicitly set, the Grid occupies 100% of its container).

When we leave one (or more) column(s) without a set width, it(they) will shrink alongside the Grid container (and vice versa). It is important to mention that when the Grid width is less than or equal to the cumulative width of all columns with a set width, the columns that have no set width will disappear (because their width will be 0).

These use cases and several more are described in the following section of our documentation. You might have already explored it, but I will share it again just in case:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/width/

I understand the frustration that this may cause but using media-width with templates is the way to go in order to merge the data from several columns into one in the mentioned manner on smaller screen resolutions.

Any specific suggestions on how we can improve the existing Grid functionality and APIs are more than welcome.

Regards,
Martin
Progress Telerik

[Bob]

Hi Martin,

Sorry about that, it was difficult day with more complaints from users about things disappearing with the grid.  I have struggled with it for years but I love the functionality and my users too, especially for data analytics.

Surely one comment would have to be that the grid should be rendered not with table layout but with grid layout.  Nobody has designed complex widgets in html using tables for some 20 years...
A further comment would be that if I apply

[scrollable]="'scrollable'"

 

To my grid but I have no fixed height I get an empty scroll bar to my right which throws out column alignment because no padding is applied to the column header.

Here's another example of a grid which takes advantage of much functionality.  On high res it looks great.

On low res not so good...  One column has dropped off the end and falls behind the container.

In this instance surely you should be able to something by calculating the width of the parent container, the width of the grid and then making a decision to apply horizontal scrolling?  My users have a whole set of widgets declared as columns in a column menu in the grid header.  they select the ones they want and then persist settings.  each user may have different things to look at.  In such a volatile environment media-queries just doesn't cut it, it becomes a whole load of spaghetti.

It's a general ramble about my problems with the grid and responsiveness.  When I moved from JQuery to Angular I thought you might have redesigned from the bottom up but it appears not.  I really do believe a redesign is wanted, a la DataTables and PrimeNg.

Rant over, sorry to trouble you!

Cheers,

Bob

[Bob]

Hi Martin,

A further question on responsiveness, how does the grid decide what to do with the columns headers?
I have a frequent issue raised by my customer where all of a sudden the grid will decide to not render the header any more.
Here's a support request from today....

Here's how the grid should look:

 

Can you explain under what conditions the grid would decide that the column headers no longer need to be displayed?
Cheers,

Bob

 

 

[Martin]

Hello Bob,

Thank you for the screenshots.

Using the table layout approach to represent data has its useful properties which we utilize for layout purposes, but there are also disadvantages that cause troubles (for example with group headers).

In general, the scrollable option supports three values:

• none - renders no scrollbar
• scrollable - which requires Grid height to be set, otherwise, an empty scrollbar will appear as you already explored.
• virtual- displays no pager and renders a portion of the data 

As for the hidden column on small resolution, the reported behavior is expected in case, that column is the only one that has no set width. What could be done to avoid this behavior is by setting explicitly the width property of those columns which might get hidden on smaller screen sizes.

About the automatic horizontal scroll, I want to encourage you to open a new feature request in our Feedback Portal, by describing in detail the case and the desired enhancement. We are tracking the customer demand for such enhancements and consider providing them in the future, based on the votes and estimated business value.

Regarding the visibility of the Grid header, by default, the headers could be hidden by setting the hideHeader property of the Grid to true, or by using some custom CSS styles. I want to mention that internally we do not have logic for hiding headers in specific circumstances.

Regards,
Martin
Progress Telerik