jQWidgets Forums

Tagged: jqx grid, jqx-angularjs, statusbar

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

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

Author

databinding in a jqx-grid statusbar Posts

December 22, 2014 at 7:09 pm databinding in a jqx-grid statusbar #64570

badera

Participant

Dear all

I use a jqx-grid with statusbar. I like to have a binded scope variable displayed in the statusbar.


    $scope.myvar = "my text";

    $scope.gridSettings = {
        ...
        showstatusbar: true,
        statusbarheight: 25,
        renderstatusbar: function (statusbar) {
            statusbar.append($('<div class="div-grid-statusbar"><b>{{myvar}}</b></div>'));
        },
        ...

However, instead of getting the databinding, I see “{{myvar}}” in the status bar. How can I achieve the wished behaviour?
Thanks in advance for your help!

December 23, 2014 at 6:12 am databinding in a jqx-grid statusbar #64581

Peter Stoev

Keymaster

Hi badera,

This will not work in that way. Your expressions are evaluated when the “renderstatusbar” is called – the function is called when the Grid is loaded with data. I think you’ll have to re-evaluate your expression before displaying it in the statusbar.

Best Regards,
Peter Stoev

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

December 23, 2014 at 7:39 am databinding in a jqx-grid statusbar #64593

badera

Participant

Dear Peter

Thanks for your response. So how can I force to re-render the statusbar? – The problem is that the information is ready AFTER the grid is loaded. If I could force to update the statusbar, all would be fine.

PS: Is it possible in this forum to configure somewhere to get e-mail notifications about topic replays?

Thanks for your help!
best regards,
– badera

December 23, 2014 at 10:36 am databinding in a jqx-grid statusbar #64602

Peter Stoev

Keymaster

Hi badera,

You have to re-evaluate the AngularJS expression – {{myvar}}, not to re-render the status bar. E-mail notifications are turned off and you can’t subscribe to get such.

Best Regards,
Peter Stoev

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

December 23, 2014 at 12:09 pm databinding in a jqx-grid statusbar #64605

badera

Participant

Thanks Peter.

So I think I need to do something with $compile, isn’t it? – I am not yet familiar with it, so I need to look how it will work.
Anyway, if you just know how, I would of course say thank you, if you could disclose the secret

Best regards,
– badera

January 6, 2015 at 8:46 pm databinding in a jqx-grid statusbar #65033

badera

Participant

I still did not find out how to get a databinding in the statusbar. I tried to make an own Angular Directive with $compile or $parse and put this directive inside the statusbar; however, without success. So I think I am digging in the wrong direction.

You wrote:

You have to re-evaluate the AngularJS expression – {{myvar}}

OK, but how? I thank you in advance helping me!

Best regards,
– badera

January 7, 2015 at 8:35 am databinding in a jqx-grid statusbar #65046

Peter Stoev

Keymaster

Hi badera,

A solution which I prepared can be found below:

<!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/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 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.myVar = "text";
            $scope.bindingCompleted = "";
            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                showstatusbar: true,
                ready: function () {
                    $scope.settings.apply('selectrow', 1);
                },
                sortable: true,
                renderstatusbar: function (statusbar) {
                    var myVar = $("#myVar").detach();
                    statusbar.append(myVar);
                },
                source: $scope.people,
                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 (event) {
                    $scope.bindingCompleted = "binding is completed";
                }
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-settings="settings"></jqx-grid>
        <br />
        <span id="myVar">{{myVar}}</span>
        {{bindingCompleted}}
    </div>
</body>
</html>

Of course there could be other ways to achieve the same, but that’s what I can suggest you.

Best Regards,
Peter Stoev

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

January 7, 2015 at 9:17 am databinding in a jqx-grid statusbar #65048

badera

Participant

Thank you Peter, very much. It works like a charm.

Author

Posts

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

You must be logged in to reply to this topic.