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

Multi-select combo box with checkboxes

5 Answers 266 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 14 Jul 2010, 06:25 PM
I have a ComboBox with Templated Checkboxes( see code at end).
When I click on a checkbox, my text is updated correctly.
On page load, the text area includes the Text value of the first Item.
How can I get the Text to display correctly on page load?.

        <telerik:RadComboBox
            ID="rcbDocType" Runat="server"
            AutoPostBack="false"
            >
   <ItemTemplate>
    <div onclick="StopPropagation(event)" class="combo-item-template">
     <asp:CheckBox runat="server" ID="cbItem" Checked="false" onclick="onCheckBoxClick(this)" />
     <asp:Label runat="server" ID="lblItem" AssociatedControlID="cbItem">
     </asp:Label>
    </div>
   </ItemTemplate>
    </telerik:RadComboBox>

      function onCheckBoxClick(chk) {
          var combo = $find("<%= rcbDocType.ClientID %>");
          //holds the text of all checked items
          var text = "";
          //holds the values of all checked items
          var values = "";
          //get the collection of all items
          var items = combo.get_items();
          //enumerate all items
          for (var i = 0; i < items.get_count(); i++) {
              var item = items.getItem(i);
              //get the checkbox element of the current item
              var chk1 = $get(combo.get_id() + "_i" + i + "_cbItem");
              if (chk1.checked) {
                  if (text == "") {
                      text = item.get_text();
                  }
                  else {
                      text = "[Multi]";
                  }
                  values += item.get_value() + ",";
              }
          }
          //remove the last comma from the string
          values = removeLastComma(values);

          if (text.length > 0) {
              //set the text of the combobox
              combo.set_text(text);
          }
          else {
              //all checkboxes are unchecked
              //so reset the controls       
              combo.set_text("");
          }
      }

      //this method removes the ending comma from a string
      function removeLastComma(str) {
          return str.replace(/,$/, "");
      }

      function StopPropagation(e) {
          //cancel bubbling
          e.cancelBubble = true;
          if (e.stopPropagation) {
              e.stopPropagation();
          }
      }


5 Answers, 1 is accepted

Sort by
0
Simon
Telerik team
answered on 16 Jul 2010, 05:34 PM
Hello Ron Boehm,

Please also try setting the Text of the first Item on the client, e.g.
combo.get_items().getItem(0).set_text(text);

Since this Item is the only one it will be always selected, so after postback its Text will show in the input.

Sincerely yours,
Simon
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
Thomas
Top achievements
Rank 1
answered on 16 Jul 2010, 05:49 PM
I don't understand where that code should go...

If it sets the text in the first item, then that text will show when the down arrow is clicked.

The list contain more than one item...

I'm just confused by the response.


When I try to call onCheckBoxClick just as a function at the end of the code block, the code can not find my control...

0
Simon
Telerik team
answered on 16 Jul 2010, 06:05 PM
Hello Ron Boehm,

Please excuse me for misleading you - this approach would work if you are using a RadListBox for the CheckBox functionality as in this Code Library Project.

In your case you have more than one Item and the text of the selected one renders in the RadComboBox after postback because the latter is read-only. You can avoid this by setting the AllowCustomText property of the RCB to true. If you still want to disallow typing in the input in this case, you can handle the client-side Load event of the RCB in this way:
function onLoad(sender) {
    sender.get_inputDomElement().readOnly = "readonly";
}

I hope this helps.

Regards,
Simon
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
Thomas
Top achievements
Rank 1
answered on 18 Jul 2010, 02:00 AM
OK - I'm still confused...

According to my reading of your docs, there is no client side onLoad event.
OnLoad appears to be a server side event.

Can you give me a functional example of a client side onload event?

0
Simon
Telerik team
answered on 19 Jul 2010, 02:01 PM
Hi Ron Boehm,

I meant the client-side Load event, which can be set via the OnClientLoad property (more info here). Please excuse me for confusing you.

All the best,
Simon
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
Tags
ComboBox
Asked by
Thomas
Top achievements
Rank 1
Answers by
Simon
Telerik team
Thomas
Top achievements
Rank 1
Share this question
or