New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Implement related RadComboBox controls in the advanced form

HOW-TO

Implement related RadComboBox controls in the advanced form

related combox in advanced form

DESCRIPTION

The advanced form exposes two RadComboBox controls. A selection in the first RadComboBox control updates the data source of the second RadComboBox using a select parameter. The values of the selected items of the RadComboBox controls are stored in custom attributes. It is important to note that this functionality cannot be achieved using resources and therefore the RadComboBox controls are not resources (although they appear as such). They are manually added controls to the *AdvancedForm *user control.

SOLUTION

  1. Download a demo project from here and use the *SqlDataSource *sample.

  2. Create two new fields of type string for the DbProvider_Classes - Continent and Country. The TelerikVSX.mdf file is in the App_Data folder of the sample.

  3. Add the following code in the 'Resource controls' section of the AdvancedForm.ascx:

<!-- Optionally add more ResourceControl instances here -->
<li>
   <telerik:RadComboBox ID="ComboBoxContinent" runat="server" DataSourceID="SqlDataSource1" Label="Continent:"
      DataTextField="Name" DataValueField="ID" AutoPostBack="True"
      ondatabound="ComboBoxContinent_DataBound"
      onselectedindexchanged="ComboBoxContinent_SelectedIndexChanged">
   </telerik:RadComboBox>
   <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikVSXConnectionString %>"
      SelectCommand="SELECT * FROM [Continents]"></asp:SqlDataSource>

   <telerik:RadComboBox ID="ComboBoxCountry" runat="server" DataSourceID="SqlDataSource2" Label="Country:"
      DataTextField="Name" DataValueField="ID">
   </telerik:RadComboBox>
   <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikVSXConnectionString %>"
      SelectCommand="SELECT * FROM [Countries] WHERE ([ContinentID] = @ContinentID)">
      <SelectParameters>
            <asp:ControlParameter ControlID="ComboBoxContinent" Name="ContinentID" PropertyName="SelectedValue"
               Type="Int32" />
      </SelectParameters>
   </asp:SqlDataSource>
</li>
  1. In code behind of the AdvancedForm user control add the following code:

    #region Attributes and resources
    
    
    

    [Bindable(BindableSupport.Yes, BindingDirection.TwoWay)] public string Continent { get { return ComboBoxContinent.SelectedValue.ToString(); }

            set
            {
                ComboBoxContinent.SelectedValue = value;
            }
        }
    
        [Bindable(BindableSupport.Yes, BindingDirection.TwoWay)]
        public string Country
        {
            get
            {
                return ComboBoxCountry.SelectedValue;
            }
    
            set
            {
                ComboBoxCountry.SelectedValue = value;
            }
        }  
    

    protected void ComboBoxContinent_DataBound(object sender, EventArgs e) { RadComboBox combo = (RadComboBox) sender; combo.Items.Insert(0, new RadComboBoxItem("-", String.Empty));

        }
        protected void ComboBoxContinent_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            if (e.Value == String.Empty)
                ComboBoxCountry.Items.Clear();
    
        }
    

     <Bindable(BindableSupport.Yes, BindingDirection.TwoWay)> _
    Public Property Continent() As String
        Get
            Return ComboBoxContinent.SelectedValue.ToString()
        End Get
    
    
    Set
        ComboBoxContinent.SelectedValue = value
    End Set
    

    End Property

    <Bindable(BindableSupport.Yes, BindingDirection.TwoWay)> _ Public Property Country() As String Get Return ComboBoxCountry.SelectedValue End Get

    Set
        ComboBoxCountry.SelectedValue = value
    End Set
    

    End Property

    Protected Sub ComboBoxContinent_DataBound(sender As Object, e As EventArgs) Dim combo As RadComboBox = DirectCast(sender, RadComboBox) combo.Items.Insert(0, New RadComboBoxItem("-", [String].Empty))

    End Sub Protected Sub ComboBoxContinent_SelectedIndexChanged(sender As Object, e As RadComboBoxSelectedIndexChangedEventArgs) If e.Value = [String].Empty Then ComboBoxCountry.Items.Clear() End If

    End Sub

    5. In Default.aspx add and bind the Type and Resource custom attributes:
    <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" AppointmentStyleMode="Default"
       StartInsertingInAdvancedForm="true" StartEditingInAdvancedForm="true" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
       OnClientFormCreated="schedulerFormCreated" CustomAttributeNames="AppointmentColor, Continent, Country"
       EnableDescriptionField="True" DataDescriptionField="Description" DataEndField="End"
       DataKeyField="ClassID" DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
       DataReminderField="Reminder" DataSourceID="SqlDataSource1" DataStartField="Start"
       DataSubjectField="Subject">
       <AdvancedForm Modal="true" />
       <Reminders Enabled="true" />
       <AdvancedEditTemplate>
             <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>'
                Description='<%# Bind("Description") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'
                RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Continent='<%# Bind("Continent") %>'
                Country='<%# Bind("Country") %>' Reminder='<%# Bind("Reminder") %>' AppointmentColor='<%# Bind("AppointmentColor") %>'
                TeacherID='<%# Bind("Teacher") %>' />
       </AdvancedEditTemplate>
       <AdvancedInsertTemplate>
             <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>'
                Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' Description='<%# Bind("Description") %>'
                RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Continent='<%# Bind("Continent") %>'
                Country='<%# Bind("Country") %>' Reminder='<%# Bind("Reminder") %>' AppointmentColor='<%# Bind("AppointmentColor") %>'
                TeacherID='<%# Bind("Teacher") %>' />
       </AdvancedInsertTemplate>
       <ResourceTypes>
             <telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="TeacherID" KeyField="TeacherID"
                Name="Teacher" TextField="Name" />
       </ResourceTypes>
       <TimelineView UserSelectable="false" />
       <TimeSlotContextMenuSettings EnableDefault="true" />
       <AppointmentContextMenuSettings EnableDefault="true" />
    </telerik:RadScheduler>
    

    You can download the project files from here.

In this article