angularjs - Server-side filtering with ng-grid: binding issue? -


i'm posting reference previous post server-side paging+filtering+sorting ng-grid webapi, hoping able come simple, yet working sample of using ng-grid external data sources. point, i've managed implement external paging , sorting, i'm facing issue filtering.

it seems filtertext property of ng-grid filter options not bound view. when type in filter's text of ng-grid $watch-ed function not called, , have no chance request filtered data server. yet, same watch expressions work fine when used e.g. paging or sorting.

by digging around bit, found post https://github.com/angular-ui/ng-grid/pull/456 bug right in area, it's not clear if still open issue. help? here relevant js code snippet:

var app = angular.module('myapp', ['nggrid']); app.controller('maincontroller', ['$scope', '$http', function ($scope, $http) {     $scope.items = [];     $scope.filteroptions = {         filtertext: "",         useexternalfilter: true     };     $scope.totalserveritems = 0;     $scope.pagingoptions = {         pagesizes: [25, 50, 100],         pagesize: 25,         currentpage: 1     };     $scope.sortoptions = {         // omitted brevity...     };      $scope.gridoptions = {         data: "items",         columndefs: [             { field: "id", displayname: "id", width: "60" },             { field: "name", displayname: "name", pinnable: true },             { field: "age", displayname: "age", width: "60" },             { field: "isfemale", displayname: "f", width: "40" }         ],         enablepaging: true,         enablepinning: true,         pagingoptions: $scope.pagingoptions,                 filteroptions: $scope.filteroptions,         keeplastselected: true,         multiselect: false,         showcolumnmenu: true,         showfilter: true,         showgrouppanel: true,         showfooter: true,         sortinfo: $scope.sortoptions,         totalserveritems: "totalserveritems",         useexternalsorting: true,         i18n: "en"     };      $scope.refresh = function() {         settimeout(function () {             // call server , data $scope.items...         }, 100);     };      // works         $scope.$watch('pagingoptions', function (newval, oldval) {         if (newval !== oldval) {             $scope.refresh();         }     }, true);      // not work: function never gets called     $scope.$watch('filteroptions', function (newval, oldval) {         if (newval !== oldval) {             $scope.refresh();         }     }, true);      // works     $scope.$watch('sortoptions', function (newval, oldval) {         if (newval !== oldval) {             $scope.refresh();         }     }, true);      $scope.refresh(); }]);

this might bit late better late never :)

i had success directly binding filtertext property of gridoptions below

$scope.$watch('gridoptions.$gridscope.filtertext', function (newval, oldval) {         if (newval !== oldval) {         } }, true);

Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more