Uncaught TypeError: Cannot read property 'width' of undefined

[shivdhwaj]

I got this error on console: Uncaught TypeError: Cannot read property 'width' of undefined at calcWidth += cfg.colModal[ct].width; on fixed_table_rc.js : 67

Here is my code that I am playing with:

<script type="text/javascript">
   $(document).ready(function() {
    $('#fixedTable').fxdHdrCol({
        fixedCols:  3,
        width:     "100%",
        height:    400,
        colModal: [
               { width: 50, align: 'center' },
               { width: 110, align: 'center' },
               { width: 170, align: 'left' },
               { width: 250, align: 'left' },
               { width: 100, align: 'left' },
               { width: 70, align: 'left' },
               { width: 100, align: 'left' },
               { width: 100, align: 'center' },
               { width: 90, align: 'left' },
                   { width: 400, align: 'left' }
        ],
        sort: true
    });
   });
</script>

And Yes I have included the files 3 js and 1 css.

[meetselva]

Could you post the relevant HTML table code?

I think some of your td's have a colspan which is causing the issue. I can crack it down further after seeing the table code.

You can post it here or point to an URL where I can see the table.

[shivdhwaj]

Here is the code:

<div class="main-container">
   <div class="container-fluid">
      <div class="row-fluid">
         <h3>Testing Table</h3>
         <table class="table" id="fixedTable">
            <tr>
            <thead>
               <th>ID</th>
               <th>Title</th>
               <th>Ref</th>
               <th>Status</th>
               <th>Created</th>
               <th>listing_type</th>
               <th>Currency</th>
               <th>Price</th>
               <th>quantity</th>
               <th>Test Duration</th>
               <th>Condition</th>
               <th>Country</th>
               <th>Description</th>
               <th>Time Max</th>
               <th>Location</th>
               <th>Code</th>
               <th>Methods</th>
               <th>Email</th>
               <th>Category</th>
               <th>Returns </th>
               <th width="100">Comment</th>
            </thead>
            </tr>
            <tbody>
               <tr>
                  <td>96</td>
                  <td class="strong">Super Deluxe Wooden </td>
                  <td>1815</td>
                  <td></td>
                  <td>2014-12-01 13:39:34</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td>95</td>
                  <td class="strong">Candle Holder / Stand - For T Light </td>
                  <td>181544</td>
                  <td></td>
                  <td>2014-12-01 13:39:23</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td>94</td>
                  <td class="strong">Tulsi Tea - Sweet Lemon </td>
                  <td>181317</td>
                  <td></td>
                  <td>2014-12-01 13:39:06</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

Here is the image of issue that I am facing : https://www.dropbox.com/s/7372h2ptm63bgqr/fixedHeaderVerticalBug.png?dl=0

[meetselva]

Your code had 2 issues,

1. The thead tr was defined outside like <tr><thead>, it should be <thead><tr>
2. The colModal parameter should match the number the columns in the table. The colModal defines the width and align property of each columns in the table.

I have changed your code and made it working in a fiddle http://jsfiddle.net/0mr8fqz1/

[shivdhwaj]

Ok Thats good But what if we have the dynamic column numbers because we have dynamic columns on the conditions.

How we are going to handle it?

[meetselva]

It depends on how you are building the dynamic number of columns. You probably need to build the colModal array within that dynamic code and pass it to the plugin.

[shivdhwaj]

Ok Then do we have to specifically told the plugin about the width also ? Cant we made it auto?