How to edit radcombobox item attribute at client side?

12 posts, 1 answers
  1. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 24 Jan 2011 Link to this post

    I have a combobox as follows:

    <telerik:RadComboBox ID="ddlDevelopmentArea" runat="server" Width="200px" DropDownWidth="220px"
                        EmptyMessage="" HighlightTemplatedItems="true" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedEventHandler">
                        <HeaderTemplate>
                            <table style="width: 240px" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="width: 150px;">
                                        <asp:Label runat="server">
                                            <%=AutismPro.Classroom.SR.GetString("Curriculum", "Curriculum_DesignCurriculum_DevelopmentAreaCombo_Header")%>
                                        </asp:Label>
                                    </td>
                                    <td style="width: 90px;">
                                        <%=AutismPro.Classroom.SR.GetString("Curriculum", "Curriculum_DesignCurriculum_DevelopmentAreaCombo_HasGoals")%>
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table style="width: 210px" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="width: 150px;">
                                        <%# DataBinder.Eval(Container, "Text")%>
                                    </td>
                                    <td style="width: 60px;">
                                        <%# DataBinder.Eval(Container, "Attributes['HasGoals']")%>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadComboBox>

    I would like to change the value of an attribute at client side. Following is my code try:

    var combo = $find("<%= ddlDevelopmentArea.ClientID %>");                     
    combo.trackChanges();
    combo.get_selectedItem().get_attributes().setAttribute("HasGoals", "False");
    combo.commitChanges();

    The value gets changed in combo object but is not reflecting in UI/HTML.

    Please help.

    Thanks in advance.
  2. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 24 Jan 2011 Link to this post

    Please help me, it is really very URGENT.
  3. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 26 Jan 2011 Link to this post

    :)
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 27 Jan 2011 Link to this post

    Hi Anand,

    As I understand you implement RadComboBox using Templates and you add a control item client-side.
    Please note that Templated Items' HTML is built at the server before it is finally rendered. This is required because the Template definition is available only at the server and Items are built using this definition.
    So when you add item client-side – it has no template and that is why the HTML output is not changed.

    Regarding your question about Telerik Forum - please note that the response time of Telerik team members in the forums is 72 hours.
    More details about usage of Telerik Forum you can find here.
    Additionally please find more details about response time of support tickets at the “Support options” article.

    Kind regards,
    Kalina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 16 Feb 2011 Link to this post

    I am just trying to change the value of "HasGoals" field of a record. 

    Following is the code.

    combo.get_selectedItem().get_attributes().setAttribute("HasGoals", "False");

    I am NOT adding any new record.

    Please reply asap. It is RED at side.
  6. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 16 Feb 2011 Link to this post

    An approach (clientside) to refresh the whole combobox content will also help.
  7. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 21 Feb 2011 Link to this post

    :)
  8. Answer
    Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 21 Feb 2011 Link to this post

    Hi Anand,

    Changing a RadComboBox item attribute at client-side will not change the related HTML that has been already rendered.
    That is why after you change the attribute of an existing item you have to change the related HTML manually:
    <ItemTemplate>
    <table style="width: 210px" cellspacing="0" cellpadding="0">
        <tr>
            <td style="width: 150px;">
                <%# DataBinder.Eval(Container, "Text")%>
            </td>
            <%--set an id property in order to be able to get the TD easily with JQuery--%>
            <td style="width: 60px;" id="hasGoals" >
                <%# DataBinder.Eval(Container, "Attributes['HasGoals']")%>
            </td>
        </tr>
    </table>
    </ItemTemplate>

    function OnClientSelectedIndexChangedEventHandler(sender, eventArgs)
    {
     
        var combo = $find("<%= ddlDevelopmentArea.ClientID %>");                    
        sender.trackChanges();
        sender.get_selectedItem().get_attributes().setAttribute("HasGoals", "false");
         
        // get the LI DOM element that wraps the rendered item template
        var li = sender.get_selectedItem().get_element();
        // set the text of the TD element
        $telerik.$('#hasGoals', li).text("false");
         
        sender.commitChanges();
      
         
    }

    I prepared a small example for you in order to illustrate this approach.

    All the best,
    Kalina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  9. Anand
    Anand avatar
    7 posts
    Member since:
    Jan 2011

    Posted 22 Feb 2011 Link to this post

    Rocking solution!!

    You saved atleast 2 productive hrs of mine.

    Thanks alot. :)
  10. Seetha
    Seetha avatar
    5 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    Hi All ,
    Below is my telerik:RadComboBox and jquery to bind the multi column radcombobox. the below code is binding the first column but i wanted the second column also to be bound.please help me.

     <telerik:RadComboBox runat="server" ID="ddlSubtype" Width="58px" HighlightTemplatedItems="true"
                                                                                                        EnableEmbeddedSkins="false" DropDownWidth="280px" TabIndex="3" Skin="EnhOutlook"
                                                                                                        onBlur="SetNoRecordsFoundFlag()" Enabled="false" EnableLoadOnDemand="False">
                                                                                                        <HeaderTemplate>
                                                                                                            <table style="width: 260px" cellspacing="0" cellpadding="0">
                                                                                                                <tr>
                                                                                                                    <td style="width: 60px;">
                                                                                                                        Name
                                                                                                                    </td>
                                                                                                                    <td style="width: 200px;">
                                                                                                                        Description
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </table>
                                                                                                        </HeaderTemplate>
                                                                                                        <ItemTemplate>
                                                                                                            <table style="width: 260px" cellspacing="0" cellpadding="0">
                                                                                                                <tr>
                                                                                                                    <td style="width: 60px;">
                                                                                                                        <%# DataBinder.Eval(Container.DataItem, "Short")%>
                                                                                                                       
                                                                                                                    </td>
                                                                                                                    <td style="width: 200px;" id="tdSubtypeDescription">
                                                                                                                        <%# DataBinder.Eval(Container.DataItem, "Attributes['SubTypeDescription']")%>
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </table>
                                                                                                        </ItemTemplate>
                                                                                                    </telerik:RadComboBox>



      function BindListToCombo(sender, eventArgs) {
                debugger;
                var list = $get('<%= hdnSubType.ClientID %>').value;
                var jsonData = JSON.parse(list)
                var control = document.getElementById("<%=ddlSubtype.ClientID %>");
                var cntrlSubType = $find("<%=ddlSubtype.ClientID %>");
                var cntrlGiftType = $find("<%=ddlGiftType.ClientID %>");
                //            var selectindex;
                if (cntrlSubType != null) {

                    if ($get('<%=ddlGiftType.ClientID %>').value != "CGA"
                    && $get('<%=ddlGiftType.ClientID %>').value != "CLAT" &&
                     $get('<%=ddlGiftType.ClientID %>').value != "CLU" &&
                     $get('<%=ddlGiftType.ClientID %>').value != "CRU") {

                        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                        $find("<%=ddlSubtype.ClientID %>").clearItems();
                        $find("<%=ddlSubtype.ClientID %>").disable();
                        comboItem.disable();
                    }

                    else {
                        $find("<%=ddlSubtype.ClientID %>").enable();
                        cntrlSubType.clearItems();
                        $.each(jsonData, function(a, items) {
                            $.each(items, function(b, item) {


                                var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                                if ($get('<%=ddlGiftType.ClientID %>').value != null) {

                                    if (item.Short1 == $get('<%=ddlGiftType.ClientID %>').value) {
                                        // if (b == 0) {
                                        //selectindex = item.SubtypeID
                                        //}
                                        comboItem.set_text(item.Short);
                                        //comboItem.set_text(item.Short + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + item.Description);
                                        //comboItem.set_text(" <table style=width: 300px cellspacing=0 cellpadding=0><tr><td style=width: 100px;>" + item.Short + "</td><td style=width: 100px;>" + item.Description + "</td></tr></table>");

                                       
                                        //comboItem.set_value(item.Description);
                                        comboItem.set_value(item.SubtypeID);

                                        cntrlSubType.get_items().insert(b, comboItem);

                                        comboItem.enable();
                                        cntrlSubType.commitChanges();
                                    }
                                }

                            });

                        });
                        var comboItem = cntrlSubType.findItemByValue(1);
                        comboItem.select();
                    }
                }
            }
  11. Seetha
    Seetha avatar
    5 posts
    Member since:
    Nov 2012

    Posted 30 Nov 2012 Link to this post

    Hi,
    Modifying this seltext worked out.. but my binding is cleared after clicking on serch button. :( any help??


     comboItem.set_text("<table style='width: 260px' cellspacing='0' cellpadding='0'><tr><td style='width: 60px;'>" + item.Short + "</td><td style='width: 200px;'>" + item.Description + "</td></tr></table>");

        function onclientclickofsubtype(sender, eventargs) {
                var selvalueSubType = document.getElementById("ctl00_cntMaster_tabContainer_tpGiftSearch_ddlSubtype").value;
                var text = selvalueSubType.split("<table style='width: 260px' cellspacing='0' cellpadding='0'><tr><td style='width: 60px;'>");
                var seltext = text[1].split("</td><td style='width: 200px;'>");
                var selvalue = sender._value
                sender.set_text(seltext[0]);
                sender.set_value(selvalue);

            }
  12. Cat Cheshire
    Cat Cheshire avatar
    128 posts
    Member since:
    Jun 2010
Back to Top