jQWidgets Forums

Tagged: angular grid, angular ui grid, angularjs grid

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

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

Author

jqxGrid: Refresh data and select by id Posts

June 18, 2015 at 9:39 am jqxGrid: Refresh data and select by id #72670

badera

Participant

Based on your example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/grid-refresh.htm I like to just select a row after re-assigning the source in the grid’s settings:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid directive for AngularJS. Refresh Source</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">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            // Grid data.
            var data = new Array();
            var rowID = [174, 156, 214, 293, 102, 133, 58, 37, 89];
            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 < rowID.length; i++) {
                var row = {};
                row["rowID"] = rowID[i];
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                row["city"] = city[i];
                row["country"] = country[i];
                data.push(row);
            }

            $scope.grid = {};

            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                ready: function () {
                },
                sortable: true,
                source: [],
                columns: [
                    {text: 'First Name', datafield: 'firstname', width: 150},
                    {text: 'Last Name', datafield: 'lastname', width: 150},
                    {text: 'Title', datafield: 'title', width: 150},
                    {text: 'City', datafield: 'city', width: 150},
                    {text: 'Country', datafield: 'country'}
                ]
            };

            $scope.fillAndSelect = function () {

                $scope.settings.source = new $.jqx.dataAdapter({
                    localdata: data,
                    datafields: [
                        {name: "rowID", type: "int"},
                        {name: "firstname", type: "string"},
                        {name: "lastname", type: "string"},
                        {name: "title", type: "string"},
                        {name: "city", type: "string"},
                        {name: "country", type: "string"}
                    ],
                    id: "rowID"
                });

                var index = $scope.grid.getrowboundindexbyid(133);
                $scope.grid.selectrow(index);
            }
        });
    </script>
</head>
<body>
<div ng-controller="demoController">
    <jqx-grid jqx-instance="grid" jqx-create="settings" jqx-settings="settings"></jqx-grid>
    <br/>
    <jqx-button jqx-on-click="fillAndSelect()">Fill And Select ID 133</jqx-button>
</div>
</body>
</html>

However, clicking the first time on the button does not select the row (second time, it does properly). It seems that getrowboundindexbyid does not work just after reassigning the source because it returns -1. Why? What can I do to just select by id after refresh?
Best regards,
– badera

June 18, 2015 at 9:58 am jqxGrid: Refresh data and select by id #72672

Peter Stoev

Keymaster

Hi badera,

As you probably know, setting properties and calling methods should be done when the binding is completed. Otherwise, the Grid’s data is still loading and so you can’t work with the Grid while the data is not loaded. So, your selection code should be moved within the bindingcomplete handler.

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid directive for AngularJS. Refresh Source</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/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/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/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 rowID = [174, 156, 214, 293, 102, 133, 58, 37, 89];
            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 < rowID.length; i++) {
                var row = {};
                row["rowID"] = rowID[i];
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                row["city"] = city[i];
                row["country"] = country[i];
                data.push(row);
            }

            $scope.grid = {};

            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                ready: function () {
                },
                sortable: true,
                source: [],
                columns: [
                    { text: 'First Name', datafield: 'firstname', width: 150 },
                    { 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 () {
                    var index = $scope.grid.getrowboundindexbyid(133);
                    $scope.grid.selectrow(index);
                }
            };

            $scope.fillAndSelect = function () {

                $scope.settings.source = new $.jqx.dataAdapter({
                    localdata: data,
                    datafields: [
                        { name: "rowID", type: "int" },
                        { name: "firstname", type: "string" },
                        { name: "lastname", type: "string" },
                        { name: "title", type: "string" },
                        { name: "city", type: "string" },
                        { name: "country", type: "string" }
                    ],
                    id: "rowID"
                });

             }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
         <jqx-grid jqx-instance="grid" jqx-create="settings" jqx-settings="settings"></jqx-grid>
    <br/>
    <jqx-button jqx-on-click="fillAndSelect()">Fill And Select ID 133</jqx-button>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 18, 2015 at 11:00 am jqxGrid: Refresh data and select by id #72675

badera

Participant

Thanks Peter for the explanation. What I do not understand is that selecting just an index works. So do we have to avoid even that regardless whether it works or not?

June 18, 2015 at 11:02 am jqxGrid: Refresh data and select by id #72676

Peter Stoev

Keymaster

Hi badera,

Any method call or setting a property should be avoided unless the binding is completed. In many options, the Grid even throws an Exception. Selecting an index will work due to the fact that it just sets an internal property which is taken into account in the rendering which happens after the binding is completed. However, in your scenario, you can’t get a row by ID if the row is not still loaded.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 18, 2015 at 11:18 am jqxGrid: Refresh data and select by id #72681

badera

Participant

Perfect explanation! Thank you!
Best regards,
– badera

Author

Posts

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

You must be logged in to reply to this topic.