Press "Enter" to skip to content

List View with horizontal scrolling

6

Sometimes you have a requirement to display a large number of columns OR columns with a lot of text on the List View. Especially, this requirement becomes a tough one, when you need to show the grid with so many columns on mobile devices. Below you can see how to implement a List View with horizontal scrolling, using JavaScript Injection. Please, refer to my another post on How to add JavaScript on Smartforms. However, I am describing all the steps below.

1. Give a specific name to your view on the form.

When you added your List View on the form, you need to set a name, which will help you to find this List View on the form. Otherwise, trying to find a list view by class will select all List Views on your form. I personally prefer selecting controls on the SmartForm by something, I can control in the Designer.

2018-11-12_07h33_30

2. Create a view parameter for your Grid Width.

If you want to change the width of the list view grid, depending on where you place it, you can create a parameter for your list view. If you do not need this level of flexibility, you can simply skip this step and in the next one just use the static value for the width.

2018-11-12_07h35_06

3. Prepare the script

On the List View you need to run a short script. For this you need to put an empty hidden literal Data Label on the view and create an expression with the script below. The expression must not be connected to the data label. Pay attention to the first selector, which must contain the name of the view from p.1.

2018-11-12_07h36_40
2018-11-12_07h50_11

4. Create a rule for changing the column width.

When you run the script above, the width of the view will be increased, however, the column headers will keep the initial sizes. This happens because the headers use the width in % and their sizes will be recalculated when you try to change something from the UI, e.g. changing the column width at runtime etc. Nevertheless, I found a tiny workaround. After you changed the width of the view, you need to hide any column and then show it. This will make K2 to recalculate the width of the column headers, taking into account the new width of the view.

2018-11-12_07h54_39
2018-11-12_07h53_17
2018-11-12_07h53_49

5. Call the rule upon the view initialization.

2018-11-12_07h56_45
2018-11-12_08h02_27

6. Enjoy the result

20181113_234009

And this is how the List View with horizontal scrolling looks on mobile devices.

20181113_234317[4]
  1. Rajit Rajit

    Thanks for the nice article and I keep visiting your site regularly, could you share Javascript which you used in form.

    Regards,
    Rajit

  2. Conray Conray

    Hi Konstantin

    I notice you are using K2 Five.
    Do you know if the above solution is working on K2 4.7?
    I followed the steps you have listed but is facing a few issues:
    1. The Hide/Show column rule isn’t triggering the UI to recalculate. As such, my column headers and body aren’t align. If I manually resize the browser window, the column headers and body will align.

    2. When I scroll to the right, the column headers appear in black color. If I mouse over it, the column header will appear.

    3. Can you explain what is the use of setting the background color of the grid-column-headers to transparent?

    Regards
    Conray

    • Konstantin Fukszon Konstantin Fukszon

      Hi Conray,

      1. I just tested this in 4.7 and it is working. If you send me your email address, I can provide you with a package to test this. You need to make sure you trigger your rules (Hiding and showing the column) after your JS ran.

      2 and 3. This is why I am using the last line and changing the background-color. Definitely, it depends on the theme you are using. I was playing with Lithium. If I do not apply background-color, then my column headers are only grey within the part I see. As soon as I scroll right, those column headers background is white. You can try to apply some color and play around with CSS.

      Regards,
      Konstantin

  3. Sheikh Anas Sheikh Anas

    Hi Konstantin,
    I am using K2 5.2, The scroll bar works fine. But when I click on different tabs, all column heading in the list view appear at left end.

    Regards,
    Sheikh Anas

Leave a Reply

Your email address will not be published. Required fields are marked *

five + 2 =