Click here to Skip to main content
15,881,852 members
Articles / Web Development / HTML

XYDataGrid

Rate me:
Please Sign up or sign in to vote.
3.25/5 (5 votes)
25 Mar 2007CPOL 31.8K   99   14   8
XYDataGrid is a web datagrid control which helps developers put fixed headers and columns.

Screenshot - Datagrid1.jpg

Introduction

XYDataGrid is a web datagrid control which helps developers to put fixed headers and fixed columns. A very common business need is fixed headers and fixed columns for a datagrid component. However, it is not so easy for a web development team to add these functionalities to an existing datagrid control.

XYDatagrid offers you these methods to add and remove fixed columns and headers easily.

Using the code

Please add the code below after you add XYDataGrid as a reference to your project.

VB
Dim constr As String
Dim dt As New System.Data.DataTable
Dim sql As String

constr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & _ 
         "c:\XYDataGridTestData.mdb;User Id=admin;Password=;"

Dim cn As New OleDbConnection(constr)

cn.Open()
sql = "Select * from XYDataGridTestTable"

Dim cmd As New OleDbCommand(sql, cn)
Dim da As New OleDbDataAdapter(cmd)

da.Fill(dt)
XYDataGrid1.DataSource = dt
XYDataGrid1.DataBind()

Another interesting code snippet is the code which should be added to the design side:

HTML
<form id="form1" runat="server">
<div>
<DIV style="Z-INDEX: 101; LEFT: 0px; OVERFLOW: auto; WIDTH: 400px; 
              POSITION: relative; TOP: 46px; HEIGHT: 200px">
    <cc1:XYDataGrid ID="XYDataGrid1" runat="server" 
      style="border-width:1px;border-style:None;" 
      FixHeader="True" FixColumn="2">
    </cc1:XYDataGrid> 
</DIV>
</div>
</form>

After you set the properties as below, the datagrid is ready to work.

Screenshot - datagrid6.jpg

Here are some pictures of the XYDataGrid:

Screenshot - Datagrid1.jpg

Picture 1 - Ready to scroll down and right.

Screenshot - Datagrid2.jpg

Picture 2 - After first scroll right, the department column slides to the left. ID and Name are fixed.

Screenshot - Datagrid3.jpg

Picture 3 - After birthday column slided to left.

Screenshot - Datagrid4.jpg

Picture 4 - After scroll down, the first row scrolls up.

Screenshot - Datagrid5.jpg

Picture 5 - After scroll down, the first row scrolls up.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Turkey Turkey
Phd. Yildirim Kocdag is a Computer Engineer.

Programming Languages
Android, Objective-c, c#, vb.net, asp.net, javascript, TSQL.

Computer Science
DataMining, Compilers, Expert Systems, Digital Image Processing, AI and Extreme Programming.

ykocdag@yahoo.com

http://www.linkedin.com/profile/view?id=223886830

Comments and Discussions

 
QuestionBug? Pin
Coach_8128-Jul-08 16:29
Coach_8128-Jul-08 16:29 
Questionvb 2 c# Pin
OmidH30-May-07 1:46
OmidH30-May-07 1:46 
AnswerRe: vb 2 c# Pin
Yildirim Kocdag30-May-07 2:40
Yildirim Kocdag30-May-07 2:40 
GeneralRe: vb 2 c# Pin
OmidH30-May-07 18:00
OmidH30-May-07 18:00 
GeneralThanks Pin
volkan.ozcelik5-Apr-07 23:15
volkan.ozcelik5-Apr-07 23:15 
GeneralRe: Thanks Pin
Yildirim Kocdag6-Apr-07 1:26
Yildirim Kocdag6-Apr-07 1:26 
GeneralEmbedded CSS Pin
Declan Bright26-Mar-07 3:42
Declan Bright26-Mar-07 3:42 
Hi Yildirim

I can see that this will be useful. Big Grin | :-D

You may want to consider embedding the DataGridStyles.css file into the XYDataGridProject.dll because if it not added to the web project the control does not behave as expected.
Gary Dryden's article explains how to do this: WebResource ASP.NET 2.0 explained[^]


Declan Bright
www.declanbright.com

GeneralRe: Embedded CSS Pin
Yildirim Kocdag26-Mar-07 4:53
Yildirim Kocdag26-Mar-07 4:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.