The HTML markup for a wijGrid widget that uses a table for its data source looks like this.
Drop down to view markup
| 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.
Drop down to view script
| Script |
Copy Code
|
<script type="text/javascript">
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: {
"jquery": "jquery-1.9.1.min",
"jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min",
"bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
"knockout": "knockout-2.2.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.
Drop down to view script
| Script |
Copy Code
|
<script type="text/javascript">
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: {
"jquery": "jquery-1.9.1.min",
"jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min",
"bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
"knockout": "knockout-2.2.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.
See Also
Reference
