<div id="messages"></div>
        
<div id="tblcm"></div>

<ul id="cm">
    <li><a data-icon="fa-search" onclick="ContextMenuDemo.view()">View</a></li>
    <li><a data-icon="fa-close" onclick="ContextMenuDemo.remove()">Delete</a></li>
</ul>
                                

$(function() {
    var localData = [
        {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
        {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
        {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
        {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
        {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
        {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
        {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
        {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
        {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
        {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
    ];

    $('#tblcm').puidatatable({
        caption: 'Context Menu Integration',
        columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        selectionMode: 'single',
        datasource: localData
    });

    $('#cm').puicontextmenu({
        target: $('#tblcm')
    });

    $('#messages').puigrowl();

    window.ContextMenuDemo = {

        view: function() {
            var data = $('#tblcm').puidatatable('getContextMenuSelection');
            $('#messages').puigrowl('show', [{severity: 'info', summary: 'Row Selected', detail: (data.brand + ' ' + data.vin)}]);
        },

        remove: function() {
            var data = $('#tblcm').puidatatable('getContextMenuSelection'),
            datasource = $('#tblcm').puidatatable('option','datasource');

            for(var i = 0 ; i < datasource.length; i++) {
                if(datasource[i].vin === data.vin) {
                    datasource.splice(i,1);
                    break;
                }
            }

            $('#tblcm').puidatatable('option','datasource', datasource);
        }
    };
});