Create Custom Context Menu

Wijgrid provides you the flexibility of adding customized items to the context menu for different cells. For example, the script below adds four new items to the context menu including one refresh option and three menu items, Menu1, Menu2 and Menu3. A user can customize and add function or link to these items as per the requirements.

The context menu works only with Mozilla Firefox web browser.

Live Widget
Script
Markup

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ { User_ID: '001', Name: 'John', Country: 'US' }, { User_ID: '002', Name: 'Tom', Country: 'Japan' }, { User_ID: '003', Name: 'Henry', Country: 'China' } ], selectionMode:'singleCell', editingMode: 'cell' }); // Start Editing after clicking enter key $('#wijgrid').closest('.wijmo-wijgrid').keydown(function (e) { if (e.which == '13') { $('#wijgrid').wijgrid('beginEdit'); } }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
            data: [
                { User_ID: '001', Name: 'John', Country: 'US' },
                { User_ID: '002', Name: 'Tom', Country: 'Japan' },
                { User_ID: '003', Name: 'Henry', Country: 'China' }
            ],
            selectionMode:'singleCell',
            editingMode: 'cell'
        });

        // Start Editing after clicking enter key
        $('#wijgrid').closest('.wijmo-wijgrid').keydown(function (e) {
            if (e.which == '13') {
                $('#wijgrid').wijgrid('beginEdit');
            }
        });
    });
</script>

Markup	Copy Code
<table id="wijgrid"></table> <div contextmenu="mymenu" style="width:200px"> <p> <i> Right Click here to see context menu </i> </p> <menu type="context" id="mymenu"> <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem> <menuitem label="Menu1"></menuitem> <menuitem label="Menu2"></menuitem> <menuitem label="Menu3"></menuitem> </menu> </div>

Markup

Copy Code

<table id="wijgrid"></table>
<div contextmenu="mymenu" style="width:200px">
<p> <i> Right Click here to see context menu </i> </p>
<menu type="context" id="mymenu">
 <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
 <menuitem label="Menu1"></menuitem>
<menuitem label="Menu2"></menuitem>
<menuitem label="Menu3"></menuitem>
</menu>
</div>