Ajaxify ComboBox multiselect

[David]

Hi,
I have a strange behavior when i try to ajaxify my Combox Multi-selection.
My comboBox contains an itemTemplate tag. This item Template tag contains a list of asp:textbox tag.
When i click on a checkbox of JMRadComboPersonGroupList radComboBox, i want to update an other RadComboBox (JMRadComboMonitoringList) MultiSelection (with asp:checkbox too).

When i execute my code, for the first click on checkbox, an ajax callback is sending (good!!!), when i click on other checkBox of this list, It's a global refresh of the page which is running (bad!!!!). An other click, and It's an ajax callback, on other click and it's a global refresh of the page.....
Half the time, it's a global refresh that are running.

here the code:

...
<span>
    <telerik:RadComboBox ID="JMRadComboPersonGroupList" runat="server" AutoPostBack="true" ><%-- AutoPostBack="false" OnSelectedIndexChanged="JMRadComboPersonGroupList_SelectedIndexChanged" --%>
                    <ItemTemplate>
                        <asp:CheckBox runat="server" ID="CBPersonGroupList"  OnCheckedChanged="CBPersonGroupList_OnCheckedChanged" onclick="stopPropagation(event);" AutoPostBack="true" /> <%# DataBinder.Eval(Container, "Text") %>
                    </ItemTemplate>
     </telerik:RadComboBox>
</span>
...
<span>
                    <telerik:RadComboBox ID="JMRadComboMonitoringList" runat="server" AutoPostBack="true">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="CBMonitoringList" onclick="stopPropagation(event);" Text=""/> <%# DataBinder.Eval(Container, "Text") %>
                        </ItemTemplate>
                    </telerik:RadComboBox>
</span>
.....
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
     <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="JMRBChooseList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="JMRadComboPersonGroupList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="JMRadComboPersonGroupList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="CBPersonGroupList" />
                    <telerik:AjaxUpdatedControl ControlID="JMRadComboPersonGroupList" />
                    <telerik:AjaxUpdatedControl ControlID="JMRadComboMonitoringList" />
                    <telerik:AjaxUpdatedControl ControlID="CBMonitoringList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>
...

<telerik:RadComboBox ID="id_rcb" runat="server" AutoPostBack="true" >
    <ItemTemplate>
       <asp:CheckBox runat="server" ID="CB"   OnCheckedChanged="CBPersonGroupList_OnCheckedChanged" onclick="stopPropagation(event);" AutoPostBack="true" /> <%# DataBinder.Eval(Container, "Text") %>
                    </ItemTemplate>
                </telerik:RadComboBox>   

[Rosi]

Hello David,

Please read our help article - Ajaxified control in ItemTemplate does a full postback

It describes the problem and the solution.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Hi,

In your exemple, Item Template Tag contains Telerik Componement (radCalendar) which use 

ClientEvents-OnDateSelecting='OnDateSelecting
ClientEvents-OnDateClick='OnDateClick' Attributes.

In my web page, i use asp:TexBox componement.
So i don't know which attribute to simulate your 'ClientEvents...' attributes.

Thanks for your help.

[Rosi]

Hi David,

I suggest you hook on the onchange client side event of the textbox.

All the best,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

that doesn't work.

the following asp:texbox

<asp:CheckBox runat="server" ID="CBPersonGroupList"
OnChange="OnTextBoxClicked()"
OnCheckedChanged="CBPersonGroupList_OnCheckedChanged"
AutoPostBack="true" />

generate the following HTML code:

 <span OnChange="javascript:OnTextBoxClicked()">
<input id="ctl00_CPH_WebSite_JMRadComboPersonGroupList_i0_CBPersonGroupList"
        type="checkbox"
        name="ctl00$CPH_WebSite$JMRadComboPersonGroupList$i0$CBPersonGroupList"
        checked="checked"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPH_WebSite$JMRadComboPersonGroupList$i0$CBPersonGroupList\',\'\')', 0)" />
</span>

And when i check/uncheck a textbox, onchange isn't fired.

[Rosi]

Hello David,

The control that you use is not an ASP TextBox control. It is an ASP CheckBox control. That is why the code does not work.

I suggest you use the onclick event in this case:

<asp:CheckBox runat="server" ID="CBPersonGroupList"
onclick="OnTextBoxClicked()"
OnCheckedChanged="CBPersonGroupList_OnCheckedChanged"
AutoPostBack="true" />

All the best,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

OK.

my OnTextBoxClicked javascript function seems fired on Onclick attribute.

But the two parameters "sender" and "args" doen't exist.
So the following javascript function doesn't work:

function OnTextBoxClicked(sender, args)

{

if(args.get_isSelecting())

{

var combo = $find("<%= JMRadComboPersonGroupList.ClientID %>");

combo.attachDropDown();

}

args.set_cancel(!args.get_isSelecting());

}

And next, i don't know when firing the stopPropagation javascript function.

[Rosi]

Hi David,

I suggest you modify the code by the following way:

function OnTextBoxClicked()
    {

            var combo = $find("<%= JMRadComboPersonGroupList.ClientID %>");
            combo.attachDropDown();

     }

Calling of attachDropDown(); method is all that you need in order resolve the issue.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

OK,

the onclick="OnCheckClicked()" are fired and work fine,

But the OnCheckedChanged are not fired!!!!

However, in my fiddler debbugger tools, An Ajax Callback is fired!!!!

<telerik:RadComboBox ID="JMRadComboPersonGroupList" runat="server" Width="250px" AutoPostBack="false"
  HighlightTemplatedItems="True" Sort="Ascending" >
  CollapseAnimation Duration="200" Type="OutQuint" />
  <ItemTemplate>
   <asp:CheckBox ID="CBPersonGroupList" runat="server" AutoPostBack="true"
          onclick="OnCheckBoxClicked()"
          OnCheckedChanged="CBPersonGroupList_OnCheckedChanged" />
    <%# DataBinder.Eval(Container, "Text") %>
  </ItemTemplate>
  <Items>
   <telerik:RadComboBoxItem runat="server" />
   </Items>
 </telerik:RadComboBox>

[Rosi]

Hello David,

I suggest you open a support ticket and send us sample running project to test it locally. This will help us to understand the problem better and provide you with more specific instructions.

All the best,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

OK, i have created a New Support Ticket N° 171472

Could you help me quickly please?

[Rosi]

Hello David,

The reason for the problem is that you execute every time the following code:

  <script type="text/javascript">
      var JMRBChooseElement = document.getElementById("JMDivChooseList");
      JMInputList = JMRBChooseElement.getElementsByTagName("input");
      JMInputList[0].checked = true;
    </script>

It fires the SelectedIndexChanged event of the radio button list every time after postback and this causes the problem.

I suggest you comment this line JMInputList[0].checked = true;  and try the project again.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Vince]

I remove the following code:

  <script type="text/javascript">
      var JMRBChooseElement = document.getElementById("JMDivChooseList");
      JMInputList = JMRBChooseElement.getElementsByTagName("input");
      JMInputList[0].checked = true;
    </script>

When i click first time on checkBox Compoment on "Pôle" ComboBox.
All Work fine.
But if i click on a second (and more) checkbox in the same ComboBox,
Event aren't fired.

[Rosi]

Hello Vince,

Please find the attached project which works as expected at our side.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.