Hi rani,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ng-grid</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
<script type="text/javascript" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngGrid']);
app.controller('MyController', function ($scope, $http) {
$http.post("Default.aspx/GetEmployees", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.Employees = response.data.d;
}, function error(response) {
alert(response.responseText);
});
$scope.GridOptions = {
data: 'Employees',
enablePinning: false,
columnDefs: [{ field: "Id",width: 50, pinned: true },
{ field: "Name", width: 150 },
{ field: "City", width: 100 },
{ field: "Country", width: 100}]
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="MyApp" ng-controller="MyController">
<div ng-grid="GridOptions" style="width: 400px; height: 500px">
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
[WebMethod]
public static List<Employee> GetEmployees()
{
List<Employee> employees = new List<Employee>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees";
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
employees.Add(new Employee
{
Id = Convert.ToInt32(sdr["EmployeeID"]),
Name = sdr["FirstName"].ToString() + " " + sdr["LastName"].ToString(),
City = sdr["City"].ToString(),
Country = sdr["Country"].ToString(),
});
}
con.Close();
}
}
return employees;
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
VB.Net
<WebMethod()>
Public Shared Function GetEmployees() As List(Of Employee)
Dim employees As List(Of Employee) = New List(Of Employee)()
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees"
Using con As SqlConnection = New SqlConnection(conString)
Using cmd As SqlCommand = New SqlCommand(query)
cmd.Connection = con
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
employees.Add(New Employee With {
.Id = Convert.ToInt32(sdr("EmployeeID")),
.Name = sdr("FirstName").ToString() & " " + sdr("LastName").ToString(),
.City = sdr("City").ToString(),
.Country = sdr("Country").ToString()
})
End While
con.Close()
End Using
End Using
Return employees
End Function
Public Class Employee
Public Property Id As Integer
Public Property Name As String
Public Property City As String
Public Property Country As String
End Class
Screenshot
For more details refer below link.
https://www.c-sharpcorner.com/UploadFile/dev4634/using-ng-grid-in-angular-ui-pages/
