Cascading combo boxes in edit form of RadGrid

[ClaimAssistant LLC]

I'm frustrated beyond belief. What I want to do seems simple enough. First, I'm using RadControls Q2 for ASP.NET AJAX. I have a grid of users with four columns (username, email address, state, city). I need to edit existing records in place and add new records. Some of the properties of the grid include EditMode="InPlace", AllowAutomaticUpdates="true" and AllowAutomaticInserts="true". The issue I am having is that I need to have the "cities" combo box populate based upon the selection of the "state" combo box. Seems simple enough. The combo boxes appear in edit and insert modes. The combo boxes also need to stay in sync for an "edit" of an existing row.

I see examples of loading on demand, but not in the edit/insert row of a RadGrid. Populating the first combo box is easy, but the second... aaarrgh. I can not find an example of how to 'find' the EditItemTemplate combo box in a javascript function attached to the "OnClientSelectedIndexChanging" event.

I found another telerik example that was using a streamer page. Is that old tech? I'm using Q2 ASP.NET AJAX.

Please help.

[Princy]

Hello James,

Try out the following code to populate a combobox based on the item selected in another combobox.
aspx:

 <telerik:GridTemplateColumn UniqueName="PlaceTo" HeaderText="PlaceTo">
        <EditItemTemplate>
            <telerik:RadComboBox ID="RadComboBox3" AutoPostBack="true" runat="server" SelectedValue='<%# Bind("PlaceFrom") %>' DataSourceID="SqlDataSource1" DataTextField="PlaceTo" DataValueField="PlaceTo" ">
            </telerik:RadComboBox>
        </EditItemTemplate>
        </telerik:GridTemplateColumn>

 <telerik:GridTemplateColumn UniqueName="TemplateColumn">
            <EditItemTemplate>
            <telerik:RadComboBox ID="RadComboBox1"  runat="server">
            </telerik:RadComboBox>
        </EditItemTemplate>
        </telerik:GridTemplateColumn>

cs:

 protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            RadComboBox list = (e.Item as GridEditableItem)["PlaceTo"].FindControl("RadComboBox3") as RadComboBox;
            list.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(list_SelectedIndexChanged);
        }
    }

    void list_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        RadComboBox rdcbx=(RadComboBox)o;
        GridEditableItem editedItem =rdcbx.NamingContainer as GridEditableItem;
        RadComboBox ddList = editedItem["TemplateColumn"].FindControl("RadComboBox1") as RadComboBox;
        // change the data source for ContactTitle with custom code here
         .....
    }

Thanks
Princy.

[ClaimAssistant LLC]

It's a step in the right direction, but not an answer. The second combo box populates, but an error is generated "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus." Also the selected item in the second combo box does not get cleared out of the list when repopulated, and I need the second combo box to bind to an item in the list when I choose 'edit' for the row. I hope that makes sense.

[ClaimAssistant LLC]

I really need help. Someone from Telerik please help me.

[Vlad]

Hi James,

I've made for you small example and you can find the example attached.

Best wishes,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[ClaimAssistant LLC]

That example doesn't solve the problem.

[ClaimAssistant LLC]

Implementation of the example produces the following error when selecting a new item in the first combo box. Here's a link to the error.
http://www.jamesbrowning.com/snap1.gif

Also, 

<%

# Session["SelectedCoverageType"] = Eval("CoverageTypeCode")%> in the edititemtemplate displays the text of the eval in the grid. This is unacceptable. I can't have extra text appearing in the edit row. Here's a link to a screen capture. Notice the text "HO - A Bedroom - Master".
http://www.jamesbrowning.com/snap2.gif

[Amanda]

James - I had the same problem as you, and quite a few new gray hairs to show for it.  Here is my solution - you have to use the Telerik.Web.UI.RadComboBox.ComboBoxes array to find your child combo.  I have a function in a common library file that finds my combobox based on its client-side ID value:

function getTlrkComboBox(name)
{
    var boxes = Telerik.Web.UI.RadComboBox.ComboBoxes;
    var i;

    for (i = 0; i < boxes.length; i++)
    {
        //there is a possibility of this returning the wrong combobox,
        //if one is named "Thing" and another is named "Thing1" - if you are
        //looking for "Thing" it might return "Thing1" instead.  So the
        //moral of the story is, don't name your comboboxes that similarly.
        if (boxes[i].get_id().indexOf(name) > 0) return boxes[i];
    }
}

Then, I call this function to find my child combobox so I can populate it - I'm populating two drop-downs of states and time zones off a country selection:

function LoadTimeZonesAndStates(combo, eventarqs)
    {
        var countriesCombo = combo;
        var tzCombo = getTlrkComboBox("TimeZoneEdit");
        var stateCombo = getTlrkComboBox("StateEdit");
        var item = eventarqs.get_item();
        tzCombo.set_text("Loading...");
        stateCombo.set_text("Loading...");

        if (item.get_index() > 0)
        {
            tzCombo.requestItems(item.get_value(), false);
            stateCombo.requestItems(item.get_value(), false);
            stateCombo.enable();
            tzCombo.enable();
        }
        else
        {
            tzCombo.set_text(" ");
            tzCombo.clearItems();
            stateCombo.set_text(" ");
            stateCombo.clearItems();
        }
    }

And, for completeness, here is the markup of one of my child comboboxes.

<telerik:RadComboBox ID="StateEdit" runat="server" CssClass="formInput"
   OnItemsRequested="StateEdit_ItemsRequested"
   OnClientItemsRequested="ItemsLoaded"
   Height="180px" Width="300px" MarkFirstMatch="true">
   <Items>
      <telerik:RadComboBoxItem runat="server" Text="- First select a country -" Value=""/>
   </Items>
</telerik:RadComboBox>

If this is not enough, please post here and I will share my server-side code with you as well.




 

[ClaimAssistant LLC]

Now that seems pretty smooth. Excellent solution. I'll give it a shot. Hopefully it will work for me. Thanks for taking the time to post that.

[Chris]

HI

I have a question :
How can I use RadAjaxManager/RadAjaxLoadingPanel in this situation (Cascading ComboBoxes in RadGrid) ?
each EditItemTemplate embed one RadAjaxManager/RadAjaxLoadingPanel (if 20 rows, 20 Manager/Panel) ?

Best regards

Chris

 

 

[Eyup]

Hello Chris,

I suggest that you check the samples provided in the following forum post:
http://www.telerik.com/forums/radcombobox-cascading-inside-radgrid#GxsIQqyyPkqj1Za-mNbalg

Regards,
Eyup
Telerik

[Chris]

HI

OK, My question is Cascading ComboBoxes and RadAjaxManager(RadAjaxLoadingPanel) is included.
comboboxes are within gridview and I don't want the web page refreshed so obviously 
after change primary combobox item.

to reach the target, I need to configure RadAjaxManager.AjaxSettings dynamically, because Id of bounded controls are named dynamically.

sample code as below :

primary combobox - SectionCodeCombo
secondary combobox - UserCombo

.aspx

  RadAjaxManager, RadAjaxLoadingPanel, RadComboBox (Cascading), GridView :

 

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"  CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
    </AjaxSettings>
  </telerik:RadAjaxManager>
  <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
  </telerik:RadAjaxLoadingPanel>

 

  

<asp:GridView ID="GridView1" runat="server" ... >

  <Columns>

    <asp:TemplateField HeaderText="Section">
      <EditItemTemplate>
        <telerik:RadComboBox ID="SectionCodeCombo" runat="server"
          AutoPostBack="True"
          CssClass="SectionCodeCombo"
          DataTextField="SectionName"
          DataValueField="SectionCode"
          EmptyMessage="Select section ..."
          OnSelectedIndexChanged="SectionCodeCombo_SelectedIndexChanged">
          <CollapseAnimation Duration="0" />
          <ExpandAnimation Duration="100" />
        </telerik:RadComboBox>
      </EditItemTemplate>
      <FooterTemplate>
        <telerik:RadComboBox ID="SectionCodeCombo_Add" runat="server"
          AutoPostBack="True"
          CssClass="SectionCodeCombo_Add"
          DataTextField="SectionName"
          DataValueField="SectionCode"
          EmptyMessage="Select section (add) ..."
          OnSelectedIndexChanged="SectionCodeCombo_SelectedIndexChanged">
          <CollapseAnimation Duration="0" />
          <ExpandAnimation Duration="100" />
        </telerik:RadComboBox>
      </FooterTemplate>
      <ItemTemplate>
        <asp:Label ID="Label6" runat="server" Text='<%# Bind("SectionName") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="User">
      <EditItemTemplate>
        <telerik:RadComboBox ID="UserCombo" runat="server"
          CssClass="UserCombo"
          DataTextField="UserName"
          DataValueField="UserID"
          EmptyMessage="Select user ...">
          <CollapseAnimation Duration="0" />
          <ExpandAnimation Duration="100" />
        </telerik:RadComboBox>
      </EditItemTemplate>
      <FooterTemplate>
        <telerik:RadComboBox ID="UserCombo_Add" runat="server"
          CssClass="UserCombo_Add"
          DataTextField="UserName"
          DataValueField="UserID"
          EmptyMessage="Select user (add) ...">
          <CollapseAnimation Duration="0" />
          <ExpandAnimation Duration="100" />
        </telerik:RadComboBox>
      </FooterTemplate>
      <ItemTemplate>
        <asp:Label ID="Label31" runat="server" Text='<%# Bind("UserName") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField ShowHeader="False">
      <EditItemTemplate>
        <asp:Button ID="UpdateButton" runat="server"
          CausesValidation="True"
          CommandName="Update"
          CssClass="Button"
          Text="[Update]" />

        <asp:Button ID="CancelButton" runat="server"
          CausesValidation="False"
          CommandName="Cancel"
          CssClass="Button"
          Text="[Cancel]" />
      </EditItemTemplate>
      <FooterTemplate>
        <asp:Button ID="AddButton" runat="server"
          OnClick="AddButton_Click"
          CssClass="Button"
          Text="Add" />
      </FooterTemplate>
      <ItemTemplate>
        <asp:Button ID="EditButton" runat="server"
          CausesValidation="False"
          CommandName="Edit"
          CssClass="Button"
          Text="[Edit]" />

        <asp:Button ID="DeleteButton" runat="server"
          CausesValidation="False"
          CommandName="Delete"
          CssClass="Button"
          Text="[Delete]" />
      </ItemTemplate>
    </asp:TemplateField>

  </Columns>

</asp:GridView>

 

 

 C#

  .aspx.cs

  Page_Load, reset ajax update for bounded controls in gridview :

 

protected void Page_Load(object sender, EventArgs e)
{
  // Load
  ...
  AddAjaxUpdatedControl(); // reset Ajax update

   
  GridView.RowDataBound, set ajax update for bounded controls in gridview (DataRow/Footer) :

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
  // RowDataBound
  ...
  DataRowView BoundRowView = (DataRowView)e.Row.DataItem;
  RadComboBox SectionCodeCombo, UserCombo;
  RadComboBox SectionCodeCombo_Add, UserCombo_Add;
  string sSectionCode;
  //
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    // Section Binding
    SectionCodeCombo = ((RadComboBox)e.Row.FindControl("SectionCodeCombo"));
    sSectionCode = ""; // Section - none
    if (SectionCodeCombo != null)
    {
      sSectionCode = BoundRowView["SectionCode"].ToString();
      LoadSection(SectionCodeCombo, sSectionCode);
    }
    // User Binding
    UserCombo = ((RadComboBox)e.Row.FindControl("UserCombo"));
    if (UserCombo != null)
    {
      AddAjaxUpdatedControl(SectionCodeCombo, UserCombo); // add ajax update - data view row
      LoadSectionUser(UserCombo, sSectionCode, BoundRowView["UserID"].ToString());
    }
  }
  else if (e.Row.RowType == DataControlRowType.Footer)
  {
    SectionCodeCombo_Add = (RadComboBox)e.Row.FindControl("SectionCodeCombo_Add");
    UserCombo_Add = (RadComboBox)e.Row.FindControl("UserCombo_Add");
    if (SectionCodeCombo_Add != null)
      LoadSection(SectionCodeCombo_Add, "");
    if (UserCombo_Add != null)
      LoadSectionUser(UserCombo_Add, "", "");
    AddAjaxUpdatedControl(SectionCodeCombo_Add, UserCombo_Add); // add ajax update - footer view row
  }

 

 
  SectionCodeCombo.SelectedIndexChanged, select section then reset user binding :

protected void SectionCodeCombo_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
  // SelectedIndexChanged - Section
  // *for section combobox in EditItemTemplate/FooterTemplate
  RadComboBox SectionCodeCombo, UserCombo;
  //
  SectionCodeCombo = (RadComboBox)sender; // Section
  UserCombo = (RadComboBox)SectionCodeCombo.NamingContainer.FindControl("UserCombo"); // User
  if (UserCombo == null) // combobox in FooterTemplate
    UserCombo = (RadComboBox)SectionCodeCombo.NamingContainer.FindControl("UserCombo_Add");
  LoadSectionUser(UserCombo, e.Value, "");
}

  common utils :

protected void AddAjaxUpdatedControl()
{
  // add ajax update - all view rows
  // *for postback calling.
  RadComboBox SectionCodeCombo, UserCombo;
  List<GridViewRow> RowList;
  // Retrieve all view rows (GridView.Rows - FooterRow not included)
  RowList = new List<GridViewRow>();
  foreach (GridViewRow LoopViewRow in GridView1.Rows)
    RowList.Add(LoopViewRow);
  if (GridView1.FooterRow != null) // maybe null
    RowList.Add(GridView1.FooterRow);
  // All view rows looping
  foreach (GridViewRow LoopViewRow in RowList)
  {
    SectionCodeCombo = ((RadComboBox)LoopViewRow.FindControl("SectionCodeCombo")); // Section
    UserCombo = ((RadComboBox)LoopViewRow.FindControl("UserCombo")); // User
    if (LoopViewRow.RowType == DataControlRowType.Footer)
    {
      SectionCodeCombo = (RadComboBox)LoopViewRow.FindControl("SectionCodeCombo_Add");
      UserCombo = (RadComboBox)LoopViewRow.FindControl("UserCombo_Add");
    }
    AddAjaxUpdatedControl(SectionCodeCombo, UserCombo);
  }
}

protected void AddAjaxUpdatedControl(RadComboBox SectionCodeCombo, RadComboBox UserCombo)
{
  // add ajax update - controls
  if (SectionCodeCombo != null && UserCombo != null)
    AddAjaxUpdatedControl(SectionCodeCombo.UniqueID, UserCombo.UniqueID, RadAjaxLoadingPanel1.ID); // UniqueID, ctl00$ContentPlaceHolder1$GridView1$ctl02$SectionCodeCombo, etc. not ClientID.
}

protected void AddAjaxUpdatedControl(string sAjaxControlID, string sUpdatedControl, string sAjaxLoadingPanelID)
{
  // add ajax update settings
  AjaxSetting NewAjaxSetting;
  //
  for (int I = RadAjaxManager1.AjaxSettings.Count - 1; I >= 0; I--)
    if (RadAjaxManager1.AjaxSettings[I].AjaxControlID == sAjaxControlID)
      RadAjaxManager1.AjaxSettings.RemoveAt(I);
  NewAjaxSetting = new AjaxSetting(sAjaxControlID); // UniqueID, ctl00$ContentPlaceHolder1$GridView1$ctl02$SectionCodeCombo, etc. not ClientID.
  NewAjaxSetting.UpdatedControls.Add(new AjaxUpdatedControl(sUpdatedControl, sAjaxLoadingPanelID));
  RadAjaxManager1.AjaxSettings.Add(NewAjaxSetting);
}

public static void SetSelectedValue(RadComboBox AControl, string sValue)
{
  // Reset SelectedValue
  AControl.SelectedValue = sValue;
  if (AControl.SelectedIndex == -1)
    AControl.SelectedValue = "";
}

protected void LoadSection(RadComboBox SectionCodeCombo, string sSectionCode)
{
  // load section
  DataTable NewTable;
  //
  NewTable = GetSection();
  SectionCodeCombo.Text = ""; // clear text/items
  SectionCodeCombo.Items.Clear();
  SectionCodeCombo.SelectedValue = "";
  SectionCodeCombo.DataSource = NewTable;
  SectionCodeCombo.DataBind();
  //
  SetSelectedValue(SectionCodeCombo, sSectionCode);
}

protected void LoadSectionUser(RadComboBox UserCombo, string sSectionCode, string sUserID)
{
  // load user
  DataTable NewTable;
  //
  NewTable = GetSectionUser(sSectionCode);
  UserCombo.Text = ""; // clear text/items
  UserCombo.Items.Clear();
  UserCombo.SelectedValue = "";
  UserCombo.DataSource = NewTable;
  UserCombo.DataBind();
  //
  SetSelectedValue(UserCombo, sUserID);
}

 

and it works.

Best regards

Chris

 

 

 

 

 

[Eyup]

Hi Chris,

Does the sample works as expected without all the AJAX logic? I suggest that you try to add the AjaxSettings during the PreRender event handlers of the combos by using (sender as RadComboBox):
http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radajaxmanager/how-to/add-ajaxsettings-programmatically

If the issue remains, you can create a new web site to isolate the problematic behavior and open a formal support ticket to send it to us along with detailed explanations.

Regards,
Eyup
Telerik