Web开发
现在阅读
XYDataGrid
0

XYDataGrid

由 ultracpy2018年1月26日

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.

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:

<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.

出处:https://www.codeproject.com/Articles/18139/XYDataGrid

关于作者
ultracpy
评论

你必须 登录 提交评论