if you can see
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
}
You have not provided the search text box detail, it should be like this
filterOptions: {
filterText: '',
externalFilter: 'searchText',
useExternalFilter: true
}
For more detail see "
ng-grid search sort paging with AngularJs WebAP and MVC ASP.Net
<http://advancesharp.com/blog/1116/ng-grid-search-sort-paging-with-angularjs-webap-and-mvc-asp-net>
On Thursday, July 25, 2013 9:10:39 AM UTC-4, Naftis wrote:
>
> Hi, I'm starting with AngularJS so probably I'm missing something obvious,
> but I cannot manage to have external filtering work in my ng-grid (
> http://angular-ui.github.io/ng-grid/) usage sample. On the server side I
> have an MVC webapi application exposing some fake data via a RESTful GET.
> On the client side, I can see data and page through them (with server-side
> paging), but when I type something in the filter's text of the ng-grid my
> $watch-ed function does not get called, and thus I have no chance to
> request filtered data to the server. Yet, the same watch expressions work
> fine when used e.g. for paging or sorting. What I'm doing wrong?
>
> Here is the 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 for 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 the server and get data into $scope.items...
> }, 100);
> };
>
> // this WORKS
> $scope.$watch('pagingOptions', function (newVal, oldVal) {
> if (newVal !== oldVal) {
> $scope.refresh();
> }
> }, true);
>
> // this DOES NOT WORK: the function never gets called
> $scope.$watch('filterOptions', function (newVal, oldVal) {
> if (newVal !== oldVal) {
> $scope.refresh();
> }
> }, true);
>
> // this WORKS
> $scope.$watch('sortOptions', function (newVal, oldVal) {
> if (newVal !== oldVal) {
> $scope.refresh();
> }
> }, true);
>
> $scope.refresh();
> }]);
>
--
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.
