Multi-select combo box with checkboxes

[Thomas]

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();
          }
      }

[Simon]

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

[Thomas]

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...

[Simon]

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

[Thomas]

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?

[Simon]

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