Angular JQX Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, angular grid, angularjs, createeditor, custom editor, dropdownlist column, grid, jqxgrid

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 11 months ago.

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

Author

Angular JQX Grid Posts

February 6, 2016 at 10:36 am Angular JQX Grid #81198

Vikrant

Participant

Hi,

I am using Angular directive of jqx grid.
Issue:-

I am not able to create customized drop down list for drop down column .

Please find the code below .
<HTML Code>
<jqx-grid id=”grid” jqx-on-cellendedit=”cellendedit()”jqx-settings=”{{table}}”></jqx-grid>
<JS CODE>

$scope.table=
{
altrows: true,
editable: true,
selectionmode: ‘singlecell’,
sortable:true,
autoheight:true,
width:”100%”,
source:dataForRow,
columns: [
{ text: ‘Fac’, dataField: ‘name’,editable: false},
{ text: ‘F Score’, dataField: ‘F’,editable:false},
{ text: ‘P’, dataField: ‘P’},
{ text: ‘D’, dataField: ‘D’,editable:false},
{ text: ‘S’, dataField: ‘Se’,editable:false},
{ text: ‘Co’, dataField: ‘com’,editable:false},
{ text: ‘Cat’, dataField: ‘selected’,columntype: ‘dropdownlist’,editable:true,
createeditor: function (row, cellvalue, editor) {
// This function is not getting called .
editor.jqxDropDownList({ source: [“Available”, “Option”] });
}}
]
}
Can you please tell me what I am doing wrong

February 8, 2016 at 7:35 am Angular JQX Grid #81221

Dimitar

Participant

Hi Vikrant,

Here is an example based on the demo Grid using jqxSettings that shows how to achieve your requirement:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.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 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["city"] = city[i];
                row["country"] = country[i];
                data[i] = row;
            }

            $scope.people = data;

            $scope.bindingCompleted = "";
            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                ready: function ()
                {
                    $scope.settings.apply('selectrow', 1);
                },
                sortable: true,
                source: $scope.people,
                editable: true,
                columns: [
                    { text: 'First Name', datafield: 'firstname', width: 150, columntype: 'dropdownlist',
                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight)
                        {
                            editor.jqxDropDownList({ source: ["Available", "Option"] });
                        }
                    },
                    { text: 'Last Name', datafield: 'lastname', width: 150 },
                    { text: 'Title', datafield: 'title', width: 150 },
                    { text: 'City', datafield: 'city', width: 150 },
                    { text: 'Country', datafield: 'country' }
                ],
                bindingcomplete: function (event)
                {
                    $scope.bindingCompleted = "binding is completed";
                }
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-settings="settings"></jqx-grid>
        <br />
        {{bindingCompleted}}
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.