Available in the OSS Version

Data Source - HTML Binding

This sample demonstrates how to bind the igDataSource component to HTML Table Data.
ID Name Number
1Adjustable RaceAR-5381
2Bearing BallBA-8327
3BB Ball BearingBE-2349
4Headset Ball BearingsBE-2908
316BladeBL-2036
317LL CrankarmCA-5965
318ML CrankarmCA-6738
319HL CrankarmCA-7457
320Chainring BoltsCB-2903
321Chainring NutCN-6137

ID Name Number

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Press the "Databind" button to bind the data source to the table above. When you click the "Databind" button, the contents of the first HTML table will be extracted by the data source, and rendered dynamically in another templated table, below the first one.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .standard-grid { width:100%; border-top:1px solid #b1b1b1; border-right:1px solid #b1b1b1; border-spacing: 0;}
        .standard-grid th, .standard-grid td { text-align:left; border-bottom:1px solid #b1b1b1; border-left:1px solid #b1b1b1; padding:4px;}
    </style>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <input type="button" id="dataBindBtn" value="Databind" title="Databind"/>
    <table id="sourceTable" class="standard-grid">
        <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Name
                </th>
                <th>
                    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 />
    <table id="destinationTable" class="standard-grid">
        <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Name
                </th>
                <th>
                    Number
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>

        $(function () {
            $("#dataBindBtn").igButton({ labelText: $("#dataBindBtn").val() });
            $('#dataBindBtn').on("click", function (e) {
                    // Renders the table
                    var renderTable = function (success, error) {
                        var template = "<tr><td>${ID}</td><td>${Name}</td><td>${Number}</td></tr>";
                        if (success) {
                            $("#destinationTable tbody").empty();
                            $($.ig.tmpl(template, ds.dataView())).appendTo("#destinationTable tbody");
                            $("#dataBindBtn").igButton('disable');
                        } else {
                            alert(error);
                        }
                    }

                    // The $.ig.DataSchema is used to define the schema of the data
                    // Defining $.ig.DataSchema is mandatory when binding to HTML TABLE element
                    var tableSchema = new $.ig.DataSchema("htmlTableDom", {
                        fields: [
                            { name: "ID" },
                            { name: "Name" },
                            { name: "Number" }
                        ]
                    });

                    //This code creates an $.ig.DataSource from the HTML Table DOM data
                    var ds = new $.ig.DataSource({
                        schema: tableSchema,
                        dataSource: $("#sourceTable")[0],
                        callback: renderTable
                    });

                    // Binds to the underlying data
                    ds.dataBind();
                }
            );
        });
    </script>
</body>
</html>