Telerik Combox - RadComboBox
Idea shared by Administrator - April 8, 2018 at 11:42 AM
Proposed
Employee Post
Style.css
<style type="text/css">
       /** Customize the demo canvas */
        .demo-container label {
            padding-right: 10px;
            width: 165px;
            font-size: 11pt;
            display: inline-block;
        }
        .demo-container .RadButton {
            margin-top: 20px;
        }
        /** Columns */
        .rcbHeader ul,
        .rcbFooter ul,
        .rcbItem ul,
        .rcbHovered ul,
        .rcbDisabled ul {
            margin: 0;
            padding: 0;
            width: 100%;
            display: inline-block;
            list-style-type: none;
        }
        .exampleRadComboBox.RadComboBoxDropDown .rcbHeader {
            padding: 5px 27px 4px 7px;
        }
        .rcbScroll {
            overflow: scroll !important;
            overflow-x: hidden !important;
        }       
        .col1 
        {
        	margin: 0;
            padding: 0 5px 0 0;
            width: 30%;
            font-size: 11pt;
            line-height: 18px;
            float: left;
        }
        .col2 {
            margin: 0;
            padding: 0 5px 0 0;
            width: 60%;
            font-size: 11pt;
            line-height: 18px;
            float: left;
        }                                
        /** Multiple rows and columns */
        .multipleRowsColumns .rcbItem,
        .multipleRowsColumns .rcbHovered {
            float: left;
            margin: 0 1px;
            min-height: 17px;
            overflow: hidden;
            padding: 2px 19px 2px 6px;
            width: 125px;
        }
        .results {
            display: block;
            margin-top: 20px;             
        }
        .RadComboBox .rcbInputCell .rcbInput, .RadComboBoxDropDown 
        { 
            font: 15px arial,verdana,sans-serif !important; 
        } 
ASP.NET Page
Default.aspx
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadComboBox runat="server" ID="ddlSponsor" Height="190px" Width="340px"
                                        MarkFirstMatch="true" DataSourceID="SessionDataSource1" EnableLoadOnDemand="true"
                                        HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField"
                                        OnDataBound="RadComboBox1_DataBound" OnItemDataBound="RadComboBox1_ItemDataBound"
                                        OnItemsRequested="RadComboBox1_ItemsRequested" DropDownCssClass="exampleRadComboBox">
                                        <HeaderTemplate>
                                            <ul>
                                                <li class="col1">Consultant Id</li>
                                                <li class="col2">Name</li>                                
                                            </ul>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <ul>
                                                <li class="col1">
                                                    <%# DataBinder.Eval(Container.DataItem, "ConsultantId") %></li>
                                                <li class="col2">
                                                    <%# DataBinder.Eval(Container.DataItem, "consultant_name") %></li>                                
                                             </ul>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            Sponsors Listing 
                                            <asp:Literal runat="server" ID="RadComboItemsSelected" />                
                                        </FooterTemplate>
                                </telerik:RadComboBox>   
                                <asp:SqlDataSource ID="SessionDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:sql_connection %>"  
                                        SelectCommand="SELECT ConsultantId,dbo.FirstCap(fname+', '+lname) as consultant_name FROM [Consultants] WHERE YEAR(DATEADD(YEAR,1, IntroDate))>=YEAR(getdate())"></asp:SqlDataSource>        
                                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                            <script type="text/javascript">
                                                    function UpdateItemCountField(sender, args) {
                                                            //Set the footer text.
                                                        sender.get_dropDownElement().lastChild.innerHTML = "Select or type the name of the sponsor ";  //-+ sender.get_items().get_count() + " items";
                                                    }
                                            </script>
                                        </telerik:RadScriptBlock>         
Default.aspx.cs (Code behind)
using Telerik.Web.UI;

//- Change the code as needed

 protected void RadComboBox1_DataBound(object sender, EventArgs e)
    {
        //set the initial footer label        
        ((Literal)ddlSponsor.Footer.FindControl("RadComboItemsSelected")).Text = ddlSponsor.SelectedValue;
    }
    protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        //-get all consultants whose name starts with e.Text        
        string sql = "SELECT ConsultantId,dbo.FirstCap(fname+', '+lname) as consultant_name,telephone FROM [Consultants] WHERE LNAME LIKE '" + e.Text + "%'";
        SessionDataSource1.SelectCommand = sql;
        ddlSponsor.DataBind();
    }
    protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
    {
        //set the Text and Value property of every item
        //here you can set any other properties like Enabled, ToolTip, Visible, etc.
        e.Item.Text = ((DataRowView)e.Item.DataItem)["Consultant_Name"].ToString();
        e.Item.Value = ((DataRowView)e.Item.DataItem)["ConsultantId"].ToString();
    }
    protected void OnSelectedStates_Changed(object sender, EventArgs e)
    {
        if (ddlUnitedStates.Text.Trim() != "XX")
        {
            PopulateSponsorListing(sender, e);            
        }
    }
 

Reply to Thread