locked
frozen column and scrollable gridview RRS feed

  • Question

  • User799222684 posted

    I am trying to make 2 frozen columns in this grid( table) and have other columns scroll to right.

    On the last row, the height goes off the page.

       <div class="container2">
           <div class="scrolledGridView2">
               <div class="div_inside">
        <table  border="1" id="GridView2" style="border-collapse:collapse;" class="gv_2Data">
            <tr class="drow2">
                <th  class="pinned2 col_1" scope="col">Col 1</th><th  class="pinned2 col_2" scope="col">Column 2</th><th class="scrolled2" scope="col">Column 3</th><th class="scrolled2"  scope="col">Column 4</th>
            </tr><tr class="drow2">
                <td class="pinned2 col_1">1</td><td  class="pinned2 col_2">Thing 1</td><td class="scrolled2" >Thing 1 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled2" >100</td>
            </tr><tr class="drow2">
                <td class="pinned2 col_1">2</td><td  class="pinned2 col_2">Thing 2</td><td class="scrolled2" >Thing 2 Description<br />abc<br /> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX _Xyz XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled2" >200</td>
            </tr><tr class="drow2">
                <td class="pinned2 col_1">3</td><td  class="pinned2 col_2">Thing 3</td><td class="scrolled2" >Thing 3 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled2" >300</td>
            </tr>
        </table>
               </div>
           </div>
            </div>
    

    css styles

    .container2 {
        height: auto;
        float: left;
        display: block;
    }
    .scrolledGridView2 {
        overflow-x: scroll;
        text-align: left;
        width: 400px; /* i.e. too small for all the columns */
    }
    
    .div_inside {
        height: 200px;
    }
    
    .div_inside  .pinned2 {
        ; /* i.e. not scrolled */
        background-color: pink;
        z-index: 100; /* keep the pinned on top of the scrollables */
        height: 100%;
    }
    
    .pinned2 col_1 {
            left: 10px;
            width: 50px;
            display: table-cell;
            height: 100%;
        }
    
    .pinned2 col_2 {
            left: 60px; /* i.e. col1 Width */
            width: 100px;
            display: table-cell;
            height: 100%;
        }
    

    For some reason, I am missing "Column 1" and "Column 3" goes all the way to bottom of page. ie.

    This will be dynamic and some of the columns will have a large height.

    Any suggestions on how to correct it?

    frozen column and grid

    TIA
    Steve

    Sunday, April 7, 2019 6:45 PM

Answers

  • User288213138 posted

    Hi sh:
     According to your description, I modified it based on the original demo, It's basically the word-break property of Css, The main code is as follows:
       

    <td class="test1">Cell content longer longer Cell content longer Cell content longer Cell content longer</td>
       td.test1{
                    width: 15em; 
                    word-break:break-all;
                }



       It is important to note that the white-space attribute needs to be changed to initial, since nowrap cannot wrap lines.
    And  there are some other properties that have been modified.
     
    The Code:

    <style type="text/css">
            
                .table-scroll {
    	         ;
    	            max-width: 600px;
    	            margin:auto;
    	            overflow-x:hidden;
                    overflow-y:scroll;
    	            border:1px solid #000;
                }
                .table-wrap {
    	            width:100%;
    	            overflow:auto;
                }
                .table-scroll table {
    	            width:100%;
    	            margin:auto;
    	            border-collapse:separate;
    	            border-spacing:0;
                }
                     
                .table-scroll th, .table-scroll td {
    	            padding:5px 10px;
    	            border:1px solid #000;
    	            background:#fff;
                        white-space:initial;
                        /*white-space:normal;*/
    	           /*white-space:pre-wrap;*/
    	            /*vertical-align:top;*/
                }
                    
                .table-scroll thead, .table-scroll  {
    	            background:#f9f9f9;
                }
                     
                
                .clone {
    	            ;
    	            top:0;
    	            left:0;
    	            pointer-events:none;
                }
                    
                  
                .clone th, .clone td {
    	            visibility:hidden
                }
               
                .clone td, .clone th {
    	            border-color:transparent
                }
                .clone tbody th {
    	            visibility:visible;
    	            color:red;
                }
                     
                .clone .fixed-side {
    	            border:1px solid #000;
    	            background:#eee;
    	            visibility:visible;
                }
                   
                .clone thead, .clone tfoot{
                    background:transparent;
    
                }
                td.test1{
                    width: 15em; 
                    word-break:break-all;
    
                }
               
               
                
        </style>
        <title></title>
        <script type="text/javascript" src="../NewFolder1/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
             jQuery(document).ready(function() {
             jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
         });
        </script>
    
    </head>
      
    
    <body>
        <form id="form1" runat="server">
            <div id="table-scroll" class="table-scroll"   style="height:200px">
            <div class="table-wrap"  >
        <table class="main-table" style="width:1000px"   >
          <thead>
            <tr>
              <th class="fixed-side" >&nbsp;</th>
              <th class="fixed-side" >&nbsp;</th>
              <th   class="test1">Header 3</th>
              <th >Header 4</th>
              <th >Header 5</th>
              <th >Header 6</th>
              <th >Header 7</th>
              <th >Header 8</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="fixed-side" style="width:100px">Left Column</th>
              <th class="fixed-side" style="width:100px">Cell content</th>
              <td class="test1">Cell content longer Cell content longer Cell content longer Cell content longer</td>
              <td >Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td class="test1">Cell content longer longer Cell content longer Cell content longer Cell content longerCell content longer longer Cell content longer Cell content longer Cell content longerCell content longer longer Cell content longer Cell content longer Cell content longerCell content longer longer Cell content longer Cell content longer Cell content longer</td>
              <td>Cell content longer longer Cell content longer Cell content longer Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td  class="test1">Cell content longer </td>
              <td>Cell content</td>
              <td >Cell content  longer Cell content longer Cell content longer Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
               <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
    
          </tbody>
        </table>
      </div>
    </div>
        </form>
    </body>

    The Result:
     
    Best Regards
    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 9, 2019 8:57 AM

All replies

  • User288213138 posted

    Hi sh:
     According to your description, I have made a demo for you.First, I cloned a table and cover the original table,The cloned table only shows the first two columns, and the latter columns are all transparent.because the first two columns are not moving, you can only see the other columns scrolling behind.Then you get the frozen column and scrollable gridview that you want.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style type="text/css">
                .table-scroll {
    	            ;
    	            max-width:600px;
    	            margin:auto;
    	            overflow-x:hidden;
                    overflow-y:scroll;
    	            border:1px solid #000;
                }
                .table-wrap {
    	            width:100%;
    	            overflow:auto;
                }
                .table-scroll table {
    	            width:100%;
    	            margin:auto;
    	            border-collapse:separate;
    	            border-spacing:0;
                }
                .table-scroll th, .table-scroll td {
    	            padding:5px 10px;
    	            border:1px solid #000;
    	            background:#fff;
    	            white-space:nowrap;
    	            vertical-align:top;
                }
                .table-scroll thead, .table-scroll  {
    	            background:#f9f9f9;
                }
                .clone {
    	            ;
    	            top:0;
    	            left:0;
    	            pointer-events:none;
                }
                .clone th, .clone td {
    	            visibility:hidden
                }
                .clone td, .clone th {
    	            border-color:transparent
                }
                .clone tbody th {
    	            visibility:visible;
    	            color:red;
                }
                .clone .fixed-side {
    	            border:1px solid #000;
    	            background:#eee;
    	            visibility:visible;
                }
                .clone thead, .clone tfoot{
                    background:transparent;
    
                }
        </style>
        <title></title>
        <script type="text/javascript" src="../NewFolder1/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
             jQuery(document).ready(function() {
             jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
         });
        </script>
    
    </head>
      
    
    <body>
        <form id="form1" runat="server">
            <div id="table-scroll" class="table-scroll"   style="height:200px">
            <div class="table-wrap"  >
        <table class="main-table"   >
          <thead>
            <tr>
              <th class="fixed-side" scope="col">&nbsp;</th>
              <th class="fixed-side" scope="col">&nbsp;</th>
              <th scope="col">Header 3</th>
              <th scope="col">Header 4</th>
              <th scope="col">Header 5</th>
              <th scope="col">Header 6</th>
              <th scope="col">Header 7</th>
              <th scope="col">Header 8</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content </td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
               <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td>Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
    
          </tbody>
        </table>
      </div>
    </div>
        </form>
    </body>
    </html>
    
    
    

    The Result:

    Best Regard
    Sam.

    Monday, April 8, 2019 7:44 AM
  • User799222684 posted

    Sam,

    That is very close!!!

    Under  "Header 3", ( it could have been any header between 3 and 8 ), I made the cell on row 3:

    <td>Cell content<br />a very long line <br />maybe longer</td>

    The frozen columns now scroll horizontal.

    Some of the columns in header 3 to 8 can be very long and they need to wrap.

    Any suggestions?

    Monday, April 8, 2019 11:29 AM
  • User288213138 posted

    Hi sh:
     According to your description, I modified it based on the original demo, It's basically the word-break property of Css, The main code is as follows:
       

    <td class="test1">Cell content longer longer Cell content longer Cell content longer Cell content longer</td>
       td.test1{
                    width: 15em; 
                    word-break:break-all;
                }



       It is important to note that the white-space attribute needs to be changed to initial, since nowrap cannot wrap lines.
    And  there are some other properties that have been modified.
     
    The Code:

    <style type="text/css">
            
                .table-scroll {
    	         ;
    	            max-width: 600px;
    	            margin:auto;
    	            overflow-x:hidden;
                    overflow-y:scroll;
    	            border:1px solid #000;
                }
                .table-wrap {
    	            width:100%;
    	            overflow:auto;
                }
                .table-scroll table {
    	            width:100%;
    	            margin:auto;
    	            border-collapse:separate;
    	            border-spacing:0;
                }
                     
                .table-scroll th, .table-scroll td {
    	            padding:5px 10px;
    	            border:1px solid #000;
    	            background:#fff;
                        white-space:initial;
                        /*white-space:normal;*/
    	           /*white-space:pre-wrap;*/
    	            /*vertical-align:top;*/
                }
                    
                .table-scroll thead, .table-scroll  {
    	            background:#f9f9f9;
                }
                     
                
                .clone {
    	            ;
    	            top:0;
    	            left:0;
    	            pointer-events:none;
                }
                    
                  
                .clone th, .clone td {
    	            visibility:hidden
                }
               
                .clone td, .clone th {
    	            border-color:transparent
                }
                .clone tbody th {
    	            visibility:visible;
    	            color:red;
                }
                     
                .clone .fixed-side {
    	            border:1px solid #000;
    	            background:#eee;
    	            visibility:visible;
                }
                   
                .clone thead, .clone tfoot{
                    background:transparent;
    
                }
                td.test1{
                    width: 15em; 
                    word-break:break-all;
    
                }
               
               
                
        </style>
        <title></title>
        <script type="text/javascript" src="../NewFolder1/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
             jQuery(document).ready(function() {
             jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
         });
        </script>
    
    </head>
      
    
    <body>
        <form id="form1" runat="server">
            <div id="table-scroll" class="table-scroll"   style="height:200px">
            <div class="table-wrap"  >
        <table class="main-table" style="width:1000px"   >
          <thead>
            <tr>
              <th class="fixed-side" >&nbsp;</th>
              <th class="fixed-side" >&nbsp;</th>
              <th   class="test1">Header 3</th>
              <th >Header 4</th>
              <th >Header 5</th>
              <th >Header 6</th>
              <th >Header 7</th>
              <th >Header 8</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="fixed-side" style="width:100px">Left Column</th>
              <th class="fixed-side" style="width:100px">Cell content</th>
              <td class="test1">Cell content longer Cell content longer Cell content longer Cell content longer</td>
              <td >Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td class="test1">Cell content longer longer Cell content longer Cell content longer Cell content longerCell content longer longer Cell content longer Cell content longer Cell content longerCell content longer longer Cell content longer Cell content longer Cell content longerCell content longer longer Cell content longer Cell content longer Cell content longer</td>
              <td>Cell content longer longer Cell content longer Cell content longer Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td  class="test1">Cell content longer </td>
              <td>Cell content</td>
              <td >Cell content  longer Cell content longer Cell content longer Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
            <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
               <tr>
              <th class="fixed-side">Left Column</th>
              <th class="fixed-side">Cell content</th>
              <td   class="test1">Cell content longer</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
              <td>Cell content</td>
            </tr>
    
          </tbody>
        </table>
      </div>
    </div>
        </form>
    </body>

    The Result:
     
    Best Regards
    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 9, 2019 8:57 AM
  • User799222684 posted

    You are a GENIUS !!!!

    I hope this code may help others.

    Thanks  again.

    Tuesday, April 9, 2019 11:12 AM