ComboBox MultiColumn with checkBox problem

5 posts, 1 answers
  1. Mathieu
    Mathieu avatar
    12 posts
    Member since:
    May 2013

    Posted 25 Jun 2015 Link to this post

    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.

  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 30 Jun 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mathieu
    Mathieu avatar
    12 posts
    Member since:
    May 2013

    Posted 30 Jun 2015 Link to this post

    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

     

  5. Answer
    Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 02 Jul 2015 Link to this post

    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
  6. Mathieu
    Mathieu avatar
    12 posts
    Member since:
    May 2013

    Posted 02 Jul 2015 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017