Can you do related comboboxes in inline templates?

2 posts, 0 answers
  1. Brenda Rueb
    Brenda Rueb avatar
    12 posts
    Member since:
    Jul 2008

    Posted 16 Apr 2012 Link to this post

    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
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 19 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top