How to edit radcombobox item attribute at client side?

[Anand]

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.

[Anand]

Please help me, it is really very URGENT.

[Anand]

:)

[Kalina]

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

[Anand]

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.

[Anand]

An approach (clientside) to refresh the whole combobox content will also help.

[Anand]

:)

[Kalina]

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

[Anand]

Rocking solution!!

You saved atleast 2 productive hrs of mine.

Thanks alot. :)

[Seetha]

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

[Seetha]

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

        }

[Cat Cheshire]

Maybe you can try the client templates - http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/clienttemplates/defaultcs.aspx