decorated dropdowns lost rebinding capability

3 posts, 1 answers
  1. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 25 Feb 2014 Link to this post

    Greetings,

    I'd like to have this addressed ASAP. This seems to be another bug.

    Download

    SkyDrive : file name is "RadFormDecoratorLightWeightRaid.zip"

    Issue :

    as observed on Line 56 in the code snippet below, the html my JavaScript code generates with some poor man's template-ing does work if I remove "select" controls being decorated by changing :

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Default" DecoratedControls="All" RenderMode="Lightweight" />


    to

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Default" DecoratedControls="All" ControlsToSkip="Select" RenderMode="Lightweight" />

    Plot :

    I have a list of items that I bind from server side to asp.DropDownList control. At the time of doing this I also set certain attribute as shown in the code snippet below. (Lines 17,19 & 21)

    01.using System.Web.UI.WebControls;
    02. 
    03.namespace RadFormDecoratorLightWeightRaid
    04.{
    05.    public partial class WebForm1 : System.Web.UI.Page
    06.    {
    07.        protected void Page_Load(object sender, EventArgs e)
    08.        {
    09.            ListItem item;
    10.            itemTypes2.Items.Clear();
    11.            for (int i = 1; i <= 40; i++)
    12.            {
    13.                item = new ListItem();
    14.                item.Text = string.Format("rad form decorator bug {0}", i);
    15.                item.Value = (i * 10).ToString();
    16.                if (i < 25)
    17.                    item.Attributes.Add("data-category", "A");
    18.                else if (i == 35)
    19.                    item.Attributes.Add("data-category", "A");
    20.                else
    21.                    item.Attributes.Add("data-category", "B");
    22.                itemTypes2.Items.Add(item);
    23.            }
    24.        }
    25.    }
    26.}

    Now I have another drop down (ID="itemTypes") from which I want to control the items being displayed in this drop down on client side JavaScript whose ID happens to be "itemTypes2".

    the code snippet below is from the content page :

    01.<table border="0" cellpadding="0" cellspacing="0">
    02.        <tr>
    03.            <td>
    04.                <asp:DropDownList ID="itemTypes" runat="server" onchange="jsfun_itemTypeChanged();">
    05.                    <asp:ListItem Text="Case Type A" Value="A"></asp:ListItem>
    06.                    <asp:ListItem Text="Case Type B" Value="B"></asp:ListItem>
    07.                </asp:DropDownList>
    08.            </td>
    09.            <td>
    10.                <asp:DropDownList ID="itemTypes2" runat="server">
    11.                </asp:DropDownList>
    12.            </td>
    13.        </tr>
    14.    </table>
    15.    <span id="optionstore" style="display: none;"></span>
    16.    <telerik:RadScriptBlock runat="server">
    17.        <script type="text/javascript">
    18. 
    19.            var
    20.                ddItemTypes_ID = "<%=itemTypes.ClientID %>",
    21.                ddItemTypes2_ID = "<%=itemTypes2.ClientID %>",
    22.                allOptions = []
    23.            ;
    24. 
    25.            window.onload = function () {
    26.                jsfun_itemTypeChanged();
    27.            };
    28. 
    29. 
    30. 
    31.            $(function () {
    32.                $('#' + ddItemTypes2_ID + ' option').each(function () {
    33.                    if ($(this).val() !== "") {
    34.                        var caseTypeItem = {
    35.                            tag: $(this).attr("data-category"),
    36.                            txt: $(this).text(),
    37.                            _val: $(this).val()
    38.                        };
    39.                        allOptions.push(caseTypeItem);
    40.                    }
    41.                });
    42.            });
    43. 
    44.            function jsfun_itemTypeChanged() {
    45.                var 
    46.                    filter = $('#' + ddItemTypes_ID).val().toString(),
    47.                    filteredItems,
    48.                    optionsHtml = ""
    49.                ;
    50.                console.log('>>> Selected Value ' + filter);
    51.                if (filter === 'A' || filter === 'B') {
    52.                    filteredItems = allOptions.filter(function (o) { return o.tag === filter; });
    53.                    $.each(filteredItems, function (i) {
    54.                        optionsHtml += "<option value='" + $(this)[0]._val.toString() + "' data-category='" + $(this)[0].tag + "'>" + $(this)[0].txt + "</option>";
    55.                    });
    56.                    $('#' + ddItemTypes2_ID).empty().html(optionsHtml);
    57.                    debugger;
    58.                    console.log(optionsHtml);
    59.                }
    60.            }
    61.        </script>
    62.    </telerik:RadScriptBlock>


    finally here is how my declaration of RadFormDecorator in master file looks like :

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Default" DecoratedControls="All" RenderMode="Lightweight" />

    Like I mentioned earlier, the complete solution can be found from skydrive link below :

    http://1drv.ms/1dxchAm


    Thanks,
    -Aarsh
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 28 Feb 2014 Link to this post

    Hello Aarsh,

    When the state of decorated select elements by RadFormDecorator is changed, you must update them by calling the RadFormDecorator's updateSelect(select1) method. Where the 'select1' argument is the select which is to be updated.  You can add the following JavaScript code to your pages:

    WebForm1.aspx:
    function jsfun_itemTypeChanged() {
        var 
            filter = $('#' + ddItemTypes_ID).val().toString(),
            filteredItems,
            optionsHtml = ""
        ;
        console.log('>>> Selected Value ' + filter);
        if (filter === 'A' || filter === 'B') {
            filteredItems = allOptions.filter(function (o) { return o.tag === filter; });
            $.each(filteredItems, function (i) {
                optionsHtml += "<option value='" + $(this)[0]._val.toString() + "' data-category='" + $(this)[0].tag + "'>" + $(this)[0].txt + "</option>";
            });
            $('#' + ddItemTypes2_ID).empty().html(optionsHtml);
            //debugger;
            updateDecoratedSelect($get(ddItemTypes2_ID));
            console.log(optionsHtml);
        }
    }

    Site1.Master:
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script>
                function updateDecoratedSelect(select) {
                    var formDecorator = $find("<%=RadFormDecorator1.ClientID%>");
                    formDecorator.updateSelect(select);
                }
            </script>
        </telerik:RadCodeBlock>
    </head>


    Regards,
    Danail Vasilev
    Telerik
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 07 Mar 2014 in reply to Danail Vasilev Link to this post

    The scenario mentioned above works if no postbacks happen. The function otherwise need to in asp.net ajax's pageLoad() function otherwise.
Back to Top