4

I am working on an asp.net mvc-4 web application and I am using bootstrap 2.0. Currently I am heavily using the asp.net mvc web grid, in almost every controller. Now it is a great way to sort, page and view info with minimal code written. But the only issue I am facing is when users access the web grid on mobile devices. Where the web grid columns will be very thin and its data will be almost impossible to read.

Now I find two approaches to follow for improving the webgrid interface on mobile devices:-

  1. One approach to use Style:”hidden-phone” on the less important column as follows, so these columns will be hidden on mobile devices, while the most important column will be display and occupy the freed area:-

    var gridcolumns = new List<WebGridColumn>();

gridcolumns.Add(new WebGridColumn()
{
    ColumnName = "OrderID",
    Header = "",
    Style = "hidden-phone",
    CanSort = false,

  2. While the second approach is to use some css styles to change the tale style to be block instead of row by following this approach link

Now from my own experience the first approach is more user friendly since the user can still view the webgrid as table, with the most important columns. While the second approach have the advantage that all the info will be presented (nothing is going to be hidden), but having a webgrid’s table rows being shown as a block will allow the users to view max of two blocks without having to scroll down/up.

So generally speaking which approach is better to follow? to hide some columns and gain a better user experience, or to view all info as a block but have less user experience ?

Electric Sheep
  • 3,867
  • 1
  • 29
  • 38
John John
  • 1
  • 72
  • 238
  • 501

2 Answers2

2

There is no one size fits all solution. Usually, you want to pre-filter data for a mobile user (and maybe display it as a list), so that the user has only so few rows/columns to view. Attempting to display a hundred rows by 15 columns on a tiny phone is an application design issue that cannot be remedied by rearranging the rows into blocks.

I guess that if you are asking this question then your particular data grid somewhat/almost fits a typical user device. In such a situation, if the grid is really needed, I would try to take the first approach, and additionally ask the user to rotate the phone to the landscape orientation for best results. See here - Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

Community
  • 1
  • 1
Roman Pletnev
  • 5,958
  • 2
  • 21
  • 28
  • i think you mean "if the grid is really needed, I would try to take the SECOND approach, " not the first approach as you mentioned is this correct ? because if all the data inside the grid is important, then i need to show the whole row as a block .(second appraoch). while if the grid data vary in its important then i can use the first approach to hide the less important data ... – John John Jun 02 '16 at 10:26
  • 1
    In certain situations you can give the user control over the displayed columns by showing several columns from the start and allowing to display more columns via check boxes. If a grid does not fit the user device, trying to display all the data at once will look bad no matter what approach you are going to take. This is why grids are usually replaced with pre-filtered/custom lists on phones. – Roman Pletnev Jun 02 '16 at 12:57
0

You can also use bootstrap's way of scrolling tables horizontally on small devices. 

 <div class="table-responsive">
      <table class="table"> 
            ...
      </table>
 </div>

I had a similar challenge and ended up with a combination of hiding some columns, having visible-xs columns with values stacking in them , and adding the sliding with "table-responsive".

Sonya
  • 76
  • 1
  • 8