jQuery UI Widgets › Forums › Plugins › AngularJS › Angular Context Menu with Grid

Tagged: , , , , , , , , ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Angular Context Menu with Grid Posts
  • October 5, 2016 at 9:53 pm 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

    October 7, 2016 at 7:51 am 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

    October 7, 2016 at 8:26 pm 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

    October 10, 2016 at 9:29 am 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

    October 12, 2016 at 8:38 pm Angular Context Menu with Grid #88116

    padma
    Participant

    Hristo,

    Thanks a lot, it worked really well!

    Cheers,
    Padma

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.