Using cascading RadComboBoxes into the RadGrid Insert/Edit form

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 29 Oct 2010 Link to this post

    Requirements
    RadControls for ASP .NET AJAX version

    Q2 2010 and later
    .NET version

    3.5 and late
    Visual Studio version

    2008 and later
    Programming language

    C#, VB
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX

    PROJECT DESCRIPTION
    The attached sample project demonstrates how to use the cascading RadComboBoxes into the RadGrid's edit item. When the RadGrid's item is in Edit mode three RadComboBoxes are rendered and the list in the next combo is populated after selecting a value in the previous:
    Step 1: Select Continent


    Step 2: Select Country


    Step 3: Select City


    The cascading RadComboBoxes are added into the UserControl which is placed into the RadGrid.MasterTableView.FormTemplate:
    <EditFormSettings EditFormType="Template">
     <FormTemplate>
      <table>
        <tr>
          <td>
            ...
          </td>
          </tr>
        <tr>
          <td>
           <user:MyUserControl runat="server" ID="UserControl1" />
          </td>
        </tr>
          <tr>
             <td align="right" colspan="2">
                 ...
             </td>
          </tr>
       </table>
     </FormTemplate>
    </EditFormSettings>

    ASCX:
    <asp:Label ID="Label1" runat="server" AssociatedControlID="RadComboBox1">Continent:</asp:Label>
     <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="186px" CssClass="ComboBox_Continents" OnClientSelectedIndexChanging="LoadCountries" OnItemsRequested="RadComboBox1_ItemsRequested" />
     <asp:Label ID="Label2" runat="server" AssociatedControlID="RadComboBox2">Country:</asp:Label>
    <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="186px" CssClass="ComboBox_Countries" OnClientSelectedIndexChanging="LoadCities" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="RadComboBox2_ItemsRequested" />
    <asp:Label ID="Label3" runat="server" AssociatedControlID="RadComboBox3">City:</asp:Label>
     <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="186px" CssClass="ComboBox_Cities" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="RadComboBox3_ItemsRequested" />
    When the RadGrid's edit form is loaded the user RadComboBoxes are populated with data and the appropriate items are selected:
    protected void Page_Load(object sender, EventArgs e)
    {
         ...
         int cityId = Convert.ToInt32(((this.Parent.Parent.NamingContainer as GridEditFormItem).ParentItem.DataItem as DataRowView).Row["City"]);
         City city = GetCityById(cityId);
         Country country = GetCountryById(city.CounryID);
         Continent continent = GetContinentById(country.CountinentID);
         LoadContinents();
         RadComboBox1.SelectedValue = continent.ID.ToString();
         LoadCountries(continent.ID.ToString());
         RadComboBox2.SelectedValue = country.ID.ToString();
         LoadCities(country.ID.ToString());
         RadComboBox3.SelectedValue = city.ID.ToString();
        ...
    }

    On the Insert/Update command of the RadGrid you could get the city Id from the last RadCombobox by using the following code snippet:
    GridEditFormItem item = e.Item as GridEditFormItem;
    int cityId = Convert.ToInt32((item.FindControl("UserControl1").FindControl("radComboBox3") as RadComboBox).SelectedValue);
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.