Click here to Skip to main content
15,500,869 members
Articles / Web Development / HTML
Posted 5 Dec 2013

Tagged as


45 bookmarked

Lookup Search - ComboBox Multicolumn, Multiselection

Rate me:
Please Sign up or sign in to vote.
4.76/5 (20 votes)
31 Mar 2014CPOL3 min read
Search control and ComboBox Multi-Column and Multi-Selection


During the development of an application I often faced the necesity of a simple control to search a pick up a selection against a database without much effort.

There are many possibilities to accomplish this, but it is always tedious and often you need to jump to a different form or write a lot of controls and aspx code which results ugly and not very obvious in designer mode to what are you trying to accomplish, let alone how hard it is to maintain. I started designing a pupup control where user can complete a search, obtain the results from the pupup control to the main page, user can define the templates for the input search controls.

The same control can be used to search information about departments or employees, the only difference will be the data source and the search template.

User can define the columns to show and the columns to be availables for data selection.

In addtionl to the LookUp control I also sharing a control which I developed based on this first one, it has the basic functionality of a standar ComboBox, but with the feature of multi-column and multi-selection.

I've been seen many articles of people looking for a solution for a multi-column and multi-selection drop-down control.

These controls can be nested in other controls containers and well as nested in ajax updated panels.

Suport cross browers IE, Firefox, and Chrome.

1. Lookup Search Control

Having as TextBox which you need to populate either with a specific value being pulled from a search or with many values, this can be accomplish the as so:


Image 1

<asp:TextBox ID="TextBox2" runat="server" Width="120px"></asp:TextBox>

<lu:LookUp ID="LookUp2" runat="server" 
  DataKeyNames="OuCode,OuDescription,LM" DataSourceID="ObjectDataSource2"
  ExtenderEnabled="False" HtmlTemplate="~/luTemplates/OuSearch2.htm" 
  TargetControlId="TextBox2" Width="16px" OnOnRowClick="LookUp2_OnRowClick" 
  Height="16px" TitlePopUp="Test No 2"
  FadeDelay="3" WHeight="500">
    <lu:LuTemplate ID="LuTemplate7" runat="server" CssClass="LU_CellLeft">
        <HeaderText>Ou Code</HeaderText>
            <asp:Label ID="Label100" runat="server" 
               Text='<%# DataBinder.Eval(Container.DataItem, "OuCode")%>' />
    <lu:LuTemplate ID="LuTemplate12" runat="server" CssClass="LU_CellBox">
        <HeaderText>Changed on</HeaderText>
            <asp:Label ID="Label104" runat="server" 
              Text='<%# DataBinder.Eval(Container.DataItem, "LastChange","{0:d}")%>' />

The control has an event hander returning a DataTable with results of the selected items.

protected void LookUp2_OnRowClick(object sender, LookUpSearch.LookUp.RowData e)
    TextBox2.Text = string.Empty;

    if (e.DataTable.Rows.Count > 0)
        foreach (DataRow row in e.DataTable.Rows)
            TextBox2.Text = string.Format("{1},{0}", 
        TextBox2.Text = TextBox2.Text.TrimEnd(',');
        Oudescripion2.Text = e.DataTable.Rows[0]["OuDescription"].ToString();
        Lm2.Text = e.DataTable.Rows[0]["LM"].ToString();

User can define html templates with the input contros to define the search criteria, the name of the input controls must match with the names of the parameters in the ObjectDataSource.

Image 2

Image 3

Get_OuSearch1 Method

public List<Department> Get_OuSearch1(string search1, string search2, string search3, bool OnlyActive)
    List<Department> list = GenData();
    return list.Select(s => new Department
    OuCode = s.OuCode,
    OuDescription = s.OuDescription,
    LM = s.LM,
    LMName = s.LMName,
    LastChange = s.LastChange,
    Active = s.Active
    }).OrderBy(o => o.OuCode).ToList<Department>();

Image 4


Image 5

2. JmComboBox Control

The JmComboBox can be single or multi selection, it is very similar to the Lookup control, but this control does not use different template, user can define the presentation of the culumns directly in the control template as well as define the Keys or Fields desired to be available when user complete the selection.

A combo box, which is represented by the JmComboBox control, is an editor that combines the functionality of a single-line text editor and dropdown list editor. The editor's dropdown displays a list of items which can be selected by end-users.

<jmcb:MultiComboBox ID="MultiComboBox3" runat="server" CssClass="" 
     DataSourceID="ObjectDataSource1" DataTextField="ContactName" 
     DataValueField="Id" Height="18px" TextFormatString="{0} - {1} - {2}" 
     Width="250px" LayoutWidth="500" LayoutHeight="300" 
     DataKeyNames="Country" MaximumEntries="50">
    <jmcb:ColumnField ID="LuTemplate3" runat="server" 
            CssClass="CB_CellLeft" Width="100px">
        <HeaderText>Contact Name</HeaderText>
            <table width="100%">
                    <td style="width: 18px; padding-right: 6px;"><img 
                      src="twitter-icon.png" style="width: 18px; height: 18px" 
                      alt=""/></td><td style=" 
                      text-align: left;"><%# DataBinder.Eval(
                         Container.DataItem, "ContactName")%></td>
    <jmcb:ColumnField CssClass="CB_CellLeft" Width="100px">
    <HeaderText>Company Name</HeaderText>
        <%# DataBinder.Eval(Container.DataItem, "CompanyName")%>
    <jmcb:ColumnField CssClass="CB_CellBox" Width="100px">
        <asp:Label ID="Label4" runat="server" 
          Text='<%# DataBinder.Eval(Container.DataItem, "Country")%> '>
Data-Bound and Unbound Modes Support

The editor's contents can be generated dynamically by binding the editor to a data source, as well manually populating the control's item collection. When retrieving items from the data source, item characteristics such as the text, value, and image are obtained from specific data fields that can be defined manually or are obtained automatically providing the data fields named in a specific way.

Incremental Filtering

The JmcComboBox editor enables end-users to filter list items dynamically, based upon the text typed into the editor's input box on the client side (find-as-you-type filtering). The following filter modes are available.

  • StartsWith: The editor is filtered for list items that begin with the search string.
  • Contains: The editor is filtered for list items that contain the search string. The found search string is highlighted within items for clarity.

Image 6

Display Formatting

Editor display values can be formatted using the standard formatting mechanism.

TextFormatString="{0} : {1} of {2}"

Image 7

Multi-Column Mode

It's possible to represent the JmcComboBox's list data in several columns. This functionality is in effect if the editor's items collection is obtained from a data source. You can also define a column's header caption, width, visibility state and other settings for columns.

Image 8

Image 9

Multi-Selection Mode

It's possible to select multiple values.

Image 10

The JmcComboBox control supports data validation server side, allowing you to implement any custom validation logic. If an editor fails validation logic, an error message can be displayed.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Web Developer UBS AG
Switzerland Switzerland
More than 12 years of design/development data driven applications, with 8 years in the banking industry working at a high standard with both sensitive and a high volume of data.

Comments and Discussions

QuestionHow to implement the control? Pin
Member 149224371-Oct-20 2:44
MemberMember 149224371-Oct-20 2:44 
bethanco5-Jan-15 12:23
Memberbethanco5-Jan-15 12:23 
Josue Medrano21-Jul-15 4:32
MemberJosue Medrano21-Jul-15 4:32 
Member 149224375-Oct-20 10:19
MemberMember 149224375-Oct-20 10:19 
Questionhow to add new record in JmComboBox Control Pin
Member 1111932429-Sep-14 19:51
MemberMember 1111932429-Sep-14 19:51 
QuestionGet the Multiple Column Value Server Side or Client Side of JmComboBox Controls Pin
rahul00317-Jul-14 2:17
Memberrahul00317-Jul-14 2:17 
QuestionJmComboBox Control binding though Code Pin
aashish GLmangal19-Jun-14 21:23
Memberaashish GLmangal19-Jun-14 21:23 
AnswerRe: JmComboBox Control binding though Code Pin
Josue Medrano20-Jun-14 9:43
MemberJosue Medrano20-Jun-14 9:43 
Questionjmulticombo Pin
Member 101432951-Apr-14 17:13
MemberMember 101432951-Apr-14 17:13 
AnswerRe: jmulticombo Pin
Josue Medrano2-Apr-14 8:05
MemberJosue Medrano2-Apr-14 8:05 
Questiondo u have any plan to develop this type control for mvc Pin
Tridip Bhattacharjee31-Mar-14 22:01
professionalTridip Bhattacharjee31-Mar-14 22:01 
QuestionCan we use this multi column combo in gridview edit template Pin
Tridip Bhattacharjee31-Mar-14 22:00
professionalTridip Bhattacharjee31-Mar-14 22:00 
AnswerRe: Can we use this multi column combo in gridview edit template Pin
Josue Medrano3-Apr-14 7:52
MemberJosue Medrano3-Apr-14 7:52 
QuestionOne suggestion for multi column combo Pin
Tridip Bhattacharjee31-Mar-14 21:58
professionalTridip Bhattacharjee31-Mar-14 21:58 
AnswerRe: One suggestion for multi column combo Pin
Josue Medrano3-Apr-14 8:38
MemberJosue Medrano3-Apr-14 8:38 
GeneralRe: One suggestion for multi column combo Pin
Tridip Bhattacharjee3-Apr-14 21:37
professionalTridip Bhattacharjee3-Apr-14 21:37 
GeneralVote 4 Pin
Mohsin Azam31-Mar-14 5:37
MemberMohsin Azam31-Mar-14 5:37 
GeneralMy vote of 5 Pin
mirfan0010-Dec-13 0:17
Membermirfan0010-Dec-13 0:17 
QuestionSource Code Available here: Pin
Josue Medrano6-Dec-13 7:51
MemberJosue Medrano6-Dec-13 7:51 
Suggestioncode Pin
shbnq422vb6-Dec-13 5:05
Membershbnq422vb6-Dec-13 5:05 
GeneralRe: code Pin
Josue Medrano6-Dec-13 5:45
MemberJosue Medrano6-Dec-13 5:45 
GeneralRe: code Pin
Josue Medrano6-Dec-13 7:48
MemberJosue Medrano6-Dec-13 7:48 
QuestionWhere's source code?? Pin
Sunil Wise5-Dec-13 23:49
professionalSunil Wise5-Dec-13 23:49 
AnswerRe: Where's source code?? Pin
Josue Medrano6-Dec-13 3:35
MemberJosue Medrano6-Dec-13 3:35 
GeneralRe: Where's source code?? Pin
Josue Medrano6-Dec-13 7:48
MemberJosue Medrano6-Dec-13 7:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.