Working with Telerik RadScheduler for ASPX - binding to child controls

[David]

This Telerik aspx-ajax RadScheduler is driving me nuts. Normally i prefer Telerik Web UI to DevExpress anything, but I'm banging my head against a wall here and not getting anywhere.I have two interdependent selections to make when adding an appointment on the scheduler. I need to select a doctor, and I need to select a patient (patients filtered by the selected doctor). The rest is your standard date and time and subject gumpf.For this I'm using the <AdvancedInsertTemplate> and <AdvancedUpdateTemplate> elements of the scheduler:

<AdvancedInsertTemplate>
   <div class="rsAdvancedEdit rsAdvancedModal" style="position: relative; height: 300px;">
       <div class="rsModalBgTopLeft">
       </div>
       <div class="rsModalBgTopRight">
       </div>
       <div class="rsModalBgBottomLeft">
       </div>
       <div class="rsModalBgBottomRight">
       </div>
       <div class="rsAdvTitle">
           <h1 class="rsAdvInnerTitle">
               <%# Container.Appointment.Owner.Localization.AdvancedEditAppointment %></h1>
           <asp:LinkButton runat="server" ID="LinkButton1" CssClass="rsAdvEditClose"
               CommandName="Cancel" CausesValidation="false" ToolTip='<%# Container.Appointment.Owner.Localization.AdvancedClose %>'>
               <%# Container.Appointment.Owner.Localization.AdvancedClose%>
           </asp:LinkButton>
       </div>
       <div class="rsAdvContentWrapper">
           <div class="form-horizontal">
               <div class="form-group">
                   <label class="col-md-2 control-label">Subject</label>
                   <div class="col-md-10">
                       <asp:TextBox runat="server" ID="AppointmentSubject" CssClass="col-md-10 form-control" />
                   </div>
               </div>
               <div class="form-group">
                   <label class="col-md-2 control-label">Start time:</label>
                   <div class="col-md-10">
                       <telerik:RadDateTimePicker RenderMode="Lightweight" ID="StartTime" SelectedDate='<%# DateTime.Now.Date %>' runat="server"
                           EnableSingleInputRendering="false" />
                   </div>
               </div>
               <div class="form-group">
                   <label class="col-md-2 control-label">Doctor:</label>
                   <div class="col-md-10">
                       <asp:DropDownList runat="server" ID="DoctorsList"
                           CssClass="form-control" />
                   </div>
               </div>
               <div class="form-group">
                   <label class="col-md-2 control-label">Patient Name:</label>
                   <div class="col-md-10">
                       <asp:DropDownList runat="server" ID="PatientsList"
                           CssClass="form-control" />
                    </div>
               </div>
           </div>
           <asp:Panel runat="server" ID="Panel1" CssClass="rsAdvancedSubmitArea">
               <div class="rsAdvButtonWrapper">
                   <asp:LinkButton CommandName="Insert" runat="server" ID="LinkButton2" CssClass="rsAdvEditSave">
                       <span><%# Container.Appointment.Owner.Localization.Save%></span>
                   </asp:LinkButton>
                   <asp:LinkButton runat="server" ID="LinkButton3" CssClass="rsAdvEditCancel" CommandName="Cancel"
                       CausesValidation="false">
                       <span><%# Container.Appointment.Owner.Localization.Cancel%></span>
                   </asp:LinkButton>
               </div>
           </asp:Panel>
       </div>
   </div>
</AdvancedInsertTemplate>

Now in all cases, I would prefer a telerik RadComboBox in place of the DropDownList for the Patients selection as I can allow the user to type the patient's name and get an item back, but the damn thing won't bind.If I use the RadComboBox here, the markup errors while creating the form saying that there is no data source for the list.Here's my binding code:

protected void RadScheduler_FormCreated(object sender, SchedulerFormCreatedEventArgs e)
{
	if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)
	{
		var doctorsDropdown = e.Container.FindControl("DoctorsList") as DropDownList;
		_doctorsList = doctorsDropdown;
		var patientsDropdown = e.Container.FindControl("PatientsList") as DropDownList;
		_patientsList = patientsDropdown;
		DoInitialBindings(doctorsDropdown, patientsDropdown);
		e.Appointment.End = e.Appointment.Start.AddHours(1);
	}
}
private void DoInitialBindings(DropDownList doctorsList, DropDownList patientsList)
{
   var doctorHelper = new DoctorsHelper();
   var doctorItems = new List<DoctorsViewModel>();
   var patientHelper = new PatientsHelper();
   var patientItems = new List<PatientsViewModel>();
   // Gets all the doctors and patients relevant to the Medical Practice
   // where the user is a receptionist.
   if (Roles.IsUserInRole(nameof(UserRole.Receptionist)))
   {
       int.TryParse(Request.Cookies["lcyduh"]["practice"], out int practiceId);
       doctorItems = doctorHelper.ListItemsForParent(practiceId);
       foreach (var doctor in doctorItems)
       {
           patientItems.Add(patientHelper.ListItemsForDoctor(doctor.Id));
       }
   }
   doctorsList.DataSource = doctorItems;
   doctorsList.DataTextField = "Name";
   doctorsList.DataValueField = "Id";
   doctorsList.DataBind();
   patientsList.DataSource = patientItems;
   patientsList.DataTextField = "Firstname"; // Firstname and Lastname fields are concatenated into the Firstname field by the helper function that retrieves the data.
   patientsList.DataValueField = "Id";
   patientsList.DataBind();
}

This works but its just a little bit blegh in terms of user friendly.Any ideas how I can bind this to a RadComboBox?

[Attila Antal]

Hi David,

To use ComboBoxes, first you need to replace the asp:DropDownList with telerik:RadComboBox and set their Filter property to "Contains".

 <%--<asp:DropDownList runat="server" ID="DoctorsList" CssClass="form-control" />--%>
 <telerik:RadComboBox runat="server" ID="DoctorsList" Filter="Contains" CssClass="form-control" />

<%--<asp:DropDownList runat="server" ID="PatientsList" CssClass="form-control" />--%>
<telerik:RadComboBox runat="server" ID="PatientsList" Filter="Contains" CssClass="form-control" />

 

Second, make sure you adjust the backend code to access the ComboBox controls instead of DropDownList.

protected void RadScheduler_FormCreated(object sender, SchedulerFormCreatedEventArgs e)
{
    if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)
    {
        e.Appointment.End = e.Appointment.Start.AddHours(1);

        //var doctorsDropdown = e.Container.FindControl("DoctorsList") as DropDownList;
        var doctorsDropdown = e.Container.FindControl("DoctorsList") as RadComboBox;

        //var patientsDropdown = e.Container.FindControl("PatientsList") as DropDownList;
        var patientsDropdown = e.Container.FindControl("PatientsList") as RadComboBox;

 

Third, change the DoInitialBindings() method, to take the ResourceCollection as an additional argument.

private void DoInitialBindings(RadComboBox doctorsList, RadComboBox patientsList, ResourceCollection resources)

 

Last, but not least, immediately after binding data to the ComboBoxes, select the items that correspond with the Appointment's Resources.

private void DoInitialBindings(RadComboBox doctorsList, RadComboBox patientsList, ResourceCollection resources)
{
    doctorsList.DataSource = GetDoctors();
    doctorsList.DataTextField = "Name";
    doctorsList.DataValueField = "Id";
    doctorsList.DataBind();

    Resource doctorResource = resources.Where(res => res.Type == "Doctor").FirstOrDefault();
        
    if(doctorResource != null)
    {
        RadComboBoxItem doctorToFind = doctorsList.FindItemByValue(doctorResource.Key.ToString());

        if(doctorToFind != null)
        {
            doctorToFind.Selected = true;
        }
    }

    patientsList.DataSource = GetPatients();
    patientsList.DataTextField = "Firstname"; // Firstname and Lastname fields are concatenated into the Firstname field by the helper function that retrieves the data.
    patientsList.DataValueField = "Id";
    patientsList.DataBind();

    Resource patientResource = resources.Where(res => res.Type == "Patient").FirstOrDefault();

    if (patientResource != null)
    {
        RadComboBoxItem patientToFind = patientsList.FindItemByValue(patientResource.Key.ToString());

        if (patientToFind != null)
        {
            patientToFind.Selected = true;
        }
    }
}

You should now have ComboBoxes with the Filter function enabled and bound to the Appointment's Resources.

Is this what you are looking for?

Regards,
Attila Antal
Progress Telerik