Available in the OSS Version

Data Source - Overview

This sample demonstrates how to bind the igDataSource component to local JSON format.

Name	Age

This sample is designed for a larger screen size.

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

The igDataSource component is the standard Ignite UI for jQuery component for binding to various kinds and sources of data. It serves as an intermediate layer between the data-bound controls like igGrid and the actual data, which can be either local (e.g. JSON, XML, JavaScript Array, etc.) or remote (OData, REST services, WCF services, etc.). Paging, filtering, and sorting are supported, too. See the complete list of samples in the menu.

Code View

Show In JsFiddle

Copy to Clipboard

                    var data = [
    { "Name": "John Smith", "Age": 45 },
    { "Name": "Mary Johnson", "Age": 32 },
    { "Name": "Bob Ferguson", "Age": 27 }
];

// Renders the table
var renderTable = function (success, error) {
    var template = "<tr><td>${Name}</td><td>${Age}</td></tr>";
    if (success) {
        $("#table tbody").empty();
        $($.ig.tmpl(template, ds.dataView())).appendTo("#table tbody");
    } else {
        alert(error);
    }
}

//This code creates an $.ig.DataSource from JSON data
var ds = new $.ig.DataSource({
    type: "json",
    dataSource: data,
    callback: renderTable
});

// Binds to the underlying data
ds.dataBind();

                    <table id="table" class="standard-grid">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Age
            </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

                    .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;}

                    <!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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <table id="table" class="standard-grid">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>

        $(function () {
            var data = [
                { "Name": "John Smith", "Age": 45 },
                { "Name": "Mary Johnson", "Age": 32 },
                { "Name": "Bob Ferguson", "Age": 27 }
            ];

            // Renders the table
            var renderTable = function (success, error) {
                var template = "<tr><td>${Name}</td><td>${Age}</td></tr>";
                if (success) {
                    $("#table tbody").empty();
                    $($.ig.tmpl(template, ds.dataView())).appendTo("#table tbody");
                } else {
                    alert(error);
                }
            }

            //This code creates an $.ig.DataSource from JSON data
            var ds = new $.ig.DataSource({
                type: "json",
                dataSource: data,
                callback: renderTable
            });

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

</body>
</html>

             /// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
declare var ds: any;
var data = [
	{ "Name": "John Smith", "Age": 45 },
	{ "Name": "Mary Johnson", "Age": 32 },
	{ "Name": "Bob Ferguson", "Age": 27 }
];
// Renders the table
var renderTable = function (success, error) {
	var template = "<tr><td>${Name}</td><td>${Age}</td></tr>";
	if (success) {
		$("#table tbody").empty();
		$($.ig.tmpl(template, ds.dataView())).appendTo("#table tbody");
	} else {
		alert(error);
	}
}

$(function () {
	ds = new $.ig.DataSource({ dataSource: adventureWorks, callback: renderTable });
	ds.dataBind();
});

Ignite UI for jQuery | Samples

Search Results

Data Source - Overview

Code View