Wijmo UI for the Web
Update Data in a Grid
Wijmo User Guide > Widgets > Grid > Grid Concepts > Rows > 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.

  1. 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. 

    Drop down and copy script to paste in <head> section

    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>
  2. 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>
  3. 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.
See Also

Reference

Widgets