Using .NET 3.5.
How do I programmtically expand/collapse the panes contained within a AJAX accordion control?
My page will have several accordions controls which I want to be able to mass expand/collapse with some buttons.
UPDATE1
My final code solution looks like this:
<script language="javascript">
function collapse_all(flag)
{
if(flag==true)
{
var behavior = $get("<%=Accordion1.ClientID%>").AccordionBehavior;
behavior.set_SelectedIndex(-1);
}
else
{
var behavior = $get("<%=Accordion1.ClientID%>").AccordionBehavior;
behavior.set_SelectedIndex(0);
}
}
</script>
you can find the accourdion control in javascript and call "set_SelectedIndex(-1)"
so (using jquery)
$("#<%=Accordion1.ClientID%>_AccordionExtender").set_SelectedIndex(-1)
if you have a few, you can either do them all discretly or use one of the jquery selectors to find them all, the accordions will have to have been set up to allow all panes to close i believe (RequireOpenedPane = false)
You can't expand them programmatically via you server-side code(VB.NET/C#) because the expansion of the panes is done in the client-side code(JavaScript). If I were you I'd suggest taking a look at the JQuery Libraries and using their show/hide functions to build a custom accordion control to do what you want. JQuery will seem less "WebForm-like" but you'll find it much more flexible than the AJAX Control Toolkit.
If you put the accordion control in an asp.net ajax update panel, you can collapse all panes easily via the codebehind setting the selected index to zero.
Related
is there any simple jquery script/plugin to apply bootstrap pagination style in asp.net gridview ? I've found some good tips about how to do this, like these links: here and here.
the only problem with these tips/solutions is we need to make a lot of changes to achieve the result and this is not preferable when you have large application and you want to transform it to bootstrap style. we need another solution. like a simple jquery script that can do the job without making lot changes to the current code.
I've made simple jquery script to apply the bootstrap pagination in asp.net gridview and I think it will be useful to share it here in stackoverflow.
source code of this script is hosted in github here.
usage is very simple:
-include the plugin js file in your asp.net page file:
<script type="text/javascript" src="js/bs.pagination.js"></script>
-set gridview property:
PagerStyle-CssClass="bs-pagination"
that's is all you need to apply bootstrap pagination style in asp.net gridview.
check my blog for more info.
Edit:
about the problem when using gridview inside UpdatePanel, the reason of this problem is because “UpdatePanel completely replaces the contents of the update panel on an update. This means that those events we subscribed to are no longer subscribed because there are new elements in that update panel.”
There is more than one solution to solve this problem:
Solution 1:
Use pageLoad() instead of $(document).ready. Modify the code like this:
function pageLoad() {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
}
Solution2:
re-change the style after every update. We can do this by adding these lines to the bs.pagination.js file:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
});
I have a system and I had a problem today, when the user double-click on button control and the system process the operation twice.
I found a solution with this code on the button:
OnClientClick = "this.disabled = true; this.value = 'submiting ...';" UseSubmitBehavior = "false"
However, I have several pages in the system, with several buttons ... is there any way to set these attributes to all the buttons of the application?
Thank you!
What about using a clientSide approach by using JQuery and disabling all Submit controls (jsfiddle)
$(document).ready(function () {
$(' :submit').click(function (event) {
$(this).attr("disabled","true");
});
});
I am quite new to JQuery so if there are any better solutions or I am completly wrong, pls let me know!
I'm not sure, but it seems that it is possible through skin file.
You can create a custom button. Here you have example how to create button that displays confirm window on client click. Almost what you wan't.
http://dhavalupadhyaya.wordpress.com/2008/07/20/creating-custom-controls-in-asp-net/
Than you would have to change all the asp:Buttons on every page to someTag:YourButton. Maybe simple Find/Replace. But I think there is possibility to configure in web.config so that ASP.NET uses someTag:YourButton everytime it sees asp:Button. But can't find now how to do it.
I need menu tabs that link to separate HTML files on my server, with unique URLs. I know this by itself doesn't require anything but CSS, but I would also like to retain the "instant load" effect of Javascript-enable menus, as well as loading only the relevant section of the page. (a CSS-only menu, I think, would reload the entire page). Is this possible?
It's possible with the help of Knockout.js and/or JQuery.
You could do it all with JQuery using the Tabs plugin provided by JQuery UI. You would have to write all of your own CSS so that you don't get the default "tabbed" look but something that resemble a menu.
Or, you could use Knockout.js to create a client-side view model with a set of commands that are bound to your menu items. Each command would then trigger a page update, most likely using JQuery.
Here's a very high-level example of how this might work starting with a basic menu:
<ul>
<li data-bind="menuOption1">
...
</li>
</li>
A Knockout.js view model
var MenuViewModel = function ()
{
this.menuOption1 = function () {
// TODO: show the discreet HTML page
}
}
ko.applyBindings(new MenuViewModel());
How you actually show the page is up to you. It's probably easiest to use a JQuery AJAX call to load the page contents.
How you make/style the menu does not have any effect on how the pages linked in the menu are loaded once clicked. In order to avoid a page reload upon click, you'll need to make an ajax request to that page and load it into your current page.
I suggest using jQuery's AJAX so as to avoid cross-browser issues.
Example:
$('#menu a').click(function(ev){
$.ajax({
url: "test.html",
cache: false
}).done(function( html ) {
$("#results").append(html);
});
ev.preventDefalt();
});
In my website I'm using the standard ASP.NET menu control. I already got so far as to write a custom control adapter to get rid of the rather tacky html output that is generated by the default control adapter.
One thing keeps buggering me though. Somehow ASP.NET is generating extra javascript that I don't want nor need for my menu controls, since I won't be using any of the dynamic features in the control. I replaced the control adapter, so it doesn't generate compatible HTML for that.
Anyone got an idea how I can prevent ASP.NET from generating the extra javascript for the menu control?
This problem cropped up for me after upgraded to ASP.net 4.0 with the installation of vs 2010. The fix is to either force the menu to render as a table or to turn off the new CSS/javascript "features" that 4.0 adds. Settings the menu's RenderingMode attribute to "Table" fixed this problem for me even though I use a Menu Adapter to render the control with lists.
<asp:Menu ID="mnuStuff" runat="server" RenderingMode="Table">
...
</asp:Menu>
You can do this site wide setting controlRenderingCompatibilityVersion to 3.5 in the web.config:
<system.web>
<pages controlRenderingCompatibilityVersion="3.5"/>
</system.web>
This will eliminate the rendering of inline javascript that asp injects in the base of the page.
If you prefer to stick with ASP.Net 4.0 control rendering you can create a custom menu (derived from System.Web.UI.WebControls.Menu) and replace the OnPreRender:
public class MyCustomMenu : Menu
{
protected override void OnPreRender(EventArgs e)
{
// Don't call base OnPreRender
//base.OnPreRender(e);
}
}
That did the trick.
An alternative way to get rid of the menu startup script is to call RegisterStartup script method before the Menu PreRender event, using the same script key, and outputting dummy (or empty) script.
This relies on internal implementation details of the Menu Type discovered using Reflector, so is somewhat fragile.
For example, a static class that looks something like:
static MenuHelper
{
private static Type _rendererType =
typeof(Menu).Assembly.GetType(
typeof(Menu).FullName + "+MenuRendererStandards"
);
public static void RemoveMenuScript(Menu menu)
{
string dummyScript = "<!-- Removed Menu Startup script -->";
string key = "_registerMenu_" + menu.ClientID;
ScriptManager.RegisterStartupScript(menu, _rendererType, key, dummyScript, false);
}
}
You then just need to make sure you call MenuHelper.RemoveMenuScript(menu) before the menu's PreRender event.
The OP is using an Adapter so Tim Santeford's answer is better in his situation. But if you want to render a static menu as a list without the startup code, and without the effort of writing an adapter, this might be an alternative.
<script type="text/javascript">
Sys.WebForms.Menu = "";
</script>
it works..
use it in aspx page
I just plan to ask about a similar question after 2 hours of search and have no luck.
What I want is to use the jquery superfish plugin as I want its animation for smooth looking. And with the ASP.NET generated javascript, the superfish just won't work.
And finally I try to set the ASP.NET Menu's control's attribute Enabled = false
and the outcoming source becomes this:
new Sys.WebForms.Menu({ element: 'mysitemeun', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: **true** });
After tracing the code, setting it disabled still have some style changes in the Menu but it will not add event to the MenuItem. And the superfish's animation works now.
if (!this.container.disabled) {
Sys.WebForms.Menu._domHelper.addEvent(this.element, 'mouseover', Sys.WebForms.MenuItem._onmouseover);
Sys.WebForms.Menu._domHelper.addEvent(this.element, 'mouseout', Sys.WebForms.MenuItem._onmouseout);
}
I am using the example on the AJAX website for the DropDownExtender. I'm looking to make the target control (the label) have the DropDown image appear always, instead of just when I hover over it.
Is there any way to do this?
This can be done using the following script tag:
<script>
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
I found this and some other tips at this dot net curry example.
It works but I'd also consider writing a new control based on the drop down extender exposing a property to set the behaviour you want on or off.
Writing a new AJAX control isn't too hard, more fiddly than anything.