Building a Custom ASP.NET Ajax Enabled Grid Using JavaScript
page 3 of 9
by Mudassar Ahmed Khan
Average Rating: 
Views (Total / Last 10 Days): 43141/ 59

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.

Listing 5

Private Function GetData(ByVal strQuery As StringAs DataTable
Dim dt As New DataTable
Dim strConnString As String = System.Configuration.ConfigurationManager. _
Dim con As New SqlConnection(strConnString)
Dim cmd As New SqlCommand(strQuery, con)
Dim sda As New SqlDataAdapter
cmd.CommandType = CommandType.Text
sda.SelectCommand = cmd
Catch ex As Exception
Return dt
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:

dv – DataView of the Populated Datatable

intPageNo – Current Page Index

intRowsPerPage – Number of Records Per Page

It returns the Populated HTML Table as a 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.

Listing 6

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.

Listing 7

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

The complete function is give below.

Listing 8

Private Function PopulateGrid(ByVal dv As DataView, ByVal intPageNo As Integer, _
 ByVal intRowsPerPage As IntegerAs 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'>")
      'Alternating Rpw
      strResults.Append("<tr class = 'alternatingrowstyle'>")
    End If
      strResults.Append("<td class = 'rowcell'>")
      strResults.Append("<td class = 'rowcell'>")
      strResults.Append("<td class = 'rowcell'>")
      strResults.Append("<td class = 'rowcell'>")
      strResults.Append("<td class = 'rowcell'>")
      Return strResults.ToString()
End Function

View Entire Article

User Comments

Title: wow   
Name: Sue
Date: 2012-10-11 3:05:48 PM
what a great code! Thanks
Title: m,n   
Name: mn,mn
Date: 2012-08-31 8:55:59 AM
Title: Excellent   
Name: Soons
Date: 2010-02-13 12:45:27 AM
The example was very simple and informative..
Thanks for the good work
Title: Small Problem   
Name: IndSoft
Date: 2009-08-30 10:12:21 AM
Good work, im also tried this it was work for me, but my problem is i need to edit the record using ajax (Not using UpdatePanel in VS)what is best way to do that.

note-when i click edit link, it should take particular record to separate web control (textboxes).
Title: RE i did upgrade it to 3.5   
Name: Mudassar Khan
Date: 2009-03-15 1:00:13 AM
You ahould review the code after the upgrade. Since cannot say what has changed in that. You can checkout whether the data is assigned to div or not.
Title: ???   
Date: 2009-03-14 7:34:38 PM
i did upgrade it to 3.5
Title: ???   
Date: 2009-03-14 7:34:04 PM
I tried it in Visual Studio 2008 and it did compile, but didn't show any data in the latest version of firefox

Title: good work   
Name: ajax helper
Date: 2009-02-06 5:16:16 PM
http:// good work

ajax forum
Title: Awesome!   
Name: ajax learner
Date: 2009-02-06 5:15:12 PM
super work!
Title: Good work   
Name: Muhsin
Date: 2009-02-04 5:09:07 AM
Excellent tutorial for people who wants to understand how things work behind the scenes
Title: Excellent Effort   
Name: Raghav Khunger
Date: 2009-01-30 7:59:03 AM
This Is A Excellent Control .The Most Beautiful thing i like that everything is without postback.
The Sorting Criteria as well as Paging is without postback.
U have Given windows programming like feeling.Wow!
Title: RE: Why Should I use this way ?!!   
Name: Mudassar Khan
Date: 2009-01-30 3:54:35 AM
1. Learn what goes behind the scenes in these controls
2. Customization - I can customize the grid as I want.
3. Also a brief idea on how to do the same using Javascript.
Title: Why Should I use this way ?!!   
Name: .NET Developer
Date: 2009-01-30 3:23:42 AM
really nice code, but why should we use that? we already have a gridview and ajax extensions!
In visual studio 2008, we have a new DataBound control called "ListView" and "DataPager" will do the work of this articel without the need to write any bit of code!

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-07-23 1:14:54 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search