ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement Sorting Filtering Paging in AngularJS UI Grid<p>Hi <a class="username" rel="rani"> rani</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Database</span></strong></p> <p>For this example I have used of Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.1/ui-grid.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.1/ui-grid.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;ui.grid&#39;, &#39;ui.grid.pagination&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $http) { $scope.Employees = []; $scope.gridOptions = { enableSorting: true, enableFiltering: true, paginationPageSizes: [5, 25, 50, 75], paginationPageSize: 5, columnDefs: [ { field: &#39;Id&#39;, width: &#39;75&#39;, enableSorting: false, enableFiltering: false }, { field: &#39;Name&#39;, enableSorting: true, enableFiltering: true }, { field: &#39;City&#39;, enableSorting: true, enableFiltering: true }, { field: &#39;Country&#39;, enableSorting: true, enableFiltering: true } ] }; $http.post(&#34;WebService.asmx/GetEmployees&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { $scope.Employees = eval(response.data.d); $scope.gridOptions.data = $scope.Employees; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div ui-grid=&#34;gridOptions&#34; ui-grid-pagination style=&#34;width: 100%; height: 300px;&#34;&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">WebService</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Script.Serialization; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public string GetEmployees() { List&lt;object&gt; employees = new List&lt;object&gt;(); using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString)) { SqlCommand cmd = new SqlCommand(&#34;SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees&#34;, con); cmd.CommandType = CommandType.Text; con.Open(); SqlDataReader dr = cmd.ExecuteReader(); while (dr.Read()) { employees.Add(new { ID = Convert.ToInt32(dr[&#34;EmployeeID&#34;]), Name = dr[&#34;FirstName&#34;].ToString() + &#34; &#34; + dr[&#34;LastName&#34;].ToString(), City = dr[&#34;City&#34;].ToString(), Country = dr[&#34;Country&#34;].ToString() }); } } JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(employees); } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System Imports System.Collections.Generic Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Script.Serialization Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;WebMethod()&gt; _ Public Function GetEmployees() As String Dim employees As List(Of Object) = New List(Of Object)() Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString) Dim cmd As SqlCommand = New SqlCommand(&#34;SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees&#34;, con) cmd.CommandType = CommandType.Text con.Open() Dim dr As SqlDataReader = cmd.ExecuteReader() While dr.Read() employees.Add(New With { .ID = Convert.ToInt32(dr(&#34;EmployeeID&#34;)), .Name = dr(&#34;FirstName&#34;).ToString() &amp; &#34; &#34; + dr(&#34;LastName&#34;).ToString(), .City = dr(&#34;City&#34;).ToString(), .Country = dr(&#34;Country&#34;).ToString() }) End While End Using Dim serializer As JavaScriptSerializer = New JavaScriptSerializer() Return serializer.Serialize(employees) End Function End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/rVA8UJl.gif" alt="" width="472" height="248" /></p>https://www.aspforums.net:443/Threads/173528/Implement-Sorting-Filtering-Paging-in-AngularJS-UI-Grid/https://www.aspforums.net:443/Threads/173528/Implement-Sorting-Filtering-Paging-in-AngularJS-UI-Grid/Wed, 07 Aug 2019 03:59:04 GMT