XGrid is an
Internet Explorer Behavior that allows you to write tables that are dynamic, offering things like sorting, paging and filtering without requiring anything in the server side. Actually this can be used in simple HTML scenarios where no connectivity at all is required.
Features:
Some of the features that this behavior support are:
- Displaying any XML document
- Automatic support for Sorting and Paging
- Filtering support using XPath
- 100% customizable using CSS Styles
- Support for XML islands
- Programmatic Access to Sorting/Pages/Filtering/Selecting
- Direct mapping between rows and nodes in the xml
- Events like onclick and others
- Alternating Row Styles
- Highlighting Rows
- Row Selection
- Different Column Styles (button,link,text, checkbox)
- Programmatic Access to Nodes
- Multiple XML attributes in one column
- You can reload table content dynamically without reloading the page
- No XML/XSLT knowledge required
- And more...
Sample
This is a new sample on how to create/edit data using XGrid
Click here to see a sample of the XGrid
How to Use
It is as simple as using the behavior in HTML.
<Web:Grid id="Grid" XMLData="Data" XPath="/DATA/AUTHORS" border=2 OverFlow="Scroll" PageSize=15 PageLinks=true OnRowClick="ShowPhone" AllowRowSelection=true
<Web:Column Width="120px" Caption="ID" XPath="@au_id" />
<Web:Column Caption="Last Name" XPath="@au_lname" />
<Web:Column Caption="First Name" XPath="@au_fname" />
<Web:Column Width="50px" Caption="State" XPath="@state" />
<Web:Column Width="150px" Caption="City/Zip" XPath="@city;@zip" Separator="/" />
</Web:Grid>
Note: that this is not ASP.NET code that requires the server, this is plain HTML that can be run from any .htm file locally, this is using the coolest thing that IE has (my personal point of view :) which is Behaviors.
To use it programmatically
<script language="VBScript">
Sub SortByColumn()
Grid.SortByColumn CInt(InputBox("Column
Number"))
End Sub
Sub MovePageBy(interval)
Grid.CurrentPage=Grid.CurrentPage + interval
End Sub
Sub ReadSelected()
Dim node
Set node =
Grid.SelectedNode
If node Is Nothing = False Then Msgbox
Grid.SelectedNode.xml
End Sub
Sub ShowPhone()
spPhone.innerText= "Phone Number Is:" &
window.event.returnValue.getAttribute("phone")
End Sub
Sub window_onload()
Grid.UpdateWindow=true
End Sub
Sub FilterByState()
Dim strState
strState = UCASE(InputBox("State?"))
if strState="" Then
Grid.XPath="/DATA/AUTHORS"
Else
Grid.XPath="/DATA/AUTHORS[@state='" &
strState & "']"
End If
End sub
</script>
I promise I will upload a decent help file with all the properties, methods and events, but I'm tired today ;)
Download Sample and Source Code
For a complete HTML sample:
Check this URL
To download the HTML Sample:
Click here to download the Sample
Number of Downloads: <%= string.Format("{0}", Globals.Downloads["XGridSample.zip"]) %>
Download Source Code
Click here to download the Source code of XGrid
Number of Downloads: <%= string.Format("{0}", Globals.Downloads["XGridSource.zip"]) %>
Requirements:
Internet Explorer 5.0 or Later.