This is a migrated thread and some comments may be shown as answers.

Ajaxify ComboBox multiselect

13 Answers 105 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 22 Oct 2008, 02:14 PM
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>   


13 Answers, 1 is accepted

Sort by
0
Rosi
Telerik team
answered on 23 Oct 2008, 10:01 AM
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.
0
David
Top achievements
Rank 1
answered on 28 Oct 2008, 08:16 AM
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.

0
Rosi
Telerik team
answered on 28 Oct 2008, 09:08 AM
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.
0
David
Top achievements
Rank 1
answered on 28 Oct 2008, 09:41 AM
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.
0
Rosi
Telerik team
answered on 28 Oct 2008, 11:17 AM
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.
0
David
Top achievements
Rank 1
answered on 28 Oct 2008, 01:35 PM
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.


0
Rosi
Telerik team
answered on 28 Oct 2008, 03:04 PM
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.
0
David
Top achievements
Rank 1
answered on 03 Nov 2008, 09:22 AM
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>   

0
Rosi
Telerik team
answered on 03 Nov 2008, 11:44 AM
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.
0
David
Top achievements
Rank 1
answered on 03 Nov 2008, 12:54 PM
OK, i have created a New Support Ticket N° 171472

Could you help me quickly please?
0
Rosi
Telerik team
answered on 03 Nov 2008, 03:02 PM
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.
0
Vince
Top achievements
Rank 1
answered on 03 Nov 2008, 03:15 PM
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.

0
Rosi
Telerik team
answered on 03 Nov 2008, 03:47 PM
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.
Tags
ComboBox
Asked by
David
Top achievements
Rank 1
Answers by
Rosi
Telerik team
David
Top achievements
Rank 1
Vince
Top achievements
Rank 1
Share this question
or