since I combined an asp:dropdownlist with an asp:checkboxlist, I have the problem in IE(8) and Firefox (Chrome works fine) that everytime I click the DropDownList, the empty box appears in addition to the popup I manually open when the dropdownlist is clicked.
My question now is: How can I hide this empty box (since there are no entries in it), but keep the dropdown element? I don't want to replace this component, since it still should look like a dropdownlist. If I change it to a text box it's not clear anymore that it can be used as a dropdown.
This is what I currently have in place:
<div style="width: 190px;" class="right">
<!-- the original drop down list -->
<asp:DropDownList CssClass="dropdownbox" ID="ddlCountry" runat="server">
</asp:DropDownList>
<cc1:PopupControlExtender ID="ddlCountry_PopupControlExtender" runat="server" DynamicServicePath=""
Enabled="True" ExtenderControlID="" TargetControlID="ddlCountry" PopupControlID="pnlPopup"
OffsetY="20">
</cc1:PopupControlExtender>
<!-- Popup control extender that maps the country list to the dropdown list -->
<asp:Panel ID="pnlPopup" runat="server" CssClass="dropdowncheckbox">
<!-- List of countries with a checkbox for each entry -->
<asp:CheckBoxList ID="countryList" runat="server"
DataTextField="Countries" DataValueField="Countries" AutoPostBack="True"
OnSelectedIndexChanged="countryList_SelectedIndexChanged">
</asp:CheckBoxList>
</asp:Panel>
</div>
If there is a component that fits my purpose better, please let me know.
Thanks a lot in advance for your suggestions.
Place this code in the event you need to trigger the change
This will work for c#
if(dropdownlist.Items.Count == 0)
{
dropdownlist.Attributes["style"] = "display: none;";
}
else
{
dropdownlist.Attributes["style"] = "";
}
Simply set the Drop Down List Enabled property to false and toggle it to true when it has entries.
dropdownbox.Enabled = false;
do something like this in c#:
if(dropdownlist.Items.Count == 0)
{
dropdownlist.Visible = false;
}
else
{
dropdownlist.Visible = true;
}
Encapsulate the dropdown in a div, give the div an id and the runat="server" property
Check in the code behind of the data to load the dropdown is empty set the div to visible false; if not, set the div to visible true.
Related
I got a problem where when the button is clicked, the panel would not change. In the sense of error. I can change the panel using the following hyperlink.
Test
But I want to use an asp:LinkButton and it did not work like this.
<asp:LinkButton ID="btngantipassword" runat="server" CssClass="btn btn-lg btn-primary btn-block" href="#" OnClick="$('#panel1').hide(); $('#panel2').show()">Change Password</asp:LinkButton>
I am still a beginner in using asp.net. Help me to solve this problem.
Almost every Control has a Visibility property. This property can be set on the aspx page in the Control itself
<asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label>
The property can also be set in code behind
Label1.Visible = false;
The visibility property works different than with JavaScript and CSS. Normally if you define a CSS class with display:none for example, you won't see it in the browser but it DOES exist. If you look at the HTML you can find it.
But in asp.net the hidden control is not rendered to the browser and therefore does not exist in the HTML.
To expand this to your question. The Panel Control can be used like you ask in your question.
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
<br />
<asp:Panel ID="Panel1" runat="server">
<p>Normal Content here...</p>
</asp:Panel>
This will render in HTML as
<div id="Panel1">
<p>Normal Content here...</p>
</div>
With the OnClick event of LinkButton1, you can change the Visibility of Panel1
protected void LinkButton1_Click(object sender, EventArgs e)
{
if (Panel1.Visible == false)
{
Panel1.Visible = true;
}
else
{
Panel1.Visible = false;
}
}
SO far everything working ok, button is disabled until value is selected from the drop down list,
However I want ---select--- to be the first option on the drop down list, but this is not happening...any ideas as to why?
<asp:DropDownList ID="DropDownListSubContractors" runat="server"
AppendDataBoundItems="true" DataTextField="Company_Name" DataValueField="id"
onchange='selectChanged(this);'>
<asp:ListItem Text="---Select---" Value="0" />
<asp:ListItem Text="Option 1" Value="1" />
</asp:DropDownList>
<script type="text/javascript">
function selectChanged(e) {
document.getElementById("<%= addNewSubContractor.ClientID %>").disabled
= (e.options[e.selectedIndex].value == "0") ? "disabled" : "";
}
</script>
<asp:Button ID="addNewSubContractor" Text="Add Sub Contractor"
OnClick="UploadSubContractor" runat="server" disabled='disabled' />
Showing the manually added items first followed by the data bound items is the default behavior of the drop down list, so ---Select--- should in theory be the first item.
I suspect there is some logic elsewhere(can be javascript or code behind) which sets the selected item to something else i.e:
DropDownListSubContractors.SelectedIndex = 1;
Have a good look through your code and make sure the selected item is not being re-set anywhere
Have you got append databound item set to true, this checks to see if there are any items in the collection, and adds them first before binding?
I'm using more than one TabContainer on a page in an ASP.NET project and I noticed a really strange behavior: when the page is loaded the focus jumps to the last TabContainer on the page, causing it to scroll down. I don't explicitly focus on any control so I don't understand where this is coming from. I also switched places between the controls and it is always the last one that is focused.
The TabContainers don't have any fancy settings, this is basically what they look like:
<cc1:TabContainer ID="tabContainer" runat="server">
<cc1:TabPanel runat="server" HeaderText="Header1" ID="tabPanel1" TabIndex="0">
<HeaderTemplate>
<asp:Label ID="lblTab1" runat="server" Text="Tab1"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
... (anything goes here, it still doesn't work)
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" HeaderText="Header2" ID="tabPanel2" TabIndex="1">
<HeaderTemplate>
<asp:Label ID="lblTab2" EnableViewState="False" runat="server" Text="Tab2"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
... (anything goes here, it still doesn't work)
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
I know I can set focus on a control, I tried it but the page first scrolls to the tab container and then returns to the focused control (it doesn't look good). I tried this to set the focus to another control:
<body id="main" onload="javascript:document.getElementById('lnkLogout').focus();">
Is this the standard behavior for the TabContainer? How can I get rid of it?
Place script below right after ScriptManager control:
<script type="text/javascript">
Sys.Extended.UI.TabContainer.prototype._app_onload = function (sender, e) {
if (this._cachedActiveTabIndex != -1) {
this.set_activeTabIndex(this._cachedActiveTabIndex);
this._cachedActiveTabIndex = -1;
var activeTab = this.get_tabs()[this._activeTabIndex];
if (activeTab) {
activeTab._wasLoaded = true;
//activeTab._setFocus(activeTab); -- disable focus on active tab in the last TabContainer
}
}
this._loaded = true;
}
</script>
Try this out. It helped me:
window.Sys.Application.findComponent('<%=tabContainer.ClientID %>');
tabContainer.set_activeTabIndex(1); ( //Here set the id of the last tab that is the index of the last tab. Index will start with 0 upto last - 1 as in array.. )
This is an old thread, but it never got resolved – here or in any of the other threads I found – and I had the same problem.
I fixed it by putting my javascript in the body element: onload="scrollTo(0,0);"
You can set focus server-side to avoid the page jumping around.
Try this in Page_Load:
PageUtility.SetFocus(foo);
Also check you whether you are setting Page.MaintainScrollPositionOnPostback.
Let me know if that helps.
UPDATE - you can simply call .Focus() on whatever control you want to be in focus by default.
eg: YourControlToFocus.Focus()
I had a similar problem, but I found a more simple solution.
In the case you use a:
<asp:toolkitscriptmanager ID="ScriptManager1" runat="server">
</asp:toolkitscriptmanager>
and more panel in the tab container ( 3 for example):
<asp:tabcontainer runat="server" ID="tc1" ActiveTabIndex="0" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
For example, you can use the property:
ActiveTabIndex="0"
OR
tc1.ActiveTabIndex = 2 'code behind
Where the integer is the ID of the tab you want to Focus.
It works for me! I Hope I can Help someone!
Enjoy
My case is I have an asp.net page has a form
<form id="form1" runat="server" target="_blank">
and a button redirect to another page and this page will open in a new window because of the target attribute of the form .
<asp:Button ID="button1" runat="server" PostBackUrl="~/kindofpage.aspx" Text="Generate" />
and I have a dropdownlist has auto postback = true to post the past to fill another dropdownlist by selected data .
<asp:dropdownliast id="Make" name="Make" runat="server" autopostback="true"></asp:dropdownlist>
the question is : why when I select item from the auto postbacked dropdown an blank page opened ?
I need a way to post the page by the dropdownlist without openning a blank page ..
Thank you,
For lack of a better idea, you could just remove the target="_blank" attribute from your markup, and when your button is clicked, modify the form tag with JavaScript and set the attribute.
You can set the OnClientClick property and run JavaScript when it's clicked. For example:
<asp:Button ID="button1" OnClientClick="document.getElementById('form1').setAttribute('target', '_blank')" runat="server" PostBackUrl="~/kindofpage.aspx" Text="Generate" />
You could always just adjust your buttonpress code to open a new window such as this:
<asp:Button ID="myBtn" runat="server" Text="Click me"
onclick="myBtn_Click" OnClientClick="window.open('kindofpage.aspx', 'kindofpage');" />
then remove the:
target="_blank"
From the form tag.
I struggled with a similar situation but solved it in the following way.
As mentioned in this answer, you can use the OnClientClick property to set the target to "_blank". E.g.
<asp:Button ID="button1" OnClick="codebehind_method" OnClientClick="document.forms[0].target = '_blank';" runat="server" Text="targets new window" />
Then, in the aspx page that my "codebehind_method" function redirects to, I reset the target of the opener form like so:
<script type="text/javascript">
function resetTarget() {
opener.document.forms[0].target = '';
}
</script>
<body onload="resetTarget()">
Now, if you go back to your opener form and use a control that does not have the "OnClientClick" property set, the AutoPostBack should occur in the same tab.
If you want to find your form by ID, replace "document.forms[0]" with:
document.getElementByID('yourFormName')
<form id="form1" runat="server">
I am making asp.net website. In that there is a link button (named Landline number).Below that there are three textboxes. And after that there is one horizontal line.
Now at a first time only link button and horizontal will be visible, and textboxes which is bellowed to link button will not be visible.
Now if user will click on the link button then textboxes which is bellowed to link button will be visible. Then horizontal line which is at the first time bellowed to the link button should be adjust to its location and should go after textboxes.
And if user clicks to link button again then textboxes should be visible false. And horizontal line should be displayed its original position that is bellowed to the link button. Of course I am able to do with visibility of textboxes but I can not understand how to change the position of the horizontal line dynamically?
Try this:
Toggle Text<br/>
<div id="divBox" style="display:none">
<input type="text" name="text1"/>
<input type="text" name="text2"/>
<input type="text" name="text3"/>
</div>
<hr/>
<script>
function toggleTextBoxes()
{
var divBox = document.getElementById("divBox");
divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
}
</script>
So you aspx Page would be like:
Toggle Text<br/>
<div id="divBox" style="display:none">
<asp:Textbox runat="server" id="text1"/>
<asp:Textbox runat="server" id="text2"/>
<asp:Textbox runat="server" id="text3"/>
</div>
<hr/>
<script>
function toggleTextBoxes()
{
var divBox = document.getElementById("divBox");
divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
}
</script>
Assuming you're doing more stuff on the server apart of showing/hiding the boxes, you'll need to use "server side" controls so here it is.
First, wrap the text boxes with Panel control like this:
<asp:Panel id="pnlTextboxesPlaceholder" runat="server">
<asp:Textbox runat="server" id="text1"/>
<asp:Textbox runat="server" id="text2"/>
<asp:Textbox runat="server" id="text3"/>
</asp:Panel>
Now, in the Page_Load event in code behind make the panel initially hidden by having such code:
pnlTextboxesPlaceholder.style["display"] = "none";
Next step is to "remember" the last state of the panel i.e. visible or hidden.. for this you can use hidden input:
<asp:HiddenField ID="hdnTextboxPanelState" runat="server" Value="hidden" />
Now in the link button click event, have such code:
void LandlineNumber_Click(object sender, EventArgs e)
{
bool blnHidden = (hdnTextboxPanelState.Value == "hidden");
pnlTextboxesPlaceholder.style["display"] = blnHidden ? "" : "none";
hdnTextboxPanelState.Value = blnHidden ? "visible" : "hidden";
}
Finally, place the <hr /> below the Panel and it will show in the correct place every time.