angularjs - Angular ui-grid no rows -
i have angular uigrid on page. time display data if set data in gridoptions , not on http success call back. here code:
$scope.gridoptions = { showfooter: false, enablepaging: true, paginationpagesizes: [15], paginationpagesize: 50, enablerowselection: false, primarykey: 'id', multiselect: false, enablesorting: false, enableverticalscrollbar: true, enablehorizontalscrollbar: true, groupable: false, rowheight: 75, columndefs: [ { field: 'id', visible:false }, { field: 'name' }, { field: 'categoryname', displayname: 'category' }, { field: 'actions', displayname: 'actions', celltemplate: '<a href="#" title="edit" ng-click="gotoeditinst(row)"><span class="glyphicon glyphicon-edit"></span></a>' } ] }; $scope.searchinstituions = function () { var formobj = $scope.searchform; var svc = formobj.service; var city = formobj.city; var cat = formobj.category; var params = { categoryid: ((cat == null)?-1:cat.id) , serviceid: ((svc == null) ? -1 : svc.id), cityid: ((city == null) ? -1 : city.id) }; $http({ method: 'post', url: '/getjson', data: $.param(params), headers: { 'content-type': 'application/x-www-form-urlencoded' } }) .success(function (data, status, headers, config) { data = [{ "id": 1, "name": "golden hills school district no. 75", "categoryname": "schools" }]; $scope.gridoptions.data = data; }) .error(function (data, status, headers, config) { alert('error: ' + status + ". " + data); }); }; note have hardcoded data array of 1 element.
the html is:
<fieldset ng-controller="institutioncontroller"> <legend>search results:</legend> <div class="gridstyle" ui-grid="gridoptions"></div> </fieldset> the grid not display rows when $scope.gridoptions.data set on .success callback. (it being called going ask if function called
but set in grid options following displays fine:
$scope.gridoptions = { data: [{ "id": 1, "name": "golden hills school district no. 75", "categoryname": "schools" }], showfooter: false, enablepaging: true, paginationpagesizes: [15], paginationpagesize: 50, enablerowselection: false, primarykey: 'id', multiselect: false, enablesorting: false, enableverticalscrollbar: true, enablehorizontalscrollbar: true, groupable: false, rowheight: 75, columndefs: [ { field: 'id', visible:false }, { field: 'name' }, { field: 'categoryname', displayname: 'category' }, { field: 'actions', displayname: 'actions', celltemplate: '<a href="#" title="edit" ng-click="gotoeditinst(row)"><span class="glyphicon glyphicon-edit"></span></a>' } ] }; what missing here!!!
fixed it!!!
the problem following html:
<form ng-submit="searchinstituions()" ng-controller="institutioncontroller"> .... </form> <fieldset ng-controller="institutioncontroller"> <legend>search results:</legend> <div class="gridstyle" ui-grid="gridoptions"></div> </fieldset> notice there 2 elements form , fieldset attribute ng-controller. guessing $scope not same both. changed above following started working fine. lesson learned:
<form ng-submit="searchinstituions()" ng-controller="institutioncontroller"> ... <div class="clear" style="margin-top: 50px;"></div> <fieldset> <legend>search results:</legend> <div class="gridstyle" ui-grid="gridoptions"></div> </fieldset> </form> thank help
Comments
Post a Comment