Can you do related comboboxes in inline templates?

[Brenda Rueb]

Been checking the different demos out there, especially in the combobox area, but not having any luck with getting project to build when I put the comboboxes in the inline template and try to load data for the dependent combo. It was working with the combos in the InlineInsertTemplate before I tried to filter them. I'm thinking it's because the controls don't really exist within the template to the code behind environment, or the complier until after the telerik stuff is built. So, also getting errors on the clientid references in the javascript section. Scenario is location for an event, they need to pick the site, then the buildings that are available at that site. Similar to the continent, country scenario.
here's the javascript client side, adapted from demo, with additional function from a forum posting:

<script type="text/javascript">
   //Put your JavaScript code here.
   // global variables for connected comboboxes
   var bldgCombo;
   function pageLoad() {
      bldgCombo = $find("<%= RcbBldg.ClientID %>"); //errors on this line
   }
   function loadBldg(sender, eventArgs) {
      var item = eventArgs.get_item();
      bldgCombo.set_text("Loading...");
      // if a site is selected
      if (item.get_index() > 0) {
         bldgCombo.requestItems(item.get_value(), false);
      }
      else {
         bldgCombo.set_text(" ");
         bldgCombo.clearItems();
      }
   }
   function onBldgRequesting(sender, eventArgs) {
      var cboSite = $find("<%= RcbSite.ClientID%>"); //errors on this line
      eventArgs.get_context()["SiteVal"] = cboSite.get_value();
   }
   function ItemsLoaded(sender, eventArgs) {
      if (sender.get_items().get_count() > 0) {
         // pre-select the first item
         sender.set_text(sender.get_items().getItem(0).get_text());
         sender.get_items().getItem(0).highlight();
      }
      sender.showDropDown();
   }
</script>

This is the aspx code:

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
      <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID="RadScheduler1">
            <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
            </UpdatedControls>
         </telerik:AjaxSetting>
      </AjaxSettings>
   </telerik:RadAjaxManager>
   <div>
      <telerik:RadScheduler ID="RadScheduler1" runat="server" DataDescriptionField="EventDescription"
         DataEndField="EventEnd" DataKeyField="EventId" DataRecurrenceField="EventRecurRule"
         DataRecurrenceParentKeyField="EventRecurParentId" DataSourceID="SqlDataSourceEvents"
         DataStartField="EventStart" DataSubjectField="EventSubject" EnableDescriptionField="True"
         Height="650px" Width="900px" WorkDayStartTime="07:30:00" DayStartTime="07:00:00"
         SelectedView="MonthView" CustomAttributeNames="ModifiedBy,LastUpdated,EventRoomLoc"
         Style="margin-bottom: 2" EnableCustomAttributeEditing="True">
         <AdvancedForm EnableCustomAttributeEditing="True" />
         <ResourceTypes>
            <telerik:ResourceType DataSourceID="SqlDataSourceEventCategories" ForeignKeyField="EventCategory"
               KeyField="EvntCatId" Name="Category" TextField="EvntCategoryName" />
            <telerik:ResourceType DataSourceID="SqlDataSourcePOCList" ForeignKeyField="EventPOC"
               KeyField="UserGuid" Name="POC" TextField="UserNameDisplay" />
            <telerik:ResourceType DataSourceID="SqlDataSourceSiteList" ForeignKeyField="EventSiteLoc"
               KeyField="Site_PK" Name="Site" TextField="FullSiteName" />
            <telerik:ResourceType DataSourceID="SqlDataSourceBldgList" ForeignKeyField="EventBldgLoc"
               KeyField="Bldg_PK" Name="Building" TextField="BldgDesc" />
         </ResourceTypes>
         <MultiDayView DayStartTime="07:00:00" />
         <AppointmentTemplate>
            <div class="rsAptSubject">
               <%# Eval("Subject") %>
            </div>
            <%# If(Container.Appointment.Resources.GetResourceByType("POC") Is Nothing, _
           "", "POC: " & Container.Appointment.Resources.GetResourceByType("POC").Text & "<br /> ")%>
            <%# If(Container.Appointment.Resources.GetResourceByType("Site") Is Nothing, "", _
         "Site: " & Container.Appointment.Resources.GetResourceByType("Site").Text & _
         If(Container.Appointment.Resources.GetResourceByType("Building").Text Is Nothing, "", _
           " Bldg: " & Container.Appointment.Resources.GetResourceByType("Building").Text) & _
        " Room: " & Container.Appointment.Attributes("EventRoomLoc"))%>
         </AppointmentTemplate>
         <InlineInsertTemplate>
            <asp:TextBox ID="SubjectTextBox" runat="server" Text='<%# Bind("Subject") %>' Width="80%"></asp:TextBox>
            <div class="ResourceToolbox">
               Category:
               <telerik:RadComboBox ID="RcbCategory" runat="server" DataSourceID="SqlDataSourceEventCategories"
                  DataTextField="EvntCategoryName" DataValueField="EvntCatId" SelectedValue='<%# Bind("EventCategory") %>'>
               </telerik:RadComboBox>
                Site:
               <telerik:RadComboBox ID="RcbSite" runat="server" DataSourceID="SqlDataSourceSiteList"
                  DataTextField="FullSiteName" DataValueField="Site_PK" SelectedValue='<%# Bind("EventSiteLoc") %>'
                  OnClientSelectedIndexChanging="loadBldg" MarkFirstMatch="True">
               </telerik:RadComboBox>
                Bldg:
<telerik:RadComboBox ID="RcbBldg" runat="server" DataSourceID="SqlDataSourceBldgList"
                  DataTextField="BldgDesc" DataValueField="Bldg_PK" SelectedValue='<%# Bind("EventBldgLoc") %>'
                  MarkFirstMatch="True" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="RcbBldg_ItemsRequested"
                  >
               </telerik:RadComboBox>
               <asp:Button ID="btnInsert" runat="server" Text="Insert" CommandName="Insert" /><asp:Button
                  ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" />
            </div>
         </InlineInsertTemplate>
      </telerik:RadScheduler>
   </div>
<!-- sql data sources declared here, then end of form -->

And this is the code behind in VB

Protected Sub LoadBldgs(ByVal siteID As String)
   Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("ERMasterConnectionString").ConnectionString)
   ' Select a country based on the continentID.
   Dim adapter As New SqlDataAdapter("SELECT [Bldg_PK], [BldgNbr], [Description], [Site_PK], [BldgNbr]+'-'+[Description] As BldgDesc " & _
                                     "FROM [Building]  WHERE Site_PK=@siteID ORDER By BldgNbr", connection)
   Adapter.SelectCommand.Parameters.AddWithValue("@siteID", siteID)
   Dim dt As New DataTable()
   Adapter.Fill(dt)
   'RcbBldg.DataTextField = "BldgDesc" 'set from initial declaration
   'RcbBldg.DataValueField = "Bldg_PK"
   RcbBldg.DataSource = dt 'does not find this control to allow build
   RcbBldg.DataBind()
End Sub
Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
End Sub
Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
   If (Not IsPostBack) Then
  ' set up other stuff that not combo related
   ' should not have to do anything with site combo, as pulled from control settings.
   ElseIf Not Page.IsCallback Then
      LoadBldgs(RcbSite.SelectedValue) ' does not find this combo
      strUserGuid = hfUserGuid.Value
   Else
      strUserGuid = hfUserGuid.Value
   End If
End Sub

I'm hoping to continue to use the inline templates, but expect the answer I'm going to get is the advanced form...
Brenda

[Ivana]

Hello Brenda,

Yes, you can customize the inline insert/edit forms of RadScheduler just like the advanced edit/insert forms.
The following code shows how to customize the inline insert form so it contains load on demand RadComboBoxes:

var countriesCombo;
var citiesCombo;

function pageLoad() {
    countriesCombo = $find("RadScheduler1_Form_RadComboBox2");
}

function LoadCountries(sender, eventArgs) {
    var item = eventArgs.get_item();
    countriesCombo.set_text("Loading...");
    if (item.get_index() >= 0) {
        countriesCombo.requestItems(item.get_text(), false);
    }
    else {
        countriesCombo.set_text(" ");
        countriesCombo.clearItems();
    }
}

function ItemsLoaded(sender, eventArgs) {
    if (sender.get_items().get_count() > 0) {
        sender.set_text(sender.get_items().getItem(0).get_text());
        sender.get_items().getItem(0).highlight();
    }
    sender.showDropDown();
}

<telerik:RadScheduler ID="RadScheduler1" runat="server">
    <InlineInsertTemplate>
        <asp:LinkButton ID="InsertButton" runat="server" CommandName="Insert">
            <asp:Image runat="server" ID="insertImage" ImageUrl="images/ok.png" AlternateText="insert" />
        </asp:LinkButton>
        <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel">
            <asp:Image runat="server" ID="Image2" ImageUrl="images/cancel.png" AlternateText="cancel" />
        </asp:LinkButton>
        <telerik:RadComboBox runat="server" ID="RadComboBox1" OnClientSelectedIndexChanged="LoadCountries" EmptyMessage="Select Continent">
            <Items>
                <telerik:RadComboBoxItem Text="America"/>
                <telerik:RadComboBoxItem Text="Asia" />
                <telerik:RadComboBoxItem Text="Europe" />
            </Items>
        </telerik:RadComboBox>
        <telerik:RadComboBox runat="server" ID="RadComboBox2"  OnClientItemsRequested="ItemsLoaded"
            OnItemsRequested="RadComboBox2_ItemsRequested">
        </telerik:RadComboBox>
    </InlineInsertTemplate>
</telerik:RadScheduler>

Protected Sub RadComboBox2_ItemsRequested(sender As Object, e As RadComboBoxItemsRequestedEventArgs)
    Dim combo As RadComboBox = TryCast(sender, RadComboBox)
    If e.Text = "America" Then
        combo.Items.Add(New RadComboBoxItem("America"))
    ElseIf e.Text = "Asia" Then
        combo.Items.Add(New RadComboBoxItem("Asia"))
    Else
        combo.Items.Add(New RadComboBoxItem("Europe"))
    End If
End Sub

You could take advantage of the following demo which shows how to style the appearance of the inline templates: http://demos.telerik.com/aspnet-ajax/scheduler/examples/templates/defaultcs.aspx as well as the online demo which demonstrates the related RadComboBoxes scenario: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx.

All the best,
Ivana
the Telerik team