javascript to display message when No data to display

Question

I am working on angularjs application. I am displaying the angular UI grid based on the user entered values. I want to display a message saying No RECORDS FOUND when there are no values to be shown in the angular UI grid. Please find the demo here

Example when user give Atlanta in From text field and Chicago in To text field and click on SearchLocations, it will display the UI grid. BUt when user types some thing instead of showing blank i want to display NO Records fond message. ANother issue is i'm trying to add a column with radio button so that user can select that radio button when they want to select the row. I could not able to succeed showing radio button in every row of the grid by adding a new column to it. Any suggestions would be very helpful. Being a newbie facing many issues to resolve. Thanks.

js code:

 angular.module('myApp', ['ngAnimate', 'ui.bootstrap','ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
         angular.module('myApp').controller('citiesCtrl',function($scope){
            // $scope. places = undefined;
            $scope.items = ["Atlanta", "Chicago", "NewYork"];
            $scope.selectAction = function() {
                console.log($scope.places1);

            };
       });

   /*Controller for searchLocations button*/
        angular.module('myApp').controller('searchController', ['$scope', function($scope) {
            $scope.places = ['', ''];
            $scope.searchValue = '';

            $scope.submit = function() {
                if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
                  $scope.searchValue = $scope.places[0] + $scope.places[1];
                }
            };

            $scope.users = [
                {'name' : 'AtlantaChicago',
                    'show' : true,
                    'details' : [
                        {"Travel Date": "10/10/2014",  commute:"Bus"},
                        {"Travel Date": "10/11/2014",  commute:"flight"}]
                },
                {'name' : 'NewYorkChicago',
                    'show' : true,
                    'details': [
                        {"Travel Date": "3/15/2016",  commute:"flight"},
                        {"Travel Date": "10/12/2016",  commute:"flight"},
                    ]
                }
            ];
            $scope.gridOptions = {
                enableFiltering: true,
                columnDefs: [
                    { name: 'Travel Date', width: '5%'},
                    { name: 'Departurecommute', enableFiltering: false, width: '12%' }
                ],
                rowHeight: 20,
                enableHorizontalScrollbar:2

            };
        }]);

HTML code:

 <div class="row">
        <div class="form-group" ng-controller="citiesCtrl">
            <label>From</label>
            <input type="text" ng-model="places[0]" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
        <div class="form-group" ng-controller="citiesCtrl">
            <label>To</label>
            <input type="text" ng-model="places[1]" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
    </div>

    <input type="button" value="SearchLocations"  ng-click="submit()">

    <div ng-repeat="user in users | filter: {name: searchValue} : true ">
        <h3>First Grid</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
    </div>

I tried adding a radio button to each row but failed to get it displayed. I tried adding below code to the newly added column so that it display radio button in each and every row so that user can select any one of the row.

{
          name: 'ReleaseAction', width: '350',
          cellTemplate: '<div class="btn-group" ng-init="releaseAction=0"><input ng-model="releaseAction" type="radio" value="0" style="width:20px">&nbsp;Add</div>'
      },

Any siggestions to display message when there is no Grid to display and to show radio button in every row in the UI grid would be helpful.

daan.desmedt · Accepted Answer · 2017-02-10 15:17:58Z

1

You could wrap your ng-repeat dataset into a new variable on which you could check the availability of 'data'.

<div ng-repeat="user in filteredUsers = (users | filter: {name: searchValue} : true)">
    <h3>First Grid</h3>
    <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
</div>

Then on your view you could add a message when there are no results :

<div ng-if="!filteredUsers.length">
    No data available
</div>

Updated on your code see Plnkr

edited Feb 10, 2017 at 15:17

answered Feb 10, 2017 at 15:09

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3684675 Over a year ago

can you please edit in my demo plnkr.co/edit/CZPRn60ufiXcCbc54iye?p=preview . As when i tried the one you suggested its not showing up. Appreciate your help.

user3684675 Over a year ago

Thanks it worked. My other scenario i asked in my post is to show radio buttons in each and every row of the UI grid, i tried as shown in the above post but it did not showed up. I accepted the answer but can you please help me out to show radio button in each and every row of the grid so that user can select any one row.

daan.desmedt Over a year ago

Have a look at the following example to get the checkbox working. plnkr.co/edit/PL7HvK1FY2ycuOrBbBTA?p=preview

user3684675 Over a year ago

I want to display the radio button, i tried implementing that way. Trust me i spent time to get it work but with no luck..

Collectives™ on Stack Overflow

javascript to display message when No data to display

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related