Hello,
I have a RadTreeList cotrol. Within this is a TreeListTemplateColumn.
Inside this I have two DIVs and radbutton configured as a
custom toggle. What I’d like to do is is
when the user clicks the toggle button the system hides one div and shows the other.
I’ve had a go at this with little success. Here is the code for the buttons
<telerik:RadButton ID=
"RadButton2"
runat=
"server"
ButtonType=
"LinkButton"
Checked=
"True"
Skin=
"Metro"
ToggleType=
"CustomToggle"
OnClientToggleStateChanged=
"SetVisibility"
AutoPostBack=
"False"
>
<ToggleStates>
<telerik:RadButtonToggleState PrimaryIconCssClass=
"rbToggleCheckboxChecked"
Text=
"Existing"
/>
<telerik:RadButtonToggleState PrimaryIconCssClass=
"rbToggleCheckbox"
Text=
"New"
/>
</ToggleStates>
</telerik:RadButton>
And here is the associated JavaScript:
function
SetVisibility(sender, args)
{
switch
(args.get_currentToggleState().get_text())
{
case
"Existing"
:
showstuff(
'existing'
);
hidestuff(
'new'
);
break
;
case
"New"
:
showstuff(
'new'
);
hidestuff(
'existing'
);
break
;
default
:
hidestuff(
'new'
);
hidestuff(
'existing'
);
break
;
}
}
function
showstuff(boxid){
document.getElementById(boxid).style.visibility=
"visible"
;
}
function
hidestuff(boxid){
document.getElementById(boxid).style.visibility=
"hidden"
;
}
The problem with this is that is doesn't matter which button
(row) within the treelist you click, the only DIVs that get changed are those
within the first row.
Any ideas how I can overcome this?