1 HƯỚNG DẪN SỬ DỤNG BỘ
CÔNG CỤ DEVEXPRESS
CHO ASP.NETLƯU HÀNH NỘI BỘ 2010
BIÊN SOẠN : NGUYỄN MAI LĨNH

3.1. Tổng quan 33
3.1.1 Đặc điểm 33
3.1.2 Tính năng của tab 33
3

3.1.3 Các thư viện liên kết động cần thiết để triển khai ứng dụng 33
3.2. Ví dụ minh hoạ 34
4. ASPxSchedule 38
4.1. Tổng quan 38
4.1.1. Đặc điểm 38
4.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng 43
4.2. Ví dụ minh hoạ 44
5. ASPxGridView 58
5.1. Tổng quan 58
5.1.1. Đặc điểm 58
5.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng 59
5.2. Ví dụ minh hoạ 59
5.2.1. T
ạo một Control ASPxGridView với Data Source từ Database Access. 59
5.2.2. Tạo lưới trình bày dữ liệu theo dạng Master-Detail 65
6. XtraReport 84
6.1. Tổng quan 84
6.1.1. Đặc điểm 84
6.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng 85
6.2. Ví dụ minh hoạ 86
6.2.1. Tạo Web Report đơn giản 86
6.2.2. Tạo Report dạng bảng và thống kê dữ liệu 93
7. ASPxEditors 101
7.1. Tổng quan 101
7.1.1. Đặc điểm 101
5

1. Yêu cầu hệ thống
1.1. Framework
• Microsoft .NET Framework 2.0 (hoặc cao hơn).
• Microsoft .NET Framework 3.5 Service Pack 1 (hoặc cao hơn).
• Microsoft .NET Framework 4.0
1.2. IDE
Ta có thể sử dụng các IDE sau để phát triển các ứng dụng ASP.NET, sử
dụng các Component DevExpress ASP.NET
• Microsoft Visual Studio 2005.
• Microsoft Visual Web Developer 2005 Express Edition.
• Microsoft Visual Studio 2008.
• Microsoft Visual Web Developer 2008 Express Edition.
• Microsoft Visual Studio 2010.
• Microsoft Visual Web Developer 2010 Express Edition.

1.3. SQL Server
Để chạy các demo của Components DevXpress ASP.NET trên máy local,
cần phải cài đặt một trong các version sau của Microsoft SQL Express:
• Microsoft SQL Server 2005 Express Edition (SP3);
•
Microsoft SQL Server 2008 Express Edition (SP1).

2. Các thư mục cần sử dụng
- Khi cài đặt xong bộ công cụ DevX, các tập tin cần thiết để hoạt động
chứa trong thư mục sau:
C:\Program Files\DevExpress 2010.1\Components

cụm ASPx. Ví dụ như ASPxMenu, ASPxGridView, ASPxNavPanel….
- Từ phiên bản v10.1, khi một Web Control được đưa từ Toolbox vào
trong màn hình Designer của trang web, một section sẽ được tự động tạo ra
bên trong tập tin Web.config. Section này cho phép ta tuỳ chọn cấu hình
9

theo từng chức năng của mỗi control, nội dung section đó như sau:

Đồng thời, khi control được kéo thả vào trong trang web thì assemply
tương ứng sẽ được tự động đăng ký và thêm vào đầu của trang(xem kiểu
Source View) bởi dòng sau, ở đây ta ví dụ thêm vào một control
ASPxGridView :
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v10.1,
Version=10.1.4.0, Culture=neutral,
PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx"
%>

Tương ứng lúc này, sẽ có một file license.licx được tự động thêm vào
project, trong folder Properties và nội dung của file sẽ có dòng tương ứng
sau:
DevExpress.Web.ASPxGridView.ASPxGridView,
DevExpress.Web.ASPxGridView.v10.1 , Version=10.1.4.0,
Culture=neutral, PublicKeyToken=b88d1754d700e49a

t
a
Nội
d
a

ớ
i có được
k
k
hi
11
Hình 1.5: Nội dung file license.licx
12

Phần2:HướngdẫnsửdụngmộtsốControlcủa
ComponentDevExpressASP.NET

Trong phần này chúng tôi sẽ trình bày các thông tin về một số Control
thường sử dụng trong việc thiết kế một website cũng như cách sử dụng các
Control này. Bên cạnh đó sẽ là những ví dụ minh hoạ cách thao tác với các

• Đặc điểm Control:
o Có thể tạo menu từ Datasource bằng cách khai thác các
cấu trúc tập tin XML hay các bảng của Database.
o Có thể thiết lập một Menu thu hút một cách dễ dàng
chỉ sau vài cái click chuột.
o Có thể thay đổi thể hi
ện tuỳ thuộc vào từng trạng thái,
thông qua việc tuỳ chỉnh các thuộc tính hay chỉnh sửa các file
CSS.
o Có thể chèn các hình ảnh cần thiết trước phần Text của
từng Item trong menu, có thể tuỳ chỉnh vị trí của Text so với
hình ảnh. Có thể tuỳ chỉnh việc xử lý sự kiện phía người dùng
• Đặc điểm phía người dùng:
o Người dùng có thể sử dụng những sự kiệ
n phía người
dùng để tuỳ chỉnh một tác vụ cho việc ẩn hoặc hiện Sub-Menu
và khi người dùng click vào Menu.
1.1.2. Sub-Menus
• Control dạng Menu mặc định hiện bóng mờ dưới sub-Menu,
ta có thể tắt chức năng đó bằng việc tuỳ chỉnh thuộc tính
ASPxMenuBase.ShowSubMenuShadow. Tương như như cho
PopupMenu.
• Ta cũng có thể tuỳ chỉnh tốc độ mở và đóng các Sub-Menu.
• Ta có thể tuỳ chỉnh cho hiệ
n các ký hiệu ở các menu cấp lớn
hơn cho biết là có các sub-menu ở đó, mặc định là có hiện.
1.1.3. Separators
• Ta có thể thêm các đoạn chia giữa các Item với nhau trong
Menu bằng, hoặc các Item cùng một Item cha. Các chức năng này có
thể tuỳ chỉnh thông qua thuộc tính

Ví dụ mi
2.1. T
ạ
a
cần tạo r
a
1: Đưa Co
n
Trong c
ủ
o
olbox vào
e
vExpress.
W
năng của c
á
e
vExpress.
D
quan
t
ới v
i
e
vExpress.
W
ự
c thi một
t

ata.vX.
Y
i
ệc quản lý
W
eb.ASP
x
t
ập các chứ
n
ơi chứa c
á
\
Compon
e
u
ỳ ý bằng t
a
ư
hình sau:
.1 : Menu
n

x
Menu và
o
i
gn view,
n
trong

h
S
PxMenu.
các lớp th
ự
X
.Y.dll: C
h
u
ỳ chỉnh g
i
n
này: C:\
P
e
s\ DevEx
p
ọ
c
o
mponent
h
ực thi toà
ự
c thi các
h
ứa toàn b
ộ
i
ao diện và

h
2.1.2 : C
o
c
ác Item c
h
e
nu đang h
i
Menu ở A
S
n
h 2.1.3 : V
à
15
o
ntrol ASP
x
h
o Menu
i
ển thị trên
S
PxMenu
T
à
o chức nă
n
x
Menu trê


Lúc này, hiện lên của sổ ASPxMenu MenuItem Editor. Chọn Add
an Item (Icon đầu tiên bên trái) để thêm một Item mới:

Hình 2.1.4 : Thêm Item mới cho Menu

Chọn Item vừa mới thêm, trong phần Properties bên phải, chọn
Nhóm Misc, chọn mục Text và đổi tên Item thành Home.
17 Hình 2.1.5 : Đặt tên cho Item

Tương tự như thế, ta tạo ra thêm các Item cho Menu theo cấu trúc
như sau, lưu ý Scanners và Printers là con của Products, nên ta cần
chọn chức Năng Add a child Item.(Icon thứ 2 từ trái sang)

Hình 2.1.6 : Thêm các Item cho Menu
18

- Để thêm Icon trước mỗi Item, trong Properties ta chọn
Nhóm Image-> Image->URL rồi chọn Icon cần đặt trước Item đó
trong cửa sổ Dialog mở ra.
- Để điều hướng Menu, trong Properties ta chọn nhóm Misc-
>NavigateURL rồi chọn trang để điều hướng tới.
Chọn OK để hoàn tất việc thêm các Item bằng tay
Mặc định Menu m
ới tạo sẽ nằm ngang, muốn Menu nằm dọc ta chỉ
cần set thuộc tính Orientation của Menu thành Vertical
B3: Tuỳ chỉnh một số thuộc tính của Menu

o
H
eight: Chi
ề
W
idth: chiề
u
…
.

2.2. T
ạ
Ta tạo
m
evExpress.
Hìn
h
1: Đưa co
n
2
: Thêm
v
ạ
i thư mụ
c
E
xisting It
e
o
ng Sampl

e
m…, thê
m
e
Code của
19
M
enu
M
enu
ừ
Data sou
r
t
a Source
X
ó
dạng nh
ư
e
nu có Dat
a
Menu vào
o
urce XM
L
t
a của pro
j
m

i
le XML
(
Tương
t
ự
n
ấ
n chuột p
h
c
ture.xml
(
a
mple cod
e
n
hư trên)
h
ải, chọn
A
(
file này c
ó
e
của
A
dd-
ó
sẵn

I
s

I
sI
s

I
s
i
le menu_s
t
?
xml vers
i
r
oot>
<menuite
m
</menuit
e
<menuite
m
s

</me
n
<men
u
s
Separato
r
</me
n
</menu
i
</menuit
e
<menuite
m
s
Separato
r
</menuit
e
<menuite
m
s
Separato
r
<menui
t
s
Separato
r

”
u
item
T
e
x
r
=”false
”
n
uitem>
u
item
T
e
x
r
=”false
”
n
uitem>
u
item
T
e
x
n
uitem
>


r
=”false
”
20
10 : Thêm
m
m
l này có
n
”

e
ncodin
g
M
enu item
S
eparator
M
enu item
”
>
=
”
M
enu it
e
”
>
x

”
>
=
”
M
enu it
e
”
>
m
ới file .x
m
n
ội dung n
h
g
=”utf-8”
1” Value
=
on”
V
alu
e
2” Value
=
e
m” Value
=
i
tem 1”

=”
S
epar
a
=
”2”
=
”2”
a
lue=”1”
a
lue=”2”
S
eparato
r
a
lue=”3”
=
”
S
epara
t
=
”3”
=
”1”
u
.
e
parator=

23 Hình 2.1.13 : Chọn đường dẫn file
Trong thư mục App_Data ở màn hình kế, ta chọn file menu_structure.xml ->
OK

Hình 2.1.14 : Chọn file xml đã thêm vào từ đầu

d
Trong p
h
d
ung
t
ừ th
à
Lúc này
h
ần Xpath
e
à
nh phần M
e
H
ta có được
Hìn
h
e
xpression

“
root/men
u
à
m các ite
m
o
Xpath ex
p
c datasour
c
a
Souce là f
i
u
item” để
k
m
cho Men
u
p
ression
c
e là file X
M
i
le XML
k
hai thác n
ộ