Adding a New Row

The wijgrid widget allows users to add a new row using the data option. However, a user can add a new row at runtime as well.

For example, the script below allows users to add a new row by clicking the Add New Row button. The script sets the selectionMode to singleCell and editingMode to cell, which lets a user add values into the selected cell.

Live Widget
Script

Script	Copy Code
<script type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { var employees = [ { ID: 0, Name: "John" }, { ID: 1, Name: "Douglas" } ]; $("#wijgrid").wijgrid({ data: employees, selectionMode: 'singleCell', editingMode: 'cell', }); $('#wijgrid').closest('.wijmo-wijgrid').keydown(function (e) { if (e.which == '2') { $('#wijgrid').wijgrid('beginEdit'); } }); $("#btnAdd").click(function () { var data = $("#wijgrid").wijgrid("data"); data[0].Name = "John"; data.push({ ID: '', Name: " " }); // add a new item $("#wijgrid").wijgrid("ensureControl", true); // refresh wijgrid }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
 require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        var employees = [
            { ID: 0, Name: "John" },
            { ID: 1, Name: "Douglas" }
        ];
        $("#wijgrid").wijgrid({
            data: employees,
            selectionMode: 'singleCell',
            editingMode: 'cell',
            });
        $('#wijgrid').closest('.wijmo-wijgrid').keydown(function (e) {
            if (e.which == '2') {
                $('#wijgrid').wijgrid('beginEdit');
                  }
                     });
                $("#btnAdd").click(function () {
                var data = $("#wijgrid").wijgrid("data");
                data[0].Name = "John";
                data.push({ ID: '', Name: " " }); // add a new item
                $("#wijgrid").wijgrid("ensureControl", true); // refresh wijgrid
            });
        });
});
  </script>