Custom Ajax Enabled Grid using JavaScript xmlhttp in ASPNet

In this Article, I have described how to build your own Ajax Enabled Grid using JavaScript.

The concept is that using simple HTML table design a Grid like control with Ajax Paging and Sorting functionality without using any ASP.Net Controls.

Connection with Database

We will start our Website by creating a New Website in Visual Studio 2005 and Name it as AJAXGrid.

Then in the App_Data Folder keep the NorthWind.MDF which will act as a Database for the project.

</connectionStrings>

Creating HTML Table

Now we will create the structure of the Grid. We will start with the Header of the Grid.

Note I have already created a CSS File you will find the same in the sample code.

<td class = "headercell">Customer ID</td>

<td class = "headercell">Company Name</td>

<td class = "headercell">Contact Name</td>

<td class = "headercell">Contact Title</td>

</tr>

</table>

</div>

Then we will create the div with runat = “server” tag which will act as content. The runat = “server” tag will allow the div to be accessed server side. Since first time when the page loads the HTML markup will be binded using the innerHTML property of DIV.

</div>

Finally the third and the last part which will act as a Pager for the Grid.

</div>

Populating and Binding Data

Next we will create a function to populate the data from the database into the DataTable.

The function accepts the query and returns a DataTable.

Private Function GetData(ByVal strQuery As String) As DataTable

Dim dt As New DataTable

Dim strConnString As String = System.Configuration.ConfigurationManager.

ConnectionStrings("conString").ConnectionString

Dim con As New SqlConnection(strConnString)

Dim cmd As New SqlCommand(strQuery, con)

Dim sda As New SqlDataAdapter

cmd.CommandType = CommandType.Text

Try

con.Open()

sda.SelectCommand = cmd

sda.Fill(dt)

Catch ex As Exception

Return dt

Finally

con.Close()

cmd.Dispose()

sda.Dispose()

End Try

Return dt

End Function

Now we will populate the html table and bind it to the Div dvContainer using the function

It accepts the following Parameters

1. dv – DataView of the Populated Datatable

2. intPageNo – Current Page Index

3. intRowsPerPage – Number of Records Per Page

and it Returns the Populated HTML Table as String.

In the function I calculate the Start Index and the End Index depending on Page No and the Number of Records Per Page. The Start Index and End index helps to loop through the DataView Records and select the appropriate Record Set for the Corresponding Page.

intRowCount = dv.Count

intStartIndex = ((intPageNo - 1) * intRowsPerPage)

intEndIndex = (intPageNo * intRowsPerPage) - 1

When the Start Index and End Index have been calculated, a loop is run on the dataview in order to build a HTML Table using String Builder. Thus binding the HTML Table with the data.

strResults.Append(" <table id = 'tblContent' cellpadding = '0' cellspacing = '0' width = '800px'>")

The complete function is give below

Private Function PopulateGrid(ByVal dv As DataView, ByVal intPageNo As Integer, ByVal intRowsPerPage As Integer) As String

Dim strResults As New StringBuilder

Dim intStartIndex, intEndIndex, intRowCount As Integer

'Do the Paging Calculation

intRowCount = dv.Count

intStartIndex = ((intPageNo - 1) * intRowsPerPage)

intEndIndex = (intPageNo * intRowsPerPage) - 1

If intRowCount <= intEndIndex Then

intEndIndex = intRowCount - 1

End If

strResults.Append(" <table id = 'tblContent' cellpadding = '0' cellspacing = '0' width = '800px'>")

For i As Integer = intStartIndex To intEndIndex

If i Mod 2 = 0 Then

'Edit Row

strResults.Append("<tr class = 'rowstyle'>")

Else

'Alternating Rpw

strResults.Append("<tr class = 'alternatingrowstyle'>")

End If