Cascading combo boxes in edit form of RadGrid

13 posts, 0 answers
  1. ClaimAssistant LLC
    ClaimAssistant LLC avatar
    6 posts
    Member since:
    May 2007

    Posted 21 Sep 2008 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ClaimAssistant LLC
    ClaimAssistant LLC avatar
    6 posts
    Member since:
    May 2007

    Posted 22 Sep 2008 Link to this post

    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.
  5. ClaimAssistant LLC
    ClaimAssistant LLC avatar
    6 posts
    Member since:
    May 2007

    Posted 22 Sep 2008 Link to this post

    I really need help. Someone from Telerik please help me.
  6. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 23 Sep 2008 Link to this post

    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.
  7. ClaimAssistant LLC
    ClaimAssistant LLC avatar
    6 posts
    Member since:
    May 2007

    Posted 01 Oct 2008 Link to this post

    That example doesn't solve the problem.
  8. ClaimAssistant LLC
    ClaimAssistant LLC avatar
    6 posts
    Member since:
    May 2007

    Posted 01 Oct 2008 Link to this post

    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

  9. Amanda
    Amanda avatar
    24 posts
    Member since:
    Apr 2007

    Posted 01 Oct 2008 Link to this post

    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.




     

  10. ClaimAssistant LLC
    ClaimAssistant LLC avatar
    6 posts
    Member since:
    May 2007

    Posted 01 Oct 2008 Link to this post

    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.
  11. Chris
    Chris avatar
    33 posts
    Member since:
    Oct 2015

    Posted 26 Jan in reply to Vlad Link to this post

    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

     

     

  12. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 29 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Chris
    Chris avatar
    33 posts
    Member since:
    Oct 2015

    Posted 03 Feb in reply to Chris Link to this post

    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

     

     

     

     

     

  14. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 08 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017