Iggrid client side binding and empty table

Hello,

I’ve tested a few scenarios:

1. Bind the grid to an existing table which I confirm that it works as is shown in our examples (in case there is well formatted html table)

2. I’ve tested initializing the grid with empty table (<table id=’t2’> </table>), then giving as a datasource of the grid another existing table which works fine as well.

3. Initializing the grid with empty table and do not providing any datasource , then upon button click bind the grid with existing table works as well.

4. If I bind the grid without specifying the columns to html table it doesn't work, I will contact our dev guys about this:

here is the code:

 $(window).load(function () {
        //Bind the grid to an existign table
        $("#t1").igGrid({
            autoGenerateColumns: false,
            columns: [
                        { headerText: "ProductID", key: "ProductID",
                            width: "100px", dataType: "number"
                        },
                        { headerText: "Name", key: "Name",
                            width: "80px", dataType: "string"
                        },
                     ],
            defaultColumnWidth: 150,
            features: [
                        {
                            name: 'Sorting',
                            type: 'local'
                        }
                     ]
        });
 
        //Initialize the grid with empty table <table> </table>
        $('#dataBindButton').live('click', function () {
            $("#t2").igGrid({
                autoGeneratingColumns: false,
                 columns: [
                             { 
                                headerText: "ProductID", key: "ProductID",
                                width: "100px", dataType: "number"
                             },
                             { 
                                headerText: "Name", key: "Name",
                                width: "80px", dataType: "string"
                             },
                           ],
                defaultColumnWidth: 150,
                features: [
                            {
                                name: 'Sorting',
                                type: 'local'
                            }
                        ]
                //dataSource: $("#t1")[0] bind the grid to empty table
            });
        });
    });
 
    // Bind the grid t1# to existing table upon button click   
    $('#bindGrid').live('click', function () {
 
        $("#t2").igGrid("dataSourceObject", $('#t1')[0]);
        $('#t2').igGrid('dataBind');
 
    });

Here's the tables:

 <table id="t1" cellpadding="5" cellspacing="0" border="1">
                            <thead>
                                <tr>
                                    <th>
                                       Product ID 
                                    </th>
                                    <th>
                                      Product Name
                                    </th>
                                    <th>
                                      Product Number  
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>1</td><td>Adjustable Race</td><td>AR-5381</td></tr>
                                <tr><td>2</td><td>Bearing Ball</td><td>BA-8327</td></tr>
                                <tr><td>3</td><td>BB Ball Bearing</td><td>BE-2349</td></tr>
                                <tr><td>4</td><td>Headset Ball Bearings</td><td>BE-2908</td></tr>
                                <tr><td>316</td><td>Blade</td><td>BL-2036</td></tr>
                                <tr><td>317</td><td>LL Crankarm</td><td>CA-5965</td></tr>
                                <tr><td>318</td><td>ML Crankarm</td><td>CA-6738</td></tr>
                                <tr><td>319</td><td>HL Crankarm</td><td>CA-7457</td></tr>
                                <tr><td>320</td><td>Chainring Bolts</td><td>CB-2903</td></tr>
                                <tr><td>321</td><td>Chainring Nut</td><td>CN-6137</td></tr>
                            </tbody>
                        </table>
                        <br/>
                        <br/>
                        <table id='t2'> </table>

$('#dataBindBtn').live({ click: function (e) { var ds = new $.ig.DataSource({ type: "htmlTableDom", dataSource: $("#t1")[0] }); ds.dataBind(); $("#grid1").igGrid({ autoGenerateColumns: true, dataSource: ds, height: '400px' }); } });