jQuery UI Widgets Forums Plugins AngularJS Angular Context Menu with Grid

This topic contains 4 replies, has 2 voices, and was last updated by  padma 6 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Angular Context Menu with Grid #87942

    padma
    Participant

    Hello,

    I’m trying to achieve a functionality where I right click a cell in the angular version of the Jqxgrid, and populate a context menu.
    Can someone please point me to a sample implementation of the same?

    Thanks,
    Padma

    • This topic was modified 6 years, 4 months ago by  padma. Reason: Adding tags
    Angular Context Menu with Grid #87984

    Hristo
    Participant

    Hello Padma,

    Please, take a look this example:

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <title id="Description">jqxGrid directive for AngularJS</title>
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
    
            demoApp.controller("demoController", function ($scope)
            {
                // Grid data.
                var data = new Array();
    
                var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
                var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
                var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
                var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];
                var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
                var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];
    
                for (var i = 0; i < firstNames.length; i++)
                {
                    var row = {};
                    row["firstname"] = firstNames[i];
                    row["lastname"] = lastNames[i];
                    row["title"] = titles[i];
                    row["address"] = address[i];
                    row["city"] = city[i];
                    row["country"] = country[i];
                    row["productname"] = city[i] + country[i]; 
                    row["price"] = Math.random() * 5;
                    row["quantity"] = Math.floor( Math.random()  * 10 );
                    data[i] = row;
                }
    
                // initialize the input fields.
                $("#firstName").addClass('jqx-input');
                $("#lastName").addClass('jqx-input');
                $("#product").addClass('jqx-input');
                $("#firstName").width(150);
                $("#firstName").height(23);
                $("#lastName").width(150);
                $("#lastName").height(23);
                $("#product").width(150);
                $("#product").height(23);
                if (theme.length > 0)
                {
                    $("#firstName").addClass('jqx-input-' + theme);
                    $("#lastName").addClass('jqx-input-' + theme);
                    $("#product").addClass('jqx-input-' + theme);
                }
                $("#quantity").jqxNumberInput({ width: 150, height: 23, decimalDigits: 0, spinButtons: true });
                $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, spinButtons: true });
                var editrow = -1;
    
                $scope.people = data;
                $scope.settings = {
                    width: 850,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 200 },
                      { text: 'Last Name', datafield: 'lastname', width: 200 },
                      { text: 'Title', datafield: 'title', width: 180 },
                      { text: 'Product', datafield: 'productname', width: 190 },
                      { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' },
                      { text: 'Address', datafield: 'address', width: 180 },
                      { text: 'City', datafield: 'city', width: 90 },
                      { text: 'Country', datafield: 'country' }
                    ]
                };
    
                var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup' });
                $scope.contextmenu = function ()
                {
                    return false;
                }
    
                // handle context menu clicks.
                $("#Menu").on('itemclick', function (event)
                {
                    var args = event.args;
                    var rowindex = $scope.settings.apply('getselectedrowindex');
                    if ($.trim($(args).text()) == "Edit Selected Row")
                    {
                        editrow = rowindex;
                        var offset = { left: 5, top: 50 }
    
                        var dataRecord = $scope.settings.apply('getrowdata', editrow);
                        $("#firstName").val(dataRecord.firstname);
                        $("#lastName").val(dataRecord.lastname);
                        $("#product").val(dataRecord.productname);
                        $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                        $("#price").jqxNumberInput({ decimal: dataRecord.price });
                        // show the popup window.
                        $scope.jqxWindowSettings.apply('open');
                    }
                    else
                    {
                        var rowid = $scope.settings.apply('getrowid', rowindex);
                        $scope.settings.apply('deleterow', rowid);
                    }
                });
    
                $scope.rowclick = function (event)
                {
                    if (event.args.rightclick)
                    {
                        $scope.settings.apply('selectrow', event.args.rowindex);
                        var scrollTop = $(window).scrollTop();
                        var scrollLeft = $(window).scrollLeft();
                        contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                        return false;
                    }
                };
    
                // initialize the popup window and buttons.
                $scope.jqxWindowSettings = {
                    width: 250,
                    resizable: false,
                    isModal: true,
                    autoOpen: false,
                    cancelButton: $("#Cancel"),
                    modalOpacity: 0.01
                };
                $("#Cancel").jqxButton({ theme: theme });
                $("#Save").jqxButton({ theme: theme });
                // update the edited row when the user clicks the 'Save' button.
                $("#Save").click(function ()
                {
                    if (editrow >= 0)
                    {
                        var row = {
                            firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                            quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                        };
                        var rowid = $scope.settings.apply('getrowid', editrow);
                        $scope.settings.apply('updaterow', rowid, row);
                        $scope.jqxWindowSettings.apply('hide');
                    }
                });
    
            });
        </script>
    </head>
    <body oncontextmenu="return false;">
        <div ng-controller="demoController">
            <jqx-grid jqx-settings="settings" jqx-on-rowclick="rowclick()" jqx-on-contextmenu="contextmenu()" jqx-sortable="true" jqx-source="people" jqx-width="800" jqx-height="200" jqx-alt-rows="true"></jqx-grid>
            <div style="margin-top: 30px;">
                <div id="cellbegineditevent"></div>
                <div style="margin-top: 10px;" id="cellendeditevent"></div>
            </div>
            <jqx-window jqx-settings="jqxWindowSettings">
                <div>Edit</div>
                <div style="overflow: hidden;">
                    <table>
                        <tr>
                            <td align="right">First Name:</td>
                            <td align="left"><input id="firstName" /></td>
                        </tr>
                        <tr>
                            <td align="right">Last Name:</td>
                            <td align="left"><input id="lastName" /></td>
                        </tr>
                        <tr>
                            <td align="right">Product:</td>
                            <td align="left"><input id="product" /></td>
                        </tr>
                        <tr>
                            <td align="right">Quantity:</td>
                            <td align="left"><div id="quantity"></div></td>
                        </tr>
                        <tr>
                            <td align="right">Price:</td>
                            <td align="left"><div id="price"></div></td>
                        </tr>
                        <tr>
                            <td align="right"></td>
                            <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                        </tr>
                    </table>
                </div>
            </jqx-window>
            <div id='Menu'>
                <ul>
                    <li>Edit Selected Row</li>
                    <li>Delete Selected Row</li>
                </ul>
            </div>
        </div>
    </body>
    </html>
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Angular Context Menu with Grid #87995

    padma
    Participant

    Hristo,

    Thank you for the sample! I’m trying to run the sample, but I currently get the following errors:
    jqx-all.js:7 Uncaught TypeError: Cannot read property ‘ajax’ of undefined(anonymous function) @ jqx-all.js:7(anonymous function) @ jqx-all.js:7
    MINERR_ASSET:8 Uncaught Error: [$injector:modulerr] @angular.min.js

    I am currently using the scripts in the jqx download. I also tried updating the angular.min.js file.

    Padma

    Angular Context Menu with Grid #88007

    Hristo
    Participant

    Hello Padma,

    Please, take a look at this example:
    https://www.jseditor.io/?key=grid-with-context-menu-in-angular

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Angular Context Menu with Grid #88116

    padma
    Participant

    Hristo,

    Thanks a lot, it worked really well!

    Cheers,
    Padma

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.