I am consistently challenged with UI requirements that are not supported in K2 Smartforms. One of these challenges is how to avoid having to display a long list on screen in List View. This can be helped, though, as the excellent characteristic of K2 Smartforms is that it supports the injection of Javascript/JQuery in Views and Forms. So, we can include a scrollbar against the List View in order to easily display numerous items on screen while ensuring that the List View Headers are kept fixed on top.

  1. Assuming you have your List View already built and displaying - for example - 50 items per page, add your List View to a Form.
  2. Select the View and use the properties panel to specify the title of the View.2015-04 Blog - Scroll bar w JQuery - Image (1)
  3. Add a Data Label to the Form.
  4. Select the Data Label and create an Expression against it by using the Properties Panel.2015-04 Blog - Scroll bar w JQuery - Image (2)
  5. Set JS Scrollbar and Fixed Header as the Expression name.
  6. Set the Expression Value to the following: <script>$(".grid-header-text:contains(’Your View Title Here’)").parents(".grid-header:first").siblings(".grid-body").find(".scroll-wrapper" ).css({ height: "300px", overflow: "scroll"}); </script>
  7. Replace Your View Title Here with the title you previously set.
  8. Change the value of the height according to your scenario.2015-04 Blog - Scroll bar w JQuery - Image (3)
  9. Click OK twice to save the Expression and quit the Expression editor.
  10. Click Finish to save this Form. Running the Form, this is what you should expect to see: 2015-04 Blog - Scroll bar w JQuery - Image (4)

Note: This has been tested on Smartforms 1.0.7.