Ajaxify Checkboxes in a Radcombobox

[Stafan Müller]

Hi,

I have a problem with ajaxifing 5 checkboxes in this RadComboBox.

<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server">
   <telerik:RadComboBox ID="RadComboBox2" Runat="server" AllowCustomText="True" EmptyMessage="Alle Lagen"
               DataSourceID="XmlDataSource1" DataTextField="Text" DataValueField="Value" Width="230px" >
               <ItemTemplate>
                           <div>
                               <asp:CheckBox runat="server" ID="chk1" Checked="false" onclick="onCheckBoxClick(this)"
                                   AutoPostBack="True"
                                   oncheckedchanged="chk1_CheckedChanged" />
                               <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">
                                   <%# Eval("Text") %>
                               </asp:Label>
                           </div>
                       </ItemTemplate>
               <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
           </telerik:RadComboBox>
           <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/combobox.xml">
           </asp:XmlDataSource>
   </telerik:RadAjaxPanel>

This is the code behind to add the ajaxsettings to the RadAjaxManager:

Protected Sub RadComboBox2_DataBound(sender As Object, e As System.EventArgs) Handles RadComboBox2.DataBound

        For Each item As RadComboBoxItem In RadComboBox2.Items
            Dim chk As CheckBox = DirectCast(item.FindControl("chk1"), CheckBox)
            Dim text As Label = DirectCast(item.FindControl("Label1"), Label)
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(chk, GridView1, RadAjaxLoadingPanel1)

        Next

    End Sub

When I click one of the checkboxes, the loading panel is visible for a short time, but the gridview1 isn't updating.
When I click another checkbox, the request doesn't use ajax but loads the whole site. Also when I click another checkbox.
Only the first "click" is ajaxifyed, but the gridview1 is not affected. 

Here is the link to the ajaxifyed Page: http://pension.sundaymedia.info/einrichtungajax.aspx?Typ=Pension
And here the same page with no ajaxsettings added: http://pension.sundaymedia.info/Einrichtung.aspx?Typ=Pension

The left ComboBox is the Problem-Combo-Box

Best regards from Germany,
Stefan

[Andrey]

Hello,

The problem you are facing is mostly caused by the RadAjaxPanel you are using. When RadAjaxManager is used you should not use RadAjaxPanel to Ajaxify the same controls.

Try removing the RadAjaxPanel control and then add one additional setting to the RadAjaxManager control:

Protected Sub RadComboBox2_DataBound(sender As Object, e As System.EventArgs) Handles RadComboBox2.DataBound

       For Each item As RadComboBoxItem In RadComboBox2.Items
           Dim chk As CheckBox = DirectCast(item.FindControl("chk1"), CheckBox)
           Dim text As Label = DirectCast(item.FindControl("Label1"), Label)
           RadAjaxManager1.AjaxSettings.AddAjaxSetting(chk, GridView1, RadAjaxLoadingPanel1)
           Dim comboBox = CType(sender, RadComboBox)
           RadAjaxManager1.AjaxSettings.AddAjaxSetting(chk, comboBox, RadAjaxLoadingPanel1)

       Next

   End Sub

Then check whether the issue is resolved.
Greetings,
Andrey
the Telerik team

[Stafan Müller]

Hi Andrey,

thanks for answering!

I removed all RadAjaxPanels on the page, but the issue isn't resolved.

The first call is via Ajax but with no effect on Gridview1.
When I use the right ComboBox after this (RadCombobox1 for sorting), the grid view is affected.

The second call for RadCombobox2 (the Problem-Combobox) doesn't use an Ajax callback, it loads the whole site instead.

Would it help if I post the whole .aspx and aspx.vb content?

Greetings,
Stefan

[Andrey]

Hi,

The problem with your project is that the DataBound event of the RadComboBox is too late to add the Ajax settings for the RadAjaxManager control. Try moving the settings to the PageLoad event and thus you will succeed.

I have created sample project to illustrate this approach. Give the project a try and check what are the differences with your.

All the best,
Andrey
the Telerik team

[Stafan Müller]

Hi Andrey,

unfortunately there is no .aspx file in your sample project. (Screenshot 2012-03-02)

I tried to add the ajaxsettings on page load at first. But on the first load of the page, the combobox.item.count is 0. No ajaxsettings will be added. (combobox load.jpg)

After the first postback the items.count object of the combobox is 5 and the ajaxsettings are added correct. Then the AjaxManager works correct an the gridview is affected. (combobox load2.jpg)

After the second postback, items.count is 0 again, after the third it is 5 again and so on...

I uploaded the edited files, so you can see the behavior: http://pension.sundaymedia.info/Einrichtungajax.aspx?Typ=Pension

But I think we we move one step closer to the solution

[Andrey]

Hello,

Please, excuse me for the missing files. I have attached the project again with the missing files included. The better place to add the AjaxSettings is the ItemCreated event of RadComboBox. I have modified the project to illustrate this approach.

Give the project a try and check whether this is the desired behavior.

Kind regards,
Andrey
the Telerik team

[Stafan Müller]

Hi Andrey,

it works!!!

Thanks a lot...

One question is left: How can I prevent my combobox from closing after clicking a Checkbox?

Best regards,
Stefan

[Shinu]

Hello Stafan,

Attach the following client side code to close the dropdown only on clicking the Dropdown image.

Javascript:

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

Hope it helps.

Thanks,
Shinu.

[Stafan Müller]

Thanks Shinu, that's it!

Greez,
Stefan