Markup and Scripting

The HTML markup for a wijGrid widget that uses a table for its data source looks like this.

Markup	Copy Code
<table id="wijgrid"> <thead> <th>Column A</th> <th>Column B</th> </thead> <tbody> <tr> <td>Cell 1A</td> <td>Cell 1B</td> </tr> <tr> <td>Cell 2A</td> <td>Cell 2B</td> </tr> </tbody> </table>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            
        });
    });
    });
</script>

The markup and script featured here results in the following live widget.

Alternatively, you can overwrite table data provided in the markup with data in the jQuery script, like this.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ data: [[0, "a"], [1, "b"], [2, "c"]] }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            data: [[0, "a"], [1, "b"], [2, "c"]]
        });
    });
    });
</script>

The markup above and the script featured here results in the following live widget.

Reference

wijgrid API

wijmo.data Namespace