Binding radcombobox to Json

3 posts, 0 answers
  1. Seetha
    Seetha avatar
    5 posts
    Member since:
    Nov 2012

    Posted 19 Nov 2012 Link to this post

    Hi All,
    i have a requirement that i need to bind the multicolumn radcombobox to Json using javascript/jquery (ASP.NET/AJAX) . Please help.
  2. Seetha
    Seetha avatar
    5 posts
    Member since:
    Nov 2012

    Posted 27 Nov 2012 Link to this post

    Hi All,

    Below is my jquery to bind the dropdown using jquery.. i stored the json object in a string on page load and filtering and binding to the radcombo in the client side. now the problem is once after i choose the subtype and click on the search button it is clearing the dropdown items of my subtype.. i registered in the pageloadcomplete event also...doesnt wrk..any help would be appreciated... thanks in advance..


     function BindListToCombo(sender, eventArgs) {
                var list = $get('<%= hdnSubType.ClientID %>').value;
                var jsonData = JSON.parse(list)
                var control = document.getElementById("<%=ddlSubtype.ClientID %>");
                var cntrlSubType = $find("<%=ddlSubtype.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 + "&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>");

                                        //$('#tdSubtypeDescription').html(item.Description);
                                        //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();
                    }
                }
            }
  3. Seetha
    Seetha avatar
    5 posts
    Member since:
    Nov 2012

    Posted 03 Dec 2012 Link to this post

    This solved my problem..
    thanks
    page on load()
    {
    hdnSubType.Value = GetJSONString(GetGiftSubtypes().Tables[0]);
    output:
    /*{"Table" :
    [{"SubtypeID" : "5","Short" : "S","Description" : "Standard","ListOrder" : "1","GiftTypeID" : "2","Short1" : "CGA"},
    {"SubtypeID" : "6","Short" : "C","Description" : "Commuted","ListOrder" : "2","GiftTypeID" : "2","Short1" : "CGA"},
    {"SubtypeID" : "7","Short" : "D","Description" : "Deferred","ListOrder" : "3","GiftTypeID" : "2","Short1" : "CGA"}
    ,{"SubtypeID" : "8","Short" : "F","Description" : "Flexible","ListOrder" : "4","GiftTypeID" : "2","Short1" : "CGA"},
    {"SubtypeID" : "11","Short" : "E","Description" : "Seed Money","ListOrder" : "5","GiftTypeID" : "2","Short1" : "CGA"},
    {"SubtypeID" : "1","Short" : "G","Description" : "Grantor","ListOrder" : "1","GiftTypeID" : "3","Short1" : "CLAT"},
    {"SubtypeID" : "4","Short" : "N","Description" : "Non-Grantor","ListOrder" : "2","GiftTypeID" : "3","Short1" : "CLAT"},
    {"SubtypeID" : "1","Short" : "G","Description" : "Grantor","ListOrder" : "1","GiftTypeID" : "4","Short1" : "CLU"},
    {"SubtypeID" : "4","Short" : "N","Description" : "Non-Grantor","ListOrder" : "2","GiftTypeID" : "4","Short1" : "CLU"},
    {"SubtypeID" : "2","Short" : "I","Description" : "Net Income","ListOrder" : "4","GiftTypeID" : "6","Short1" : "CRU"}
    ,{"SubtypeID" : "3","Short" : "M","Description" : "Net Income with Makeup","ListOrder" : "5","GiftTypeID" : "6","Short1" : "CRU"}
    ,{"SubtypeID" : "5","Short" : "S","Description" : "Standard","ListOrder" : "1","GiftTypeID" : "6","Short1" : "CRU"}
    ,{"SubtypeID" : "9","Short" : "F","Description" : "Flip","ListOrder" : "2","GiftTypeID" : "6","Short1" : "CRU"}
    ,{"SubtypeID" : "10","Short" : "G","Description" : "Flip with Makeup","ListOrder" : "3","GiftTypeID" : "6","Short1" : "CRU"}]}*/
    }
     public static string GetJSONString(DataTable Dt)
        {

            string[] StrDc = new string[Dt.Columns.Count];

            string HeadStr = string.Empty;
            for (int i = 0; i < Dt.Columns.Count; i++)
            {

                StrDc[i] = Dt.Columns[i].Caption;
                HeadStr += "\"" + StrDc[i] + "\" : \"" + StrDc[i] + i.ToString() + "¾" + "\",";

            }

            HeadStr = HeadStr.Substring(0, HeadStr.Length - 1);
            StringBuilder Sb = new StringBuilder();

            Sb.Append("{\"" + Dt.TableName + "\" : [");
            for (int i = 0; i < Dt.Rows.Count; i++)
            {

                string TempStr = HeadStr;

                Sb.Append("{");
                for (int j = 0; j < Dt.Columns.Count; j++)
                {

                    TempStr = TempStr.Replace(Dt.Columns[j] + j.ToString() + "¾", Dt.Rows[i][j].ToString());

                }
                Sb.Append(TempStr + "},");

            }
            Sb = new StringBuilder(Sb.ToString().Substring(0, Sb.ToString().Length - 1));

            Sb.Append("]}");
            return Sb.ToString();

        }

    aspx:

     <td style="height: 23px; padding-left: 2px;">
                                                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                                                            <tr>
                                                                                                <td style="width: 120px; height: 23px;">
                                                                                                    <telerik:RadComboBox runat="server" ID="ddlGiftType" MaxHeight="190px" Width="95px"
                                                                                                        EnableEmbeddedSkins="false" AutoPostBack="false" HighlightTemplatedItems="true"
                                                                                                        OnSelectedIndexChanged="ddlGiftType_OnSelectedIndexChanged" DropDownWidth="340px"
                                                                                                        TabIndex="2" Skin="EnhOutlook" onBlur="SetNoRecordsFoundFlag()" OnClientSelectedIndexChanged="BindListToCombo">
                                                                                                        <HeaderTemplate>
                                                                                                            <table style="width: 300px" cellspacing="0" cellpadding="0">
                                                                                                                <tr>
                                                                                                                    <td style="width: 100px;">
                                                                                                                        Name
                                                                                                                    </td>
                                                                                                                    <td style="width: 200px;">
                                                                                                                        Description
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </table>
                                                                                                        </HeaderTemplate>
                                                                                                        <ItemTemplate>
                                                                                                            <table style="width: 300px" cellspacing="0" cellpadding="0">
                                                                                                                <tr>
                                                                                                                    <td style="width: 100px;">
                                                                                                                        <%# DataBinder.Eval(Container.DataItem, "Short")%>
                                                                                                                    </td>
                                                                                                                    <td style="width: 200px;">
                                                                                                                        <%# DataBinder.Eval(Container.DataItem, "Description")%>
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </table>
                                                                                                        </ItemTemplate>
                                                                                                    </telerik:RadComboBox>
                                                                                                </td>
                                                                                                <td style="height: 23px;">
                                                                                                    <span class="txtbold" style="padding-right: 4px">Subtype: </span>
                                                                                                    <telerik:RadComboBox runat="server" ID="ddlSubtype" Width="58px" HighlightTemplatedItems="true"
                                                                                                        EnableEmbeddedSkins="false" DropDownWidth="280px" TabIndex="3" Skin="EnhOutlook"
                                                                                                        onBlur="SetNoRecordsFoundFlag()" Enabled="false" EnableLoadOnDemand="False" OnClientSelectedIndexChanged="onclientclickofsubtype">
                                                                                                        <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, "Description")%>
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </table>
                                                                                                        </ItemTemplate>
                                                                                                    </telerik:RadComboBox>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </table>
                                                                                    </td>
                                                                                    <td>
                                                                                        <asp:HiddenField ID="hdnSubType" runat="server" />
                                                                                    </td>




    jquery starts here..

     var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(OnEndRequest);

            function OnEndRequest(sender, args) {
                var combo = $find("<%=ddlSubtype.ClientID%>");
                var selvalueSubType = document.getElementById("ctl00_cntMaster_tabContainer_tpGiftSearch_ddlSubtype").value;
                var selvalue = combo._value;
                BindListToCombo(combo, null);
                Getselectedvalue(selvalue, combo);
            }
            function Getselectedvalue(selvalue, sender) {
                var list = $get('<%= hdnSubType.ClientID %>').value;
                var jsonData = JSON.parse(list)
                $.each(jsonData, function(a, items) {
                    $.each(items, function(b, item) {
                        if (item.SubtypeID == selvalue) {
                            sender.set_text(item.Short);
                            sender.set_value(selvalue);
                            return false;
                        }
                    });
                });
            }

            function BindListToCombo(sender, eventArgs) {
                debugger;
                var list = $get('<%= hdnSubType.ClientID %>').value;
                var jsonData = JSON.parse(list)
                var cntrlSubType = $find("<%=ddlSubtype.ClientID %>");
                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();
                        //                    cntrlSubType.clearItems();
                        //                    cntrlSubType.set_text("");
                        //                    cntrlSubType.set_value("");

                        //                    cntrlSubType.disable();

                    }

                    else {
                        $find("<%=ddlSubtype.ClientID %>").enable();
                        cntrlSubType.clearItems();
                        cntrlSubType.set_text("");
                        cntrlSubType.set_value("");
                        $.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) {
                                        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>");
                                        comboItem.set_value(item.SubtypeID);
                                        cntrlSubType.get_items().insert(b, comboItem);
                                        //                                    comboItem.enable();
                                        cntrlSubType.commitChanges();
                                    }
                                }
                            });
                        });
                        //                    var comboItem = cntrlSubType.findItemByValue(1);
                        //                    comboItem.select();
                    }
                }
            }

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

            }




Back to Top