CODEWITHSUNDEEP
asp.netajaxvb.netdrop-down-menutelerik
user1263981
user1263981

Reputation: 3147

Combo box with multiple columns and related values

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.

Upvotes: 0

Views: 6389

Answers (2)

Win
Win

Reputation: 62260

I hope this will help you to get started.

enter image description here

<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", ""));
  }
}

Upvotes: 1

Jeremy
Jeremy

Reputation: 9020

I don't know about 'related' values, per sé; however you may need to develop that on your own.

Besides Telerik, if you don't mind using jQuery, here are a couple of plugins you can use for free to achieve the multi-column/header aspect:

There are a few others you can take a peak at using this google search.

Helpful reference: jQuery

Upvotes: 1

Related Questions