Update Data in a Grid

Building on the Quick Start example, you can change the underlying data in a grid using the data option.

The data format of the structure returned by the data() method is the same as the original dataset. If the format is an HTML table or 2D array, it returns a 2D array. If the format is an array of hashes, it returns an array of hashes.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the axis label rotation and the marker type and uses the seriesStyles option to change the color of the markers and the color and width of the lines.

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 () { var employees = [ {ID: 0, Name: "Nancy"}, {ID: 1, Name: "Frank"} ]; $("#wijgrid").wijgrid({ data: employees }); $("#btnUpdate").click(function() { var data = $("#wijgrid").wijgrid("data"); data[0].Name = "Nancy"; // change the Name property of the 1st item data.push({ID: 2, Name: "David"}); // add a new item $("#wijgrid").wijgrid("ensureControl", true); // refresh 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 () {
        var employees = [
            {ID: 0, Name: "Nancy"},
            {ID: 1, Name: "Frank"}
        ];
        
        $("#wijgrid").wijgrid({
            data: employees
        });
        
        $("#btnUpdate").click(function() {
            var data = $("#wijgrid").wijgrid("data");
            data[0].Name = "Nancy"; // change the Name property of the 1st item
            data.push({ID: 2, Name: "David"}); // add a new item
            
        $("#wijgrid").wijgrid("ensureControl", true); // refresh wijgrid
        });
        });
    });
</script>

In the <body> section of your HTML file, the basic <div> tag is sufficient to create the widget, but we need to add a button with markup like the following.
Drop down and copy markup to paste in <body> section
Markup
Copy Code

<table id="wijgrid"> </table> <button id="btnUpdate">Update</button>
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click the button to update the data.

Markup	Copy Code
<table id="wijgrid"> </table> <button id="btnUpdate">Update</button>

Reference

wijgrid API

data Method

Widgets

Quick Start