This is a migrated thread and some comments may be shown as answers.

decorated dropdowns lost rebinding capability

2 Answers 34 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Aarsh
Top achievements
Rank 1
Aarsh asked on 26 Feb 2014, 04:46 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 28 Feb 2014, 03:15 PM
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.
0
Aarsh
Top achievements
Rank 1
answered on 07 Mar 2014, 02:34 PM
The scenario mentioned above works if no postbacks happen. The function otherwise need to in asp.net ajax's pageLoad() function otherwise.
Tags
FormDecorator
Asked by
Aarsh
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Aarsh
Top achievements
Rank 1
Share this question
or