Smartform List View With Fixed Header

While using the tables in web pages, if it contains many rows, that does not fit in the page height, a vertical scroll bar is generated on the right side of the page, allowing users to display the lower rows of the table. In scrolling down, however, the table headers are no longer visible, so users may need to scroll back up the page to check column headings.

In this case users would by far prefer to have the column headers kept steady at the top of the screen, while the scroll bar scrolls just the table rows.

Same issue arises in smart form while List view having lot of data and we are not using pagination ans when Smart form  having lot of views and list view  is some where between them.

Smartform doesn’t provide this feature but it doesn’t mean that we can’t be achieved this feature in smart forms list view. Smartforms allow us to write jQuery/javascript and CSS which is a key point to achieve such functionality.

By using the CSS with properties position, top and z-index with appropriate values we can achieve this.

.fixed {
      position: fixed;
      top: 0; 
 /* value will change if have padding  or extra content on top */
    z-index:99;
 }

This will work fine if in smart form you have only one view with list view, but in case if we have lot of view and list view is somewhere in between ,then this style sheet will not be enough.

In that case, we need to use jQuery/JavaScript to add this class “fixed” to the list view header when list view reach to the top of page and remove it when all rows are scrolled up. So, that it will not appear on other view or data.

To do this will walk through a small example with below steps:

We have an view which is added to smart form under other view, to make a fixed header will go with below steps one by one.

Fixed header table -1.jpg

Step 1: Write jQuery script which will call on scroll after DOM is Loaded

Open editor and write the script with ready function, as we have to execute scroll function when DOM (document object model) has been loaded.

$(document).ready(function() {

});

And now  we have to call function which will invoke on scrolling the page.

$(window).scroll(function(){

});

Step 2: Now during scroll we have to add the CSS class to list view header so that it will appear as fixed when list view reached atop of page during scroll. But for this we need to find the scroll position when list view will be at top of page.

To find this we have very simple logic

Var FixedHeaderPosition = (Page height) – (height of page from bottom to till list view header which you want to have fixed header)

Page height can be fetched using     :   $(document ).height()

Now we have to calculate height of page from bottom to till list view which you want to have fixed header

For this open smart form in running mode and then use browser inspect option available under developer mode to get Css selector.

  • Right click on browser and then select Inspect. then click on page inspector option. or use (Ctrl+Shift+C) keys to use this.
  • Now move your cursor and select  list view column header.Fixed header table -3.jpg
  • Right click on selected item in elements window and from menu select  Copy and then Copy Selector.Fixed header table 4

Now get the CSS selector for all the views (i.e. from list view you want to add fixed header till bottom of page)

As in our example there are only 2  views vertically in which list view is in bottom view, so I have to only get CSS selector of table to get its height.

Var viewEmployee = $(“#962f0357-e8d2-41fa-97d3-df05a42dee11_b1759c6a-0e38-4ecd-9e9f-e48b438637e4_b35ee64f-d6ef-6072-2c74-e84943975864_c326c919-19fd-4c9b-b62b-73293bd6b42f”)

As here we want to keep only list view header as fixed during scroll so will need CSS selector for header.

Var viewEmployeeHeader = $(“#962f0357-e8d2-41fa-97d3-df05a42dee11_b1759c6a-0e38-4ecd-9e9f-e48b438637e4_b35ee64f-d6ef-6072-2c74-e84943975864_c326c919-19fd-4c9b-b62b-73293bd6b42f > div.grid-body > div.grid-column-headers”);

As style  Position : fixed  will over right the header width so we need to get content width and set it as width for header.

var viewContent = $(“#962f0357-e8d2-41fa-97d3-df05a42dee11_b1759c6a-0e38-4ecd-9e9f-e48b438637e4_b35ee64f-d6ef-6072-2c74-e84943975864_c326c919-19fd-4c9b-b62b-73293bd6b42f > div.grid-body > div.grid-body-content > div > div > table”);

viewEmployeeHeader.css(“width”,viewContent.width()+“px”);

Step 3: Add condition to check if scroll height is grater then required position. If yes then add cssclass. Else remove class

Var FixedHeaderPosition = $(document ).height() – viewEmployee.height();
if ($(this).scrollTop() > FixedHeaderPosition) {
viewEmployeeHeader.addClass(‘fixed’);
viewEmployeeHeader.css(“width”,viewContent.width()+”px”);
}
else{
viewEmployeeHeader.removeClass(‘fixed’);
}

Step 4: Now Will Open the view in design mode and add Jquery and CSS in two separate DataLabel’s in Expression under property.  Remember to keep checked Literal option checked.

  • while adding jQuery add script inside Script  opening and closing tags.
  • While adding style sheet  add it inside style opening and closing tags

Fixed header table script and Css DataLabel.jpg

Out Put :

Now run your smart form and scroll the page, once your list view reached to the top of page header will appear as fixed on top.

Fixed header table -output .jpg


CSS can also be directly applied here from jQuery without adding style sheet.

In this case replace add class with
$(“#divId”).css (“property”,”value”);
if using multiple properties then
$(“#divId”).css ({“property1”:“value1″,”property2”:“value2”});
and in else part replace with default values i.e. position :absolute;

Advertisements

2 thoughts on “Smartform List View With Fixed Header

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s