Bind (Populate) ng-grid from Database using AngularJS in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

How to use ng-grid in angularjs in to bind data from database.

Posted one year ago

Hi rani,

Check this example. Now please take its reference and correct your code.


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


<html xmlns="">
<head id="Head1" runat="server">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" href="//" />
    <script type="text/javascript" src="//"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngGrid']);
        app.controller('MyController', function ($scope, $http) {
            $"Default.aspx/GetEmployees", { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Employees =;
            }, function error(response) {
            $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}]
    <form id="form1" runat="server">
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-grid="GridOptions" style="width: 400px; height: 500px">



using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;


Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services



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;
            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(),

    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; }


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
            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
        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


For more details refer below link.