Reader Level:
ARTICLE

XYDataGrid in VB.NET

Posted by Yildirim Kocdag Articles | Visual Basic .NET November 09, 2012
XYDataGrid is a web datagrid control which helps to developers to put fixed headers and fixed columns.
  • 0
  • 0
  • 2169
Download Files:
 

Datagrid1.jpg

XYDataGrid is a web datagrid control which helps to developers to put fix headers and fix columns.

One of the important 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 current datagrid control.

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

Using the code

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

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 important code snippet is the code which should be added to design side.

<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>&nbsp;

    </DIV>

    </div>

</form> 

 

After you set the properties as below the datagrid can be ready to work.


datagrid2.jpg
 

Some Pictures from The XYDataGrid,


Datagrid3.jpg

 

Ready to scroll down and right.

 

Datagrid4.jpg
 

After first scroll right, department column is sliding to left. Two columns which are ID and Name are fixed.


Datagrid5.jpg

 

After birthday column is sliding to left.


Datagrid6.jpg

 

After scroll down, the first row is scroll up.

Datagrid7.jpg
 

After scroll down, the first rows are scroll up.

COMMENT USING

Trending up