Client side setText function problem

6 posts, 0 answers
  1. Matthew
    Matthew avatar
    20 posts
    Member since:
    Jun 2010

    Posted 26 Aug 2010 Link to this post

    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!


  2. Matthew
    Matthew avatar
    20 posts
    Member since:
    Jun 2010

    Posted 26 Aug 2010 Link to this post

    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
  3. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 26 Aug 2010 Link to this post

    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
  4. Matthew
    Matthew avatar
    20 posts
    Member since:
    Jun 2010

    Posted 26 Aug 2010 Link to this post

    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>
  5. Matthew
    Matthew avatar
    20 posts
    Member since:
    Jun 2010

    Posted 26 Aug 2010 Link to this post

    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?
  6. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 31 Aug 2010 Link to this post

    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
Back to Top