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

Client side setText function problem

5 Answers 449 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 26 Aug 2010, 05:34 PM
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!


5 Answers, 1 is accepted

Sort by
0
Matthew
Top achievements
Rank 1
answered on 26 Aug 2010, 07:45 PM
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
0
Kalina
Telerik team
answered on 26 Aug 2010, 08:21 PM
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
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
Matthew
Top achievements
Rank 1
answered on 26 Aug 2010, 09:23 PM
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>
0
Matthew
Top achievements
Rank 1
answered on 26 Aug 2010, 09:30 PM
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?
0
Kalina
Telerik team
answered on 31 Aug 2010, 12:56 PM
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
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
Matthew
Top achievements
Rank 1
Answers by
Matthew
Top achievements
Rank 1
Kalina
Telerik team
Share this question
or