Deleting a Row

The wijgrid widget allows users to delete rows by setting the showDeleteButton option to true. By default, its value is False.

For example, the script below sets the showDeleteButton option to true and a Delete button appears on the left hand side of each row. A user can easily delete a particular row by clicking the delete button.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ allowSorting: true, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ { showDeleteButton: true}, // displays delete button with each row. { headerText: "Number",dataType:'number'}, { headerText: " Country",dataType:'string'}, {headerText: "Player", dataType:'string'}, {headerText: " Position", dataType:'string'}, ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            
            allowSorting: true,
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
              
            ],

         columns: [
                { showDeleteButton: true}, // displays delete button with each row.              
                { headerText: "Number",dataType:'number'}, 
                { headerText: " Country",dataType:'string'},
                {headerText:  "Player", dataType:'string'},
                {headerText: " Position", dataType:'string'},
      
            ]
        });
    });
    });
</script>