Maybe you should try a different grid. This is the one I use instead of ui-grid. http://webux.github.io/ux-angularjs-datagrid/
On Monday, December 22, 2014 11:52:46 PM UTC-7, surendra kumar wrote: > > helo, > today i started using ui-grid in my angular js.but its not > displaying the data in table properly.the image is shown below > > > <https://lh4.googleusercontent.com/-G2oZ9wzS9j8/VJkPpzPjIaI/AAAAAAAAAJY/srwZfAaneps/s1600/ui%2Bgrid.png> > > > > > my main html code is: > > <html ng-app="trackApp"> > <head> > <script src = " > https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js > "></script> > <script src = " > http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js > "></script> > <link href="xeditable/css/xeditable.css" rel="stylesheet"> > <script src="xeditable/js/xeditable.js"></script> > <link href="css/accordian.css" rel="stylesheet"> > <script src="js/track.js"></script> > <link rel="icon" href="http://getbootstrap.com/favicon.ico";> > <script src=" > https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js > "></script> > <script src=" > https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js > "></script> > <!-- Bootstrap core CSS --> > <link href="http://getbootstrap.com/dist/css/bootstrap.min.css"; > rel="stylesheet"> > > <!-- Custom styles for this template --> > <link href="http://getbootstrap.com/examples/dashboard/dashboard.css"; > rel="stylesheet"> > > > <script src="js/dropdown.js"></script> > <link rel="styleSheet" href="css/ui-grid-unstable.css"/> > <script src="js/ui-grid-unstable.js"></script> > </head> > > <body> > > <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> > <div class="container-fluid"> > <div class="navbar-header"> > <button type="button" class="navbar-toggle collapsed" > data-toggle="collapse" data-target="#navbar" aria-expanded="false" > aria-controls="navbar"> > <span class="sr-only">Toggle navigation</span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > <a class="navbar-brand" href=" > http://getbootstrap.com/examples/dashboard/#";>MyTRacker fleet > management</a> > </div> > <div id="navbar" class="navbar-collapse collapse"> > <ul class="nav navbar-nav navbar-right"> > <li><a href="">Dashboard</a></li> > <li><a href="">Settings</a></li> > <li><a href="">Profile</a></li> > <li><a href="">Help</a></li> > </ul> > <form class="navbar-form navbar-right"> > <input type="text" class="form-control" > placeholder="Search..."> > </form> > </div> > </div> > </nav> > > <div class="container-fluid"> > <div class="row"> > <div class="col-sm-3 col-md-2 sidebar"> > <ul class="nav nav-sidebar"> > <li class="active"><a class="active" href="#menu">Menu<span > class="sr-only">(current)</span></a></li> > <li><a href="#home">Home</a></li> > <li><a href="#vehicleRegister">Vehicle Register</a></li> > <li><a href="#distributorRegister">Distributor > Register</a></li> > </ul> > <ul class="nav nav-sidebar"> > <li><a href="#driverRegister">Driver Register</a></li> > <li><a href="#driver-vehicleRegister">Driver-Vehicle > Register</a></li> > <li><a href="#truckTransit">Truck Transit</a></li> > <li><a href="#deviceManagement">Device Management</a></li> > <li><a href="#userManagement">User management</a></li> > </ul> > <ul class="nav nav-sidebar"> > <li><a href="#tyreManagement">Tyre Management</a></li> > <li><a href="#consignmentEntry">Consignment Entry</a></li> > <li class="reportButton"><a href="#"><i class="glyphicon > glyphicon-expand"></i>Reports</a></li> > <ul class="reportDrop"> > <ul class="nav nav-sidebar"> > <li><a href="#tyreManagement">report1</a></li> > <li><a href="#consignmentEntry">report2</a></li> > > </ul> > </ul> > <li><a href="#geofence">Geofence</a></li> > </ul> > > </div> > <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 > main"> > <h1 class="page-header">My Tracker fleet management</h1> > > > <!-- <h2 class="sub-header"></h2> --> > <ng-view></ng-view> > > </div> > </body> > </html> > > my controller is in track.js as below > > var trackApp=angular.module("trackApp",['ngRoute','xeditable','ui.grid']); > trackApp.controller( "TrackCtrl",function($scope){ > > $scope.track=[ > { > name:"KA02AA8641", > gender:"KAVITHA ENTERPRISE", > height:"raju", > occupation:'12:39:19 PM', > location:'chikmangalur', > clocation:'depo', > speed:'20km/h', > time:'16:42:12 PM', > power:'Battery', > status:'Running' > } , > { > name:"KA02AD2595", > gender:"SLV", > height:"avinash", > occupation:"01:39:19 AM", > location:'chikmangalur', > clocation:'depo', > speed:'20km/h', > time:'16:42:12 PM', > power:'Battery', > status:'Running' > }, > { > name:"KA02AA8641", > gender:"HIMU DISTRIBUTOR", > height:"5'11", > occupation:"00:39:23 AM", > location:'chikmangalur', > clocation:'depo', > speed:'20km/h', > time:'16:42:12 PM', > power:'Battery', > status:'Running' > }, > { > name:"KA02AD2595", > gender:"DELHI FREIGHT", > height:"dinakar", > occupation:"01:39:19 PM", > location:'chikmangalur', > clocation:'depo', > speed:'20km/h', > time:'16:42:12 PM', > power:'Battery', > status:'Running' > }, > { > name:"KA02AD2595", > gender:"SRI RAMA AGENCIES", > height:"manjunath", > occupation:"01:39:19 AM", > location:'chikmangalur', > clocation:'depo', > speed:'20km/h', > time:'16:42:12 PM', > power:'Battery', > status:'Running' > } > ]; > }); > trackApp.config(['$routeProvider',function($routeProvider){ > $routeProvider. > when('/vehicleRegister',{ > templateUrl:'templates/vehicleRegister.html', > controller:'RegisterCtrl' > }). > when('/menu',{ > > templateUrl:'templates/menu.html', > controller:'TrackCtrl' > }). > when('/home',{ > > templateUrl:'templates/home.html', > controller:'TrackCtrl' > }). > when('/distributorRegister',{ > > templateUrl:'templates/distributorRegister.html', > controller:'RegisterCtrl' > }). > when('/driverRegister',{ > > templateUrl:'templates/driverRegister.html', > controller:'TrackCtrl' > }). > when('/truckTransit',{ > > templateUrl:'templates/truckTransit.html', > controller:'EditCtrl' > }). > when('/deviceManagement',{ > > templateUrl:'templates/deviceManagement.html', > controller:'TrackCtrl' > }). > when('/userManagement',{ > > templateUrl:'templates/userManagement.html', > controller:'RegisterCtrl' > }). > when('/tyreManagement',{ > > templateUrl:'templates/tyreManagement.html', > controller:'TrackCtrl' > }). > when('/consignmentEntry',{ > > templateUrl:'templates/consignmentEntry.html', > controller:'RegisterCtrl' > }). > when('/geofence',{ > > templateUrl:'templates/geofence.html', > controller:'TrackCtrl' > }). > when('/driver-vehicleRegister',{ > > templateUrl:'templates/driver-vehicleRegister.html', > controller:'RegisterCtrl' > }) > }]); > > > my partial view that is menu.html is: > <div ui-grid="{ data: track }" class="grid"></div> > > what could be the problem in my code????have i written any bad code???? > why the ui-grid is opaque and its covering the data from my json??? > > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
