Populate a Cell With Data

Wijgrid allows you to update data in a particular cell with the help of a button click event. A user can define the new value in the data source, which is updated immediately on button click.

For example, the script below adds a function on button click event, which replaces the old value that is 28 with new value that is 70 in cell (2,3) of column Quantity when a user clicks CLICK button.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, data: [ ['Ipsum LLC', 63.57, 209, .11, '02-01-2014', 'True'], ['Lorem Inc', 74.85, 73, .19, '02-01-2014', 'False'], ['Dolor International', 29.86, 45, .20, '02-01-2014', 'False'], ['Blandit Enterprises', 81.68, 28, .25, '02-01-2014', 'True'], ['Vivamus Services', 76.30, 67, .12, '02-01-2014', 'True'], ], columns: [ { headerText: "Product Name", dataType: 'string' }, { headerText: "Unit Price", dataType: 'currency' }, { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' }, { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' }, { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'dd-MMM-yyyy' }, { headerText: "Overseas", dataType: 'boolean' }, ] }); $("#btnChangeValue").click(function () { var grid = $("#wijgrid"); grid.wijgrid("currentCell", 2, 3); // move current cell to a new position (x, y) grid.wijgrid("currentCell").value(70); // update underlying datasource with a new value grid.wijgrid("ensureControl", true); //refresh wijgrid }); }); }); </script>

Script

Copy Code

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

                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                data: [
                    ['Ipsum LLC', 63.57, 209, .11, '02-01-2014', 'True'],
                    ['Lorem Inc', 74.85, 73, .19, '02-01-2014', 'False'],
                    ['Dolor International', 29.86, 45, .20, '02-01-2014', 'False'],
                    ['Blandit Enterprises', 81.68, 28, .25, '02-01-2014', 'True'],
                    ['Vivamus Services', 76.30, 67, .12, '02-01-2014', 'True'],
                ],

                columns: [
                   { headerText: "Product Name", dataType: 'string' },
                   { headerText: "Unit Price", dataType: 'currency' },
                   { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' },
                   { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' },
                   { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'dd-MMM-yyyy' },
                   { headerText: "Overseas", dataType: 'boolean' },

                ]
            });

            $("#btnChangeValue").click(function () {
                var grid = $("#wijgrid");
                grid.wijgrid("currentCell", 2, 3); // move current cell to a new position (x, y)
                grid.wijgrid("currentCell").value(70); // update underlying datasource with a new value
                grid.wijgrid("ensureControl", true); //refresh wijgrid
            });
        });
            });
</script>