Question

Is it possible to show multiple columns and headers inside of a combo box/dropdown list in asp.net and show related columns values, for an example, if I click on a country name then it should show me all the cities for that country and clicking on city name should show me all the related places.

Is there any third part control available? I have checked telerik and they have combo box with multiple columns but not with related values.

Answer 1

I hope this will help you to get started.

<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="True" 
    OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="True" 
    OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox3" runat="server">
    <ItemTemplate>
        <table width="100%">
            <tr>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Population")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

public class Country
{
  public int Id { get; set; }
  public string Name { get; set; }
  public int Population  { get; set; }
}

public class State
{
  public int Id { get; set; }
  public int CountryId { get; set; }
  public string Name { get; set; }
  public int Population { get; set; }
}

public class City
{
  public int Id { get; set; }
  public int StateId { get; set; }
  public string Name { get; set; }
  public int Population { get; set; }
}

public List<Country> Countries
{
  get
  {
    return new List<Country>
      {
        new Country {Id = 1, Name = "United States", Population = 1000},
        new Country {Id = 2, Name = "Canada", Population = 2000},
        new Country {Id = 3, Name = "Mexico", Population = 3000}
      };
  }
}


public List<State> States
{
  get
  {
    return new List<State>
      {
        new State {Id = 1, CountryId = 1, Name = "California", Population = 100},
        new State {Id = 2, CountryId = 1, Name = "New York", Population = 200},
        new State {Id = 3, CountryId = 2, Name = "Quebec", Population = 300},
        new State {Id = 4, CountryId = 2, Name = "Ontario", Population = 400}
      };
  }
}


public List<City> Cities
{
  get
  {
    return new List<City>
      {
        new City {Id = 1, StateId = 1, Name = "Los Angeles", Population = 10},
        new City {Id = 2, StateId = 1, Name = "San Diego", Population = 20},
        new City {Id = 3, StateId = 1, Name = "San Francisco", Population = 30},
        new City {Id = 4, StateId = 1, Name = "San Joe", Population = 40},
        new City {Id = 5, StateId = 2, Name = "New York", Population = 50},
        new City {Id = 6, StateId = 2, Name = "Paterson", Population = 60},
        new City {Id = 7, StateId = 2, Name = "Newark", Population = 70},
        new City {Id = 8, StateId = 2, Name = "Smithtown", Population = 80},
      };
  }
}

protected void Page_Load(object sender, EventArgs e)
{
  if(!IsPostBack)
  {
    RadComboBox1.DataSource = Countries;
    RadComboBox1.DataValueField = "Id";
    RadComboBox1.DataTextField = "Name";
    RadComboBox1.DataBind();

    RadComboBox1.Items.Insert(0, new RadComboBoxItem("Select Country", ""));
  }
}

protected void RadComboBox1_SelectedIndexChanged(
  object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  RadComboBox2.Items.Clear();
  RadComboBox3.Items.Clear();

  int countryId;
  if (Int32.TryParse(e.Value, out countryId))
  {
    RadComboBox2.DataSource = States.Where(s => s.CountryId == countryId);
    RadComboBox2.DataValueField = "Id";
    RadComboBox2.DataTextField = "Name";
    RadComboBox2.DataBind();

    RadComboBox2.Items.Insert(0, new RadComboBoxItem("Select State", ""));
  }
}

protected void RadComboBox2_SelectedIndexChanged(
  object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  RadComboBox3.Items.Clear();

  int stateId;
  if (Int32.TryParse(e.Value, out stateId))
  {
    RadComboBox3.DataSource = Cities.Where(c => c.StateId == stateId);
    RadComboBox3.DataValueField = "Id";
    RadComboBox3.DataTextField = "Name";
    RadComboBox3.DataBind();

    RadComboBox3.Items.Insert(0, new RadComboBoxItem("Select City", ""));
  }
}