jqueryhtmlangularjsangular-ui-gridcelltemplate

javascript to display message when No data to display


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.


Solution

  • 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