This is a migrated thread and some comments may be shown as answers.

Cascading combo boxes in edit form of RadGrid

12 Answers 539 Views

Grid

This is a migrated thread and some comments may be shown as answers.

ClaimAssistant LLC asked on 22 Sep 2008, 01:31 AM

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.

12 Answers, 1 is accepted

answered on 22 Sep 2008, 06:29 AM

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.

answered on 23 Sep 2008, 08:46 AM

WebSite.zip

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.

answered on 01 Oct 2008, 08:28 PM

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.

answered on 03 Feb 2016, 08:44 AM

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

answered on 08 Feb 2016, 09:54 AM

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