跟我學Telerik公司的RadControls控制項(三)

　　相信大家學習了RadControl中的RadWindow、RadAjaxManager、RadAjaxLoadingPanel控制項後，一定會覺得它是解放.Net技術人員Web開發的技術工具，從而不再為Asp。NET中的局部重新整理而絞盡腦汁。

　　現在我告訴你，前邊才僅僅是你發現Web開發更加容易、方便的第一步，通過下來項目中其他常用Rad控制項的介紹，你會更加欣喜若狂。好了下來我就介紹另一重量級的控制項Telerik.RadCombobox下拉式清單控制項。

　　RadCombobox控制項是一個用於在ASP.NET應用程式中的並能建立靈活下拉介面的控制項。本產品具有的一系列豐富的特性，例如：非同步回叫（asynchronous callbacks），自動補全（Auto-Complete），自動排序，驗證，層疊顯示，自訂外觀等等。

　　其優勢特徵有：

　　1、強大的自動補全（Auto-Complete）功能；

　　2、按需載入；
　　3、支援模板功能；

　　4、靈活的綁定機制；

　　5、豐富的伺服器端及用戶端事件；

　　6、多組合框關聯使用
　　　　您可以在同一頁面中設定多個r.a.d.combobox控制項執行個體， 並且非常輕鬆的通過用戶端或者伺服器端事件將它們關聯起來使用。

　　執行個體分析：

　　1、運行圖

　　

　　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();
        }

　通過以上四步便設定了以往需要做好多事情才可以做到的效果，另外此控制項可以實現樹形選擇如：

　　　　　　　　　　

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

具體的操作過程就不太多說了請參見http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx