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 :
to
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)
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 :
finally here is how my declaration of RadFormDecorator in master file looks like :
Like I mentioned earlier, the complete solution can be found from skydrive link below :
http://1drv.ms/1dxchAm
Thanks,
-Aarsh
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