Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Scheduler / Related Load on Demand RadComboBoxes in the advanced form of RadScheduler

Related Load on Demand RadComboBoxes in the advanced form of RadScheduler

Article Info

Rating: 5

Article information

Article relates to

 RadScheduler version 2009.2.826 or higher

Created by

 Peter, Telerik    

Last modified

 April 13, 2012

Last modified by

 Peter, Telerik    


HOW TO

add related Load on Demand RadComboBoxes in the advanced form of RadScheduler

DESCRIPTION

This kb article merges the functionalities of the Related ComboBoxes and the Advanced Templates demos. The selected values of the two RadComboBoxes are stored using custom attributes. Note that we don't use resources for this case.
related lod RadComboboxes in advanced form

SOLUTION

1. Download the attached sample.

2. In AdvancedForm.ascx add the following code within the AdvancedControlsPanel:

<asp:panel runat="server" id="AdvancedControlsPanel" cssclass="rsAdvMoreControls">
                  <telerik:RadComboBox ID="ContinentsRadComboBox" runat="server" Width="186px" Label="Continent:"
                      OnClientSelectedIndexChanged="LoadCountries" />
                  <telerik:RadComboBox ID="CountriesRadComboBox" runat="server" Label="Country:" Width="186px"
                      OnItemsRequested="CountriesRadComboBox_ItemsRequested" OnClientItemsRequested="CountriesLoaded"
                      OnClientLoad="CountriesComboClientLoad" EnableViewState="false" />
              </asp:panel>


3. Still in AdvancedForm.js add the following javascript:
var countriesCombo = null;
function CountriesComboClientLoad(sender) {
    countriesCombo = sender;
}
function CountriesLoaded(combo, eventArqs) {
    if (combo.get_items().get_count() > 0) {
        // Pre-select the first country  
        combo.set_text(combo.get_items().getItem(0).get_text());
        combo.get_items().getItem(0).highlight();
    }
    combo.showDropDown();
}
 
function LoadCountries(combo, eventArqs) {
    var item = eventArqs.get_item();
 
    countriesCombo.set_text("Loading...");
 
    // Is continent selected?  
    if (item.get_index() > 0) {
        // Request items through the ItemsRequested event of the   
        // countries RadComboBox passing the continentID as a parameter   
        countriesCombo.requestItems(item.get_value(), false);
    }
    else {
        // The "-Select a continent-" item was chosen  
        countriesCombo.set_text(" ");
        countriesCombo.clearItems();
    }
}



4. In code-behind of AdvancedForm.ascx add the following:

  4.1 In the "Private Members" region add:

C#
#region Private members  
 
        private string _selectedCountry; 

VB.NET
#Region "Private members"  
 
        Private _selectedCountry As String 

    4.2 In the "Attributes and resources" region add:

C#
//Continent, Coutry  
        [Bindable(BindableSupport.Yes, BindingDirection.TwoWay)]  
        public string Continent  
        {  
            get 
            {  
                return ContinentsRadComboBox.SelectedValue;  
            }  
 
            set 
            {  
                ContinentsRadComboBox.SelectedValue = value;  
            }  
        }  
 
        [Bindable(BindableSupport.Yes, BindingDirection.TwoWay)]  
        public string Country  
        {  
            get 
            {  
                return CountriesRadComboBox.SelectedValue;  
            }  
 
            set 
            {  
                // Store the selected country ID until we obtain the continent ID  
                _selectedCountry = value;  
            }  
        }  
 
 
        protected void LoadContinents()  
        {  
            SqlConnection connection = new SqlConnection(  
            ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);  
 
            SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Continents ORDER By Name", connection);  
            DataTable dt = new DataTable();  
            adapter.Fill(dt);  
            ContinentsRadComboBox.Items.Clear();  
            ContinentsRadComboBox.Items.Insert(0, new RadComboBoxItem("- Select a continent -"));  
            ContinentsRadComboBox.AppendDataBoundItems = true;  
            ContinentsRadComboBox.DataTextField = "Name";  
            ContinentsRadComboBox.DataValueField = "ID";  
            ContinentsRadComboBox.DataSource = dt;  
            ContinentsRadComboBox.DataBind();  
            ContinentsRadComboBox.DataSource = null;  
            //insert the first item  
 
        }  
 
        protected void LoadCountries(string continentID)  
        {  
            SqlConnection connection = new SqlConnection(  
            ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);  
 
            //select a country based on the continentID  
            SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Countries WHERE ContinentID=@ContinentID ORDER By Name", connection);  
            adapter.SelectCommand.Parameters.AddWithValue("@ContinentID", continentID);  
 
            DataTable dt = new DataTable();  
            adapter.Fill(dt);  
 
            CountriesRadComboBox.DataTextField = "Name";  
            CountriesRadComboBox.DataValueField = "ID";  
            CountriesRadComboBox.DataSource = dt;  
            CountriesRadComboBox.DataBind();  
        }  
 
        protected void CountriesRadComboBox_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)  
        {  
            // e.Text is the first parameter of the requestItems method   
            // invoked in LoadCountries method   
            LoadCountries(e.Text);  
        } 

VB.NET
'Continent, Coutry  
        <Bindable(BindableSupport.Yes, BindingDirection.TwoWay)> _  
        Public Property Continent() As String 
            Get 
                Return ContinentsRadComboBox.SelectedValue  
            End Get 
 
            Set(ByVal value As String)  
                ContinentsRadComboBox.SelectedValue = value  
            End Set 
        End Property 
 
        <Bindable(BindableSupport.Yes, BindingDirection.TwoWay)> _  
        Public Property Country() As String 
            Get 
                Return CountriesRadComboBox.SelectedValue  
            End Get 
 
            Set(ByVal value As String)  
                ' Store the selected country ID until we obtain the continent ID  
                _selectedCountry = value  
            End Set 
        End Property 
 
 
        Protected Sub LoadContinents()  
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("TelerikConnectionString").ConnectionString)  
 
            Dim adapter As New SqlDataAdapter("SELECT * FROM Continents ORDER By Name", connection)  
            Dim dt As New DataTable()  
            adapter.Fill(dt)  
            ContinentsRadComboBox.Items.Clear()  
            ContinentsRadComboBox.Items.Insert(0, New RadComboBoxItem("- Select a continent -"))  
            ContinentsRadComboBox.AppendDataBoundItems = True 
            ContinentsRadComboBox.DataTextField = "Name" 
            ContinentsRadComboBox.DataValueField = "ID" 
            ContinentsRadComboBox.DataSource = dt  
            ContinentsRadComboBox.DataBind()  
            ContinentsRadComboBox.DataSource = Nothing 
            'insert the first item  
 
        End Sub 
 
        Protected Sub LoadCountries(ByVal continentID As String)  
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("TelerikConnectionString").ConnectionString)  
 
            'select a country based on the continentID  
            Dim adapter As New SqlDataAdapter("SELECT * FROM Countries WHERE ContinentID=@ContinentID ORDER By Name", connection)  
            adapter.SelectCommand.Parameters.AddWithValue("@ContinentID", continentID)  
 
            Dim dt As New DataTable()  
            adapter.Fill(dt)  
 
            CountriesRadComboBox.DataTextField = "Name" 
            CountriesRadComboBox.DataValueField = "ID" 
            CountriesRadComboBox.DataSource = dt  
            CountriesRadComboBox.DataBind()  
        End Sub 
        Protected Sub CountriesRadComboBox_ItemsRequested(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles CountriesRadComboBox.ItemsRequested  
            ' e.Text is the first parameter of the requestItems method   
            ' invoked in LoadCountries method   
            LoadCountries(e.Text)  
        End Sub 

  4.3 In Page_Load add:

C#
protected void Page_Load(object sender, EventArgs e)  
    {  
            if (ContinentsRadComboBox.Items.Count == 0)  
            {  
                // Fill the continents combo  
                LoadContinents();  
            } 

VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)  
            If ContinentsRadComboBox.Items.Count = 0 Then 
                ' Fill the continents combo  
                LoadContinents()  
            End If 

   4.4 In PreRender add:

C#
protected override void OnPreRender(EventArgs e)  
        {  
            base.OnPreRender(e);  
 
            if (!string.IsNullOrEmpty(_selectedCountry))  
            {  
                // Fill the countries combo.  
                // Note that Continent value is available in PreRender  
                LoadCountries(Continent);  
                CountriesRadComboBox.SelectedValue = _selectedCountry;  
            } 

VB.NET
Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)  
            MyBase.OnPreRender(e)  
            If Not String.IsNullOrEmpty(_selectedCountry) Then 
                ' Fill the countries combo.  
                ' Note that Continent value is available in PreRender  
                LoadCountries(Continent)  
                CountriesRadComboBox.SelectedValue = _selectedCountry  
            End If 

5. Copy Telerik.mdf from your local installation of the Telerik.Web.UI suit \Live Demos\App_Data to the App_Data folder of your current web site. In the web.config file add the following connection string:
<connectionStrings> 
        <add name="TelerikConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Telerik.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>  
    </connectionStrings> 

6. In Default.aspx, use the following RadScheduler declaration and SqlDataSource:
<telerik:RadScheduler runat="server" ID="RadScheduler1" OnClientFormCreated="schedulerFormCreated" 
        Width="750px" SelectedDate="2009-03-30" TimeZoneOffset="03:00:00" CustomAttributeNames="Description,Continent,Country" 
        OnDataBound="RadScheduler1_DataBound" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound" 
        DataEndField="End" DataKeyField="ID" DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID" 
         DataStartField="Start" DataSubjectField="Subject" 
        HoursPanelTimeFormat="htt" ValidationGroup="RadScheduler1"   
        DataSourceID="SqlDataSource1">     <AdvancedForm Modal="true" /> 
        <AdvancedEditTemplate> 
            <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>' 
                Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' 
                Continent='<%# Bind("Continent") %>' 
                Country='<%# Bind("Country") %>'/>  
        </AdvancedEditTemplate> 
        <AdvancedInsertTemplate> 
            <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>' 
                Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' 
                Continent='<%# Bind("Continent") %>' 
                Country='<%# Bind("Country") %>' /> 
        </AdvancedInsertTemplate>         
    </telerik:RadScheduler> 
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"   
        DeleteCommand="DELETE FROM [Appointments] WHERE [ID] = @ID"   
        InsertCommand="INSERT INTO [Appointments] ([Subject], [Start], [End], [UserID], [RoomID], [RecurrenceRule], [RecurrenceParentID], [Description], [Continent], [Country]) VALUES (@Subject, @Start, @End, @UserID, @RoomID, @RecurrenceRule, @RecurrenceParentID, @Description, @Continent, @Country)"   
        SelectCommand="SELECT * FROM [Appointments]"   
        UpdateCommand="UPDATE [Appointments] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [UserID] = @UserID, [RoomID] = @RoomID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID, [Description] = @Description, [Continent] = @Continent, [Country] = @Country WHERE [ID] = @ID">  
        <DeleteParameters> 
            <asp:Parameter Name="ID" Type="Int32" /> 
        </DeleteParameters> 
        <UpdateParameters> 
            <asp:Parameter Name="Subject" Type="String" /> 
            <asp:Parameter Name="Start" Type="DateTime" /> 
            <asp:Parameter Name="End" Type="DateTime" /> 
            <asp:Parameter Name="UserID" Type="Int32" /> 
            <asp:Parameter Name="RoomID" Type="Int32" /> 
            <asp:Parameter Name="RecurrenceRule" Type="String" /> 
            <asp:Parameter Name="RecurrenceParentID" Type="Int32" /> 
            <asp:Parameter Name="Description" Type="String" /> 
            <asp:Parameter Name="Continent" Type="String" /> 
            <asp:Parameter Name="Country" Type="String" /> 
            <asp:Parameter Name="ID" Type="Int32" /> 
        </UpdateParameters> 
        <InsertParameters> 
            <asp:Parameter Name="Subject" Type="String" /> 
            <asp:Parameter Name="Start" Type="DateTime" /> 
            <asp:Parameter Name="End" Type="DateTime" /> 
            <asp:Parameter Name="UserID" Type="Int32" /> 
            <asp:Parameter Name="RoomID" Type="Int32" /> 
            <asp:Parameter Name="RecurrenceRule" Type="String" /> 
            <asp:Parameter Name="RecurrenceParentID" Type="Int32" /> 
            <asp:Parameter Name="Description" Type="String" /> 
            <asp:Parameter Name="Continent" Type="String" /> 
            <asp:Parameter Name="Country" Type="String" /> 
        </InsertParameters> 
    </asp:SqlDataSource>    

7. In Default.aspx make sure that the script reference is pointing to the correct location of the AdvancedForm.js file:
<asp:ScriptManager ID="ScriptManager1" runat="server">  
        <Scripts> 
            <asp:ScriptReference Path="~/CS/AdvancedForm.js" /> 
        </Scripts> 
    </asp:ScriptManager> 

Attached is a working demo for reference.

Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.