Client side setText function problem

[Matthew]

Hello,

I am having trouble with the client-side settext() method.

It is never reaching my javascript function at all. I added a Window.alert to it, and it never happened....

Here is a sample of my code:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

   <script type="text/javascript">

 

     function SetTextOfTheComboBox()

     {

         var combo = $find("<%=cmbDriveTrain.ClientID %>");

         combo.SetText("Fuel Types");

     }

     function stopPropagation(e)

     {

         e.cancelBubble = true;

 

         if (e.stopPropagation)

         {

             e.stopPropagation();

         }

 

     }

 

   </script>

</telerik:RadCodeBlock>

 

 

 

<telerik:RadComboBox runat="server" ID="cmbDriveTrain" HighlightTemplatedItems="true" Skin="WebBlue" OnClientDropDownClosed="SetTextOfTheComboBox">

               <Items>

                 <telerik:RadComboBoxItem Text="One" Value="One"  />

                 <telerik:RadComboBoxItem Text="Two" Value="Two" />

                 <telerik:RadComboBoxItem Text="Three" Value="Three" />

               </Items>

               <ItemTemplate>

                 <asp:CheckBox runat="server" ID="CheckBox"

                 onclick="stopPropagation(event);" Text=""/>

                 <%# DataBinder.Eval(Container, "Text") %>

               </ItemTemplate>

             </telerik:RadComboBox>

It's still always displaying the text of the item I last clicked, such as "One" "Two" or "Three"

EDIT: I have also tried it using a databound control and removing the "stopPropagation(event)" to no avail!

[Matthew]

The javascript is failing on the combo.settext("test"); line

I am able to make it work if I do this instead:

document.getElementById("ctl00_MainContent_cmbDriveTrain_Input").value = "test";

and specifically note the client id

[Kalina]

Hi Matthew,

Let me suggest you add a “div” tag to wrap the controls nested in RadComboBox ItemTemplate and to call the “stopPropagation” function.
At the “onclick” event of the checkbox you can assign an event handler function to collect the texts of the selected RadComboBox items and set these texts at RadComboBox input.

function SetTextOfTheComboBox() {

    var combo = $find("<%=cmbDriveTrain.ClientID %>");

    //combo.SetText("Fuel Types");

    combo.set_text("Fuel Types");

}

function stopPropagation(e) {

    e.cancelBubble = true;

 

    if (e.stopPropagation) {

        e.stopPropagation();

    }

}

function onCheckBoxClick(chk) {

   


    var combo = $find("<%= cmbDriveTrain.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 + "_CheckBox");

        if (chk1.checked) {

            text += item.get_text() + ",";

            values += item.get_value() + ",";

        }

    }

    //remove the last comma from the string

    text = removeLastComma(text);

    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(/,$/, "");

}

 

<telerik:RadComboBox runat="server" ID="cmbDriveTrain"
    HighlightTemplatedItems="true"
    Skin="WebBlue"
    OnClientDropDownClosed="SetTextOfTheComboBox">
    <Items>
        <telerik:RadComboBoxItem Text="One" Value="One" />
        <telerik:RadComboBoxItem Text="Two" Value="Two" />
        <telerik:RadComboBoxItem Text="Three" Value="Three" />
    </Items>
    <ItemTemplate>
        <div onclick="stopPropagation(event)">
            <asp:CheckBox runat="server" ID="CheckBox"
                onclick="onCheckBoxClick(this)"
                Text='<%# DataBinder.Eval(Container, "Text") %>' />
        </div>
    </ItemTemplate>
</telerik:RadComboBox>

More details about the approach used you can find at this online demo.

If you prefer to set a custom text at the RadComboBox input please use combo.set_text("Fuel Types"); instead of combo.SetText("Fuel Types");
Please find more details about RadComboBox client-side properties and methods here.

Regards,
Kalina
the Telerik team

[Matthew]

Thank you Kalina,

Please note that I took this code directly from Telerik sample code for RadComboBox with CheckBoxes in
079551_RadComboBoxCheckBoxes_Web_ID.zip

Also, the SetTest property came from here:
http://www.telerik.com/help/aspnet/combobox/combo_client_model.html

The sample uses .SetText, not .Set_Text

Regardless, I have implemented your suggestions and it still is not working. 
With the exception of the div and the onclick account (because I am not interested in that functionality at this time, but thank you for the suggestion!)

Note that the set_text (settext) method is failing. The page never sends the alert "3"

Also note my commented line in which I specifically set the value with the client ID works appropriately.

<script type="text/javascript">

 

        function SetTextOfTheComboBox() {

             alert("1");
var combo = $find("<%= cmbDriveTrain.ClientID %>");

             alert("2");
combo.Set_Text("Drive Trains");
alert("3");
                //document.getElementById("ctl00_MainContent_cmbDriveTrain_Input").value = "Drive Trains";


        }

</script>

 

<telerik:RadComboBox runat="server" ID="cmbDriveTrain"                                    HighlightTemplatedItems="true" Skin="WebBlue" OnClientDropDownClosed="SetTextOfTheComboBox">

    <Items>

        <telerik:RadComboBoxItem Text="One" Value="One"  />

        <telerik:RadComboBoxItem Text="Two" Value="Two" />

        <telerik:RadComboBoxItem Text="Three" Value="Three" />

    </Items>

    <ItemTemplate>

        <asp:CheckBox runat="server" ID="CheckBox" onclick="stopPropagation(event);" Text=""/> <%# DataBinder.Eval(Container, "Text") %>

     </ItemTemplate>

</telerik:RadComboBox>

             

            </div>

[Matthew]

Nevermind!
Thank you for your suggestion.

While I still think you should update your sample from this link:
http://www.telerik.com/help/aspnet/combobox/combo_client_model.html
You sample incorrectly says the use combo.SetText

Note the error in both capitalization and the missing underscore character.
Also, your sample does not suggest to use $find

Once I copied the code you provided the error I had was with case-sensetivity. 
combo.Set_Text failed, but of course combo.set_text works

Thank you for you help!

EDIT: Ooops! looks like I was referencing the non-ajax ones, huh?

[Kalina]

Hello Matthew,

Your supposition is correct – indeed you use samples and demos related to RadComboBox for ASP.NET.
Please find the demos related to RadComboBox for ASP.NET AJAX here.
Additionally - here you can find the online help articles related to RadComboBox for ASP.NET AJAX.

All the best,
Kalina
the Telerik team