in my WebForm, I have many views, each view pretty much has the same format, with a radio button list in the beginning (yes/no) then a table below.
What I'm trying to do here is that simply when the user clicks "yes" the table below appears, and vice versa.
I'd like to do this on the client using JScript (doing it on the server-side would be a hasle, not to mention the unnecessary postbacks).
I have these problems:
1- RadioButtonList does not support a client onclick event, so I had to try #2 below:
2- I tried putting some kind of client event in the TABLE (like onload which doesnt seem to work). This basically should check, whenever the table renders, whether or not the RadioButtonList value is 'yes' or 'no' [not sure if this is possible since on the
client some controls might render before the others]
One problem remains: The 1st time the page is loaded, I need to put the TABLE in the correct state (i.e. visible or invisible). The problem is, the radioButtonList is bound, and it won't have a default value. Do I have to check this in the Table's PreRender
event ? Is it possible to "bind" the visibility state of the TABLE to the RadioButtonList value on the CLIENT ?? I know it's possible on the server (see below)
The other option I did was to put this in my HTML code <TABLE style="<%=GetVisibility%>"> which calls a C# function which also requires a postback from the RadioButtonList (which I want to avoid). I would like this code to be on the client to avoid postbacks.
Put the table in a <div> with style="display:none;" (clientside). Make sure the div has a client-side id value. In the onclick event of your radiobuttonlist, run something like this:
OK That still doesn't fix my problem. The table has to be in whatever state the radio button list (RBL) is in when the page is loaded. Sometimes the RBL has value "yes" and sometimes "no". This depends on the data being loaded (RBL is bound to a business
object). This means that the 1st time the page is updated the RBL might have value "yes" although the TABLE is by default invisible (or vise-versa).
OK That still doesn't fix my problem. The table has to be in whatever state the radio button list (RBL) is in when the page is loaded. Sometimes the RBL has value "yes" and sometimes "no". This depends on the data being loaded (RBL is bound to a business
object). This means that the 1st time the page is updated the RBL might have value "yes" although the TABLE is by default invisible (or vise-versa).
The the <div style="display:<%=GetVisibility()%>;"> option is the way to go. If the table data and visibility is dependent on server-side events or values, you can't really set this purely on the client-side.
Is there a way (on the client) to set a specific html attribute on an element, depending on another's ? (like in the server Control's PreRender event). I don't want to do it on the html document's onload event either.
I guess this is what I'll do:
1 -<div style="display:<%=GetVisibility()%>;">
2- Add a client-side onclick() event to the RBL that changes the visibility of the <TABLE> (or <div> or whatever)
3- Make sure AutoPostBack is set to 'false' on the RBL
The other option would be:
do #1 above and set AutoPostBack='true'
Why do I want to do it on the client ? I hate the fact that the page refreshes (autopostback) everytime the user clicks the radio button list. Changing the visibility seems like something that should be on the client.
Mourad
Member
41 Points
107 Posts
RadioButtonList with client-side scripting
Jul 25, 2007 07:25 AM|LINK
Hello all,
in my WebForm, I have many views, each view pretty much has the same format, with a radio button list in the beginning (yes/no) then a table below.
What I'm trying to do here is that simply when the user clicks "yes" the table below appears, and vice versa.
I'd like to do this on the client using JScript (doing it on the server-side would be a hasle, not to mention the unnecessary postbacks).
I have these problems:
1- RadioButtonList does not support a client onclick event, so I had to try #2 below:
2- I tried putting some kind of client event in the TABLE (like onload which doesnt seem to work). This basically should check, whenever the table renders, whether or not the RadioButtonList value is 'yes' or 'no' [not sure if this is possible since on the client some controls might render before the others]
Any ideas ?
Mikesdotnett...
All-Star
154887 Points
19862 Posts
Moderator
MVP
Re: RadioButtonList with client-side scripting
Jul 25, 2007 08:35 AM|LINK
The RadioButtonList can support a client click event:
RadioButtonList.Attributes.Add("onclick", "myjsfunc;");
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
Mourad
Member
41 Points
107 Posts
Re: RadioButtonList with client-side scripting
Jul 25, 2007 09:54 AM|LINK
Weird, I couldn't add this from HTML.
One problem remains: The 1st time the page is loaded, I need to put the TABLE in the correct state (i.e. visible or invisible). The problem is, the radioButtonList is bound, and it won't have a default value. Do I have to check this in the Table's PreRender event ? Is it possible to "bind" the visibility state of the TABLE to the RadioButtonList value on the CLIENT ?? I know it's possible on the server (see below)
The other option I did was to put this in my HTML code <TABLE style="<%=GetVisibility%>"> which calls a C# function which also requires a postback from the RadioButtonList (which I want to avoid). I would like this code to be on the client to avoid postbacks.
Mikesdotnett...
All-Star
154887 Points
19862 Posts
Moderator
MVP
Re: RadioButtonList with client-side scripting
Jul 25, 2007 10:11 AM|LINK
Put the table in a <div> with style="display:none;" (clientside). Make sure the div has a client-side id value. In the onclick event of your radiobuttonlist, run something like this:
document.getElementById('myDivID').style.display == 'block'
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
Mourad
Member
41 Points
107 Posts
Re: RadioButtonList with client-side scripting
Jul 25, 2007 10:43 AM|LINK
OK That still doesn't fix my problem. The table has to be in whatever state the radio button list (RBL) is in when the page is loaded. Sometimes the RBL has value "yes" and sometimes "no". This depends on the data being loaded (RBL is bound to a business object). This means that the 1st time the page is updated the RBL might have value "yes" although the TABLE is by default invisible (or vise-versa).
Mikesdotnett...
All-Star
154887 Points
19862 Posts
Moderator
MVP
Re: RadioButtonList with client-side scripting
Jul 25, 2007 10:53 AM|LINK
The the <div style="display:<%=GetVisibility()%>;"> option is the way to go. If the table data and visibility is dependent on server-side events or values, you can't really set this purely on the client-side.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
Mourad
Member
41 Points
107 Posts
Re: RadioButtonList with client-side scripting
Jul 26, 2007 05:46 PM|LINK
Is there a way (on the client) to set a specific html attribute on an element, depending on another's ? (like in the server Control's PreRender event). I don't want to do it on the html document's onload event either.
I guess this is what I'll do:
1 -<div style="display:<%=GetVisibility()%>;">
2- Add a client-side onclick() event to the RBL that changes the visibility of the <TABLE> (or <div> or whatever)
3- Make sure AutoPostBack is set to 'false' on the RBL
The other option would be:
do #1 above and set AutoPostBack='true'
Why do I want to do it on the client ? I hate the fact that the page refreshes (autopostback) everytime the user clicks the radio button list. Changing the visibility seems like something that should be on the client.
Mikesdotnett...
All-Star
154887 Points
19862 Posts
Moderator
MVP
Re: RadioButtonList with client-side scripting
Jul 26, 2007 06:49 PM|LINK
In javascript, you would use getElementById() to reference an element by it's clientside ID. You can get and set its display status:
if(document.getElementById('myElement').style.display == 'none')
{
//the element is invisible
document.getElementById('myElement').style.display = 'block';
//now it's visible
}else{
//its visible
}
The possible values for display are block, none, inline
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter