Databound RadComboBox and custom list items?

[Juan]

Hey Peeps,

I have a question about the RadComboBox. I'm busy working on a page where we have multiple RadComboBoxes with Checkboxes as its template (we're using Telerik ASP.NET Q1 2009 controls). The combobox is databound using the asp:SqlDataSource component. The reason for this is that I am unable to programmatically load the data as it depends on the selection of the user. Once the user has made his/her selection, I programmatically build up the SQL query and set the SqlDataSource's SelectCommand equal to the new generated query. We also need to have a 'Select All' option at the top of the combobox. I'm adding the item in the code-behind like so:

cboCategories.Items.Clear();
cboCategories.Items.Add(new RadComboBoxItem("Select All", "-2"));
cboCategories.DataBind();

When I open the drop down list, the first entry is there but is not showing the text value (see screenshot).

The aspx code looks like:

<telerik:RadComboBox ID="cboCategories" runat="server" Skin="Hay" EmptyMessage="Select" AutoPostBack="true" AppendDataBoundItems="true" AllowCustomText="true" Enabled="false" DataSourceID="sqlCategories" DataValueField="sigma$ID" DataTextField="category$Name" HighlightTemplatedItems="true" OnClientDropDownClosing="OnClientDropDownClosingHandler" OnClientDropDownClosed="onDropDownClosing" Width="324px">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)">
                                <asp:CheckBox ID="chkCategories" runat="server" onclick="onCheckBoxClick('ctl00_ContentPlaceHolderMain_cboCategories',this,'chkCategories')" />
                                <asp:Label ID="Label1" runat="server" AssociatedControlID="chkCategories">
                                    <%# Container.DataItem != null ? DataBinder.Eval(Container.DataItem, "category$Name") : DataBinder.Eval(Container, "Text") %>
                                </asp:Label>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                    <asp:SqlDataSource ID="sqlCategories" runat="server" ConnectionString="<%$ ConnectionStrings:SparSQLConnectionString %>" SelectCommand=""></asp:SqlDataSource>

I have also tried adding the item in the aspx file using:

<Items>
    <telerik:RadComboBoxItem Text="Select All" Value="-2" />
</Items>

But using the aspx method, the item is not even shown. It only shows when it's added in the code behind BUT the text property displays blank. Any ideas?

[Nencho]

Hello Juan,

In order to achieve the desired functionality, you could invoke the DataBind() method on the newly added RadComboBoxItem in a following manner :

cboCategories.Items.Clear();
cboCategories.DataBind();
cboCategories.Items.Add(new RadComboBoxItem("Select All", "-2"));
cboCategories.Items[0].DataBind();

In addition, I would like to inform you that in the newer versions of the RadComboBox control, we have implemented a built-in checkbox feature along with the property AllowCheckAllItemsCheckBox, which is perfectly suitable for your scenario. 

Kind regards,
Nencho
the Telerik team

[Juan]

Hey Nencho,

Thank you for the reply. I did try your recommendation but it didn't work as planned. I upgraded the project to Telerik 2012 Q1 (for .NET 3.5) and the RadComboBox is working like a charm! HOWEVER, I have noticed that the RadComboBox doesn't postback once it is closed. Only when the focus is moved to another object/control (such as pressing Enter in the RadComboBox or clicking on another control or even on any other place on the page) the control posts back. How can I get around this? I need the combobox to postback as soon as its closed.

Also, another thing I would like to enquire is that all three my RadComboBoxes are ajaxified. Each combobox is populated dynamically based on the previous selection. With this I have added them to my RadAjaxManager and assigned a loading panel:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" BackgroundPosition="Center">
        <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/ajax-loader.gif" />
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="cboStore">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboCategories" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="cboSubCategories" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="cboProducts" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="hfActiveStoreID" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboCategories">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboSubCategories" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="cboProducts" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboSubCategories">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboProducts" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnFilter">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panelCollective" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="GridHistory" />
                    <telerik:AjaxUpdatedControl ControlID="sqlHistory" />
                    <telerik:AjaxUpdatedControl ControlID="panelIndividual" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnClearFilters">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboCategories" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="cboSubCategories" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="cboProducts" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="panelCollective" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="panelIndividual" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="GridHistory" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="GridHistory">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="GridHistory" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="panelCollective" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="panelIndividual" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="GridIndividual">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="GridIndividual" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnReturnToList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panelCollective" LoadingPanelID="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="panelIndividual" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

When the page is rendered, the ajax call is good but it's not showing the loading panel. Instead, the control remains disabled (which I've set), loads the data (no loading panel present) and then enables the control. Why is the loading panel not shown? Could it be because of the postback not firing immediately after closing the drop down list?

The control:

<telerik:RadComboBox ID="cboCategories" runat="server" EmptyMessage="Select" AutoPostBack="true" OnSelectedIndexChanged="cboCategories_SelectedIndexChanged" AllowCustomText="true" Enabled="false" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" DataSourceID="sqlCategories" DataValueField="sigma$ID" DataTextField="category$Name" Width="324px"></telerik:RadComboBox>
<asp:SqlDataSource ID="sqlCategories" runat="server" ConnectionString="<%$ ConnectionStrings:SparSQLConnectionString %>" SelectCommand=""></asp:SqlDataSource>

It may be worth noting that I have set the 'AllowCustomText' to 'True' and 'False' yet the same problem persists. Is there a workaround for this or maybe even a way that I can remove focus from that control in order to fire the postback event? 

Thank you once again for your time and effort. It is greatly appreciated.

[Nencho]

Hello Juan,

As for your first question - a PostBack is fired only when the Blur event occurs, which behavior is by design.
As for you second question, if the request returns shortly after the initial delay time has passed, the behavior could be the page to show and hide the Loading Panel very quickly. In order to resolve this issue, you could use the MinDisplayTime property, which specifies the minimum time in milliseconds that the Loading Panel will last.


Kind regards,
Nencho
the Telerik team