decorated dropdowns lost rebinding capability

[Aarsh]

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

[Danail Vasilev]

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

[Aarsh]

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