Re-sizing of html table having knockout binding

Question

Please find the working sample code as below. This code contains 1 sample html table having 1 record.But this logic if i try to implement in my project having knockout binding , its not working.Kindly suggest me some options to re-size table columns having knockout binding. I tried jQuery Plugin but it was not working with knockout binding.
colResizable demo

  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <script  src="js/jquery-1.9.0.min.js"></script>
  <script  src="js/colResizable.js"></script>
  <script type="text/javascript">
    $(function(){   

        $("#examTable").children().colResizable();      
    }); 
  </script>

</head>
<body>
    <div  id="patientInfo">
        <div id="examTable" style="width: 100%;">   
            <table cellspacing="0" id="WLcolumn-header-table" style="width: 100%;">     
                <thead>       
                    <tr  id="WLheaderRow">
                        <th  w="1.3" style="width: 5.2%;" ><a class="select"></a></th>
                        <th  w="6"  style="width: 22%;">Student Name <img class='' ></th>
                        <th  w="3"  style="width: 12%;">Student ID <img class='' ></th>
                        <th  w="2"  style="width: 8%;">Date <img class='image-arrow-up' ></th>
                        <th  w="3"  style="width: 12%;">ABC # <img class='' ></th>
                        <th  w="4"  style="width: 14%;">Description <img class='' > </th>
                        <th  w="2"  style="width: 10%;">Teacher <img class='' ></th>
                        <th  w="2"  style="width: 8%;">Class <img class='' ></th>
                        <th  w="2"  style="width: 10%;">Status <img class='' ></th>
                    </tr>     
                </thead>    
                <tbody >
                    <tr   >
                        <td id="check_selected"      style="width: 5.2%;">
                            <a >1</a> 
                        </td>
                        <td  style="width: 22%;" >xyz</td>
                        <td  style="width: 12%;" >zyz111</td>
                        <td  style="width: 8%;"  >12-12-1912</td>
                        <td  style="width: 12%;" >Acc121</td>
                        <td  style="width: 14%;" >HELLO</td>
                        <td  style="width: 10%;"  >me</td>
                        <td  style="width: 8%;"  >ECE</td>
                        <td  style="width: 10%;"  >ACTIVE</td>
                    </tr>

                </tbody>
            </table>                                    
        </div>              
    </div>

        <br/>

        <div class="sampleText">
            <label id="sample2Txt">Drag the columns to start</label>                
        </div>

        <br/><br/>

    </div>      
 </body>
 </html>

@AmarnathBalasubramanian . Please find the code in my edited post.This is sample working code without knockout binding.Since my project is having extensive knockout binding,its not working there — user2800089, Jan 07 '14 at 07:34

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

To give a max-height to cell contents you'll need to wrap it in another element (e.g. a div). In addition, I'd recommend using the style binding, like this:

        <td>
        <div data-bind="text: rowInfo[colInfo.DataColumn],
            style: { width: Width, height: '30px' }"></div>
        </td>

See this fiddle for a working demo.

Or you can try this

<table>
<tr>
  <td><div style="height:40px; overflow:hidden">Sample</div></td>
  <td><div style="height:40px; overflow:hidden">Text</div></td>
  <td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>

edited May 23 '17 at 11:56

Community

1
1

answered Jan 07 '14 at 07:15

Amarnath Balasubramanian

9,300
8
34
62

Balasubranaiam : My requirement is that i should be able to drag columns just like in excel sheet. – user2800089 Jan 07 '14 at 07:37

Re-sizing of html table having knockout binding

1 Answers1