• State Not Answered
  • Replies 2 replies
  • Subscribers 95 subscribers
  • Views 1436 views
  • Users 0 members are here
Options
Related

How to make the Header and footer of the grid fixed in the Web Portal?

prakash savariraj
over 4 years ago

I would like to display the unmanaged AD accounts data in the Web Portal. So I have created Database object collection for ADSAccount table and created grid band under grid for the same. Then I am displaying 3 columns (one custom column for check box, SAMAccountname and Account Owner fields)

Headers - Column1(no name for check box), Column2 (SAMAccount Name) Column3 (Account Owner)

Footer - The pagination data 

how to fix the Headers and Footer and enable the scroll option only for Grid items??

  • 0 over 4 years ago

    Hi,

    Unfortunately the WebDesigner grid control cannot do this.

    Regards,
    Hanno

  • 0 over 3 years ago

    Try this, even if this is a developing experiment…. 

    Create a Custom Layout for Grid object (so you can apply the definition to the Grid from your web designer).

    Add to the layout the Variable "CssClassName" and add the following CSS document, in case just modify as you like.

    .fixed_headers table {
/*  width: 750px;*/
  table-layout: fixed;
  border-collapse: collapse;
}
  
.fixed_headers th { 
    text-decoration: none; 
}
.fixed_headers  th, td {
    text-align: left;
  }
  
	
/*.fixed_headers td:nth-child(1), th:nth-child(1) { min-width: 200px; }
.fixed_headers td:nth-child(2), th:nth-child(2) { min-width: 200px; }
.fixed_headers td:nth-child(3), th:nth-child(3) { width: 350px; }
*/
.fixed_headers thead {
	}
	
.fixed_headers tr {
      display: block;
      position: relative;
    }
	
.fixed_headers tbody {
    display: block;
    overflow: auto;
    width: 100%;
   height: 300px;
 }

.fixed_headers tr:nth-child(even) {
      background-color: #DDD;
    }

.fixed_headers .GridCell {
    padding: 0.5em;
	vertical-align:middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    now, add a Grid into your web page and apply the custom layout.

    Just remember, assign width to ALL grid elements (gird width, column width, header width and cell width), otherwise it cannot calculate the header - column . cell aspect ratio and width.

    Usually I use (3 times… ) the following extended property 

    'style'
'
width:50px !important;
min-width:50px !important;
max-width:50px !important;
'

    at the following levels:

    Grid

    -- Girdband

    ---- ….

    ---- Column1

    ---- + Extended Property (add here)

    ---- Header Cell

    ---- + Extender Property (Add here)

    ---- Cell

    ---- + Extended Property (Add here)

    Let me know…