Calendar as a ComboBox Template issues

[Gilberto]

Im creating an user control. In my control I need to create programmatically some Combo Boxes. In some cases, I need a Calendar as a Template in my comboBox but im facing two situations.

1. I cannot deselect dates in my calendar. Once I make a selection, calendar has always at least one selected date and if I click the selected day, this day remains selected.

As you can see in the 1.gif file attached, I can select dates normally but I try to deselect by clicking on 15th several times and I'm not able to. I can change the date selection (I moved to 12th) but is not possible to unselect.

2. When I clic Calendar header to choose years and mothes, the popup appears behind the combobox. See 2.gif

 

Javascript fucntions

function OnClientDropDownClosing(sender, args) {
        if (args.get_domEvent().target == sender.get_imageDomElement()) {
            args.set_cancel(false);
        }
        else {
            args.set_cancel(true);
        }
    }

    function OnClientDropDownClosed(sender, args) {
        var SenderId = sender.get_id().replace("FiltrosNativos_","");
        var CalId = SenderId.replace("RadComboBox", "RadCalendar");
        var Cal = sender.get_items().getItem(0).findControl(CalId);

        var dates = Cal.get_selectedDates();

        if (dates.length == 0) { sender.set_emptyMessage("Elija Fechas"); }
        else {
            var dt1 = dates[0];
            var dt2 = dates[dates.length - 1];
            var rango = dt1[2] + '/' + dt1[1] + '/' + dt1[0] + ' -- ' + dt2[2] + '/' + dt2[1] + '/' + dt2[0];
            sender.set_emptyMessage(rango);

        }

    }

 

 

 

 

VB

Private Sub CrearObjetos()

        Dim uPass As New UtilSecurity
        Dim sCnnStr As String = uPass.Desencrit(ConfigurationManager.AppSettings("CnnStringSE").Trim)
        Dim uDBA As New UtilBDAccess(sCnnStr)
        Tabla = New Table

        Tabla.ID = "TbFiltros"



        For Each row As DataRow In _dtFiltros.Rows
            Dim CBO As New RadComboBox

            Dim sLabel As String = row("Label").ToString.Trim
            Dim Label As New Label
            Dim Tr As New TableRow
            Dim TcLabel As New TableCell
            Dim TcObj As New TableCell

            Label.Text = sLabel & ":" & RepetirCadena(" ", 15 - sLabel.Length - 1)
            'Label.Text = sLabel & ":" & RepetirCadena(" ", 15 - sLabel.Length - 1)

            TcLabel.Controls.Add(Label)

            CBO.ID = "RadComboBox" & row("TargetCatField")
            CBO.Width = Unit.Pixel(IIf(_Width = 0, 500, _Width))
            CBO.RenderMode = RenderMode.Lightweight
            CBO.Skin = _Skin
            CBO.Label = ""



            If row("TargetType") = "DATE" Then
                CBO.EmptyMessage = "Elija Fechas"
                CBO.OnClientDropDownClosing = "OnClientDropDownClosing"
                CBO.OnClientDropDownClosed = "OnClientDropDownClosed"
                CBO.ItemTemplate = New CboTmplCalendar("RadCalendar" & row("TargetCatField"), _Skin)
                CBO.Items.Add(New RadComboBoxItem(""))

                CBO.DataBind()
            Else
                CBO.MarkFirstMatch = True
                CBO.EnableLoadOnDemand = True
                CBO.Filter = RadComboBoxFilter.Contains
                CBO.EmptyMessage = "Elija " & row("Label")
                uDBA.BindOnjectDB(CBO, row("Query"), row("DataTextField"), row("DataValueField"))
            End If


            TcObj.Controls.Add(CBO)
            Tr.Cells.Add(TcLabel)
            Tr.Cells.Add(TcObj)

            Tabla.Rows.Add(Tr)


        Next
        PHCbosFiltros.Controls.Add(Tabla)
    End Sub

Private Class CboTmplCalendar
        Implements ITemplate
        Protected MyCalendar As RadCalendar

        Private _ObjName As String
        Private _Skin As String
        Public Sub New(ByVal objName As String, Skin As String)
            _ObjName = objName
            _Skin = Skin
        End Sub
        Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements ITemplate.InstantiateIn

            MyCalendar = New RadCalendar()
            With MyCalendar

                .EnableViewState = True
                .ID = _ObjName
                .Skin = _Skin
                .RenderMode = RenderMode.Lightweight
                .AutoPostBack = False
                .RangeSelectionMode = Calendar.RangeSelectionMode.ConsecutiveClicks


            End With
            container.Controls.Add(MyCalendar)
        End Sub

    End Class

[Gilberto]

Update.
I solved the second problem by changing combo box z index to 4999.
CBO.ZIndex = 4999
I'm still trying to figure out why I cannot deselect dates. 

[Attila Antal]

Hi Gilberto,

It is very important that the controls are created using the correct events and data binding for RadGrid, see Creating a RadGrid Programmatically.

For a working example of creating controls programmatically, please check out the example I shared in the other Forum post at Programmatically Created Template Columns Have Contents Disappear On Detail Table Expand?

You can try this sample but add a DatePicker and see if the issue still persists. By default the DatePicker will allow you to select/deselect dates, if this is not happening now, something else on the page is conflicting. Please share the code you are working on now so that we can see the order and technique used to create the Grid and its child controls. That will allow us to have a better idea and we'll be able to advise you accordingly.

Kind regards,
Attila Antal
Progress Telerik

[Gilberto]

Hello. 

Im not working with a grid nor datepicker. If you see my code and my explanation Im using a comboBox with a calendar.

 

[Gilberto]

Here's a runnable app with the problem:

https://1drv.ms/u/s!AuKW8B6tCcRHgcg8-X0MmMgYCIK3Pw?e=QqzL7J

 

 

[Attila Antal]

Hi Gilberto,

Thank you for the sample project. I've made a few tests and I found the reason for the problem you have described.

1. I cannot deselect dates in my calendar. Once I make a selection, calendar has always at least one selected date and if I click the selected day, this day remains selected.

The reason for not being able to deselect a date is the RadngeSelection functionality of the DatePicker. You can disable that and then selection/deselection will start working again.

.RangeSelectionMode = Calendar.RangeSelectionMode.ConsecutiveClicks

Or you can make the RangeSelection only active when the Shift key is held

.RangeSelectionMode = Calendar.RangeSelectionMode.OnKeyHold

 

Kind regards,
Attila Antal
Progress Telerik

[Gilberto]

Great. That was the problem. Thank you very much!