轉(zhuǎn)帖|其它|編輯:郝浩|2011-04-21 13:57:10.000|閱讀 2107 次
概述: 相信大家學(xué)習(xí)了RadControl中的RadWindow、RadAjaxManager、RadAjaxLoadingPanel控件后,一定會(huì)覺得它是解放.Net技術(shù)人員Web開發(fā)的技術(shù)工具,從而不再為Asp.NET中的局部刷新而絞盡腦汁。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相信大家學(xué)習(xí)了RadControl中的RadWindow、RadAjaxManager、RadAjaxLoadingPanel控件后,一定會(huì)覺得它是解放.Net技術(shù)人員Web開發(fā)的技術(shù)工具,從而不再為Asp.NET中的局部刷新而絞盡腦汁。
現(xiàn)在我告訴你,前邊才僅僅是你發(fā)現(xiàn)Web開發(fā)更加容易、方便的第一步,通過下來項(xiàng)目中其他常用Rad控件的介紹,你會(huì)更加欣喜若狂。好了下來我就介紹另一重量級的控件Telerik.RadCombobox下拉列表控件。
RadCombobox控件是一個(gè)用于在ASP.NET應(yīng)用程序中的并能創(chuàng)建靈活下拉界面的控件。本產(chǎn)品具有的一系列豐富的特性,例如:異步回叫(asynchronous callbacks),自動(dòng)補(bǔ)全(Auto-Complete),自動(dòng)排序,驗(yàn)證,層疊顯示,自定義外觀等等。
其優(yōu)勢特征有:
1、強(qiáng)大的自動(dòng)補(bǔ)全(Auto-Complete)功能;
2、按需加載;
3、支持模板功能;
4、靈活的綁定機(jī)制;
5、豐富的服務(wù)器端及客戶端事件;
6、多組合框關(guān)聯(lián)使用
您可以在同一頁面中設(shè)置多個(gè)r.a.d.combobox控件實(shí)例, 并且非常輕松的通過客戶端或者服務(wù)器端事件將它們關(guān)聯(lián)起來使用。
實(shí)例分析:
1、運(yùn)行圖
2、控件Html代碼:
<telerik:RadComboBox ID="RadComboRole" runat="
server" HighlightTemplatedItems="true" AutoPostBack="true"
AllowCustomText="true"
OnClientDropDownClosed="onDropDownClosing"
Width= "96%" onselectedindexchanged=
"RadComboRole_SelectedIndexChanged">
<ItemTemplate>
<div onclick="StopPropagation(event)" class="combo-item-template">
<asp:CheckBox runat="server" ID="chk1" onclick="onCheckBoxClick(this)" />
<asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">
<%# Eval("RoleName") %>
</asp:Label>
</div>
</ItemTemplate>
</telerik:RadComboBox>
3、輔助的js腳本:
<script type="text/javascript" language="javascript">
var cancelDropDownClosing = false;
function onDropDownClosing() {
cancelDropDownClosing = false;
}
function StopPropagation(e) {
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
function onCheckBoxClick(chk) {
var combo = $find( "<%= RadComboRole.ClientID %>");
cancelDropDownClosing = true;
var text = "";
var values = "";
var items = combo.get_items();
for (var i = 0; i < items.get_count(); i++) {
var item = items.getItem(i);
var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
if (chk1.checked) {
text += item.get_text() + ",";
values += item.get_value() + ",";
}
}
text = removeLastComma(text);
values = removeLastComma(values);
combo.set_text(text);
combo.set_value(values);
}
function removeLastComma(str) {
return str.replace(/,$/, "");
}
4、后臺代碼:
private void BindComBoxList()
{
List <SysRole> sysRoleList = SysRoleLogic.GetSysRoleList();
RadComboRole.DataSource = sysRoleList;
RadComboRole.DataTextField = "RoleName";
RadComboRole.DataValueField = "RoleID";
RadComboRole.DataBind();
}
通過以上四步便設(shè)置了以往需要做好多事情才可以做到的效果,另外此控件可以實(shí)現(xiàn)樹形選擇如下圖:
其Html代碼如下:
<telerik:RadComboBox ID="RadComboBox2" Width="240px"
Height="300px" AllowCustomText="true"
EmptyMessage="Showing all cars" OnClientDropDownClosing="OnClientDropDownClosingHandler"
runat= "server">
<ItemTemplate>
<div onclick="StopPropagation(event)">
<telerik:RadTreeView ID="RadTreeView1" runat=
"server" DataSourceID="SqlDataSource2"
DataTextField= "VehicleName" DataValueField=
"VehicleTypeID" DataFieldID="ID" DataFieldParentID="VehicleParentID"
OnClientNodeClicking= "OnClientNodeClickingHandler">
<DataBindings>
<telerik:RadTreeNodeBinding Depth="0"
Category="Make" ImageUrlField="ImagePath" />
</DataBindings>
</telerik:RadTreeView>
</div>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem />
</Items>
</telerik:RadComboBox>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:博客園