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

ComboBox MultiColumn with checkBox problem

4 Answers 201 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
MathieuB
Top achievements
Rank 1
MathieuB asked on 25 Jun 2015, 03:34 PM

Hi,
    First i'm sorry for my bad english, I'm not really good. But I will try to explain my problem for you can understand.

 

In the project, we have a RadComboBox who get data by a ItemRequest. This comboBox serve for select a Person who are view in DataList

<telerik:RadComboBox ID="radPersonCombo" runat="server" Width="400" DropDownWidth="700" Height="300" AccessibilityMode="true" AutoPostBack="false" EnableScreenBoundaryDetection="true" EnableVirtualScrolling="true" ItemsPerRequest="10" ShowMoreResultsBox="true" EnableLoadOnDemand="true" OnItemsRequested="radPersonCombo_ItemsRequested" CheckBoxes="true" CheckedItemsTexts="FitInInput">
    <HeaderTemplate>
         <table style="width: 682px" cellspacing="0">
         <tr>
            <th style="width: 32px"></th>
            <th style="width: 125px"><asp:label ID="radTitleLN" runat="server"><%= LocalizationTools.RM.GetString("lblName") %></asp:label></th>
             {...}
         </tr>
         </table>
    </HeaderTemplate>
    <ItemTemplate>
         <table style="width: 682px" cellspacing="0">
         <tr>
            <td  style="width: 32px"></td>
            <td style="width: 125px"><%# DataBinder.Eval(Container, "Attributes['LastName']")%></td>
            {...}
         </tr>
         </table>
    </ItemTemplate>
</telerik:RadComboBox>

 

 <asp:datalist id="dtlPerson" runat="server"> {...} </asp:datalist>

 That comboBox can have more 1000 DataItem. For this  reason  we use EnableLoadOnDemand, but the EnabledLoadOnDemand don't preserve item server-side.

 When I check the elements and I close the ComboBox. If AutoPostBack option is True.

I get the error:

Index was out of range. It must not be negative and must be less than the size of the collection.
Parameter name: index

 

I tried using the following example. However, this example remains the client side. And when I try to spent AjaxRequest to call the Fill methods that data DataList. Nothing displays.

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultvb.aspx

 

Otherwise these is possible to align the check box in the center of the element? Since it is not included in my Template. (See Image CheckBoxMiddleAlign)

 

The desired final result should be like the image finalResult attached.

4 Answers, 1 is accepted

Sort by
0
Peter Filipov
Telerik team
answered on 30 Jun 2015, 03:29 PM
Hello Mathieu,

The CheckBoxes in the RadComboBox do not support load on demand. To achieve that scenario you will need to load all items. Unfortunately this is by design we could not overcome that problem. 

Regards,
Peter Filipov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
MathieuB
Top achievements
Rank 1
answered on 30 Jun 2015, 03:52 PM

Hello Peter,

Yes, after many tries and many searching. I have manually add the checkBox in my ComboBox template.

<ItemTemplate>
   <table style="width: 650px" cellspacing="0">
       <tr>
           <td style="width: 32px">
               <asp:CheckBox ID="chk" runat="server" onclick="StopPropagation_Person(event)" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' />
           </td>
           {...}
       </tr>
   </table>
</ItemTemplate>

 

And I have add JS for add the value and text in the comboBox.

 

function StopPropagation_Person(e) {
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
 
    var combo = $find("<%= radPersonCombo.ClientID %>");
    var newText = "";
    var newValue = "";
    var items = combo.get_items();
    for (var i = 0; i < items.get_count() ; i++) {
                                                    var item = items.getItem(i);
                                                    var checkbox = item.get_element().getElementsByTagName("input")[0];
                                                    if (checkbox.checked) {
                                                        newText += item.get_text() + ",";
                                                        newValue += item.get_value() + ",";
                                                    }
    }
 
    combo.set_text(removeLastComma(newText));
    combo.set_value(removeLastComma(newValue));
}
 
function removeLastComma(str) {
    return str.replace(/,$/, "");
}
 
function SelectedIndexChanging_Person(sender, args) {
    // On coche l'item actuel
    var CurrentItem = args.get_item();
    var CurrentCheckbox = CurrentItem.get_element().getElementsByTagName("input")[0];
    CurrentCheckbox.checked = true;
                     
    // On parcours avec le reste pour FILL
    StopPropagation_Person(sender);
    args.set_cancel(true);
}

 

But now, I search how to do for when I click on my item, the checkBox will be selected and the DropDown stay open.

I want that the dropdown closes only when I click at outside the dropdown content.

 

 Thank you for you help and Good day

 

0
Accepted
Peter Filipov
Telerik team
answered on 02 Jul 2015, 08:49 AM
Hi Mathieu,

In case that you are using OnItemChecked event this triggers postback on every check. To overcome that behavior you could remove the handler and leave only the AutoPostBack property. Another solution is to handle the client event when the dropdown is closed and trigger a postback manually. 

Regards,
Peter Filipov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
MathieuB
Top achievements
Rank 1
answered on 02 Jul 2015, 11:29 AM

Hi Peter,

               Thank you so much, with OnClosing event I'm success to keep open while I want.

 

I only use a JS boolean variable on checkBox click event and all it's perfect.

 

Thank you for your help

Good day to you.

Tags
ComboBox
Asked by
MathieuB
Top achievements
Rank 1
Answers by
Peter Filipov
Telerik team
MathieuB
Top achievements
Rank 1
Share this question
or