Is there a way to have two or more open panes on an AJAX accordion control? The page will default to both panes open and user can close pane if desired.
According to the AJAX Control Toolkit description page:
The Accordion is a web control that allows you to provide multiple
panes and display them one at a time
So, no is the answer to your question. You could use Collapsible Panels, which is what the Accordion control is made up of. You can have multiple instances of those visible at one time.
Use the repeater control.
Inside repeater, use accordion.
I want opposite functionality, found out this while fixing someone's code.
First, you need to use this script:
function ToggleAccordionPane(paneno) {
$find('MyAccordion_AccordionExtender')._changeSelectedIndex(-1);
if( $find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display == "block") {
$find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display = "none";
$find('MyAccordion_AccordionExtender')._changeSelectedIndex(paneno);
}
else {
$find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display = "block";
}
return false;
}
Then, modify first header like this:
<Header>1. Accordion</Header>
For second and third pane:
<Header>2. AutoSize</Header>
<Header><a href="" class="accordionLink" onclick="ToggleAccordionPane(2);" >3. Control or Extender</a></Header>
Source:
http://www.c-sharpcorner.com/uploadfile/Zhenia/keeping-multiple-panes-open-in-accordion-web-control/
Related
like I can eliminate the botton (Find and Clean) of a GridControl, and alone to leave TextEdit.
regards
Alex
You can use the approach demonstrated in How to customize the Find Panel layout? example:
Create the GridControl/GridView descendant components
Override the GridView.CreateFindPanel method to provide your
own customized FindControl instance into the view.
Yes it is possible. you will need to access the FindControl and then access the layoutControl and its Control Items. Use the Code below in form_load etc:
// Get the Find Control on Grid : gcMain
FindControl _FindControl = gcMain.Controls.Find("FindControl", true)[0] as FindControl;
//Get the Layout Control
LayoutControl lc = (_FindControl.ClearButton.Parent as LayoutControl);
//Allow Control Hiding
lc.Root.AllowHide = true;
//Hide Find Button
(lc.Root.Items[2] as LayoutControlItem).ContentVisible = false;
//Hide Clear Button
(lc.Root.Items[3] as LayoutControlItem).ContentVisible = false;
I have created an Accordion dynamically and added AccordionPanes through backend with respective controls and data click here to view my problem and how I solved it. I have added a link button in each AccordionPane but now I want to add a click event so that I can access data in that specific pane and I need to use functions to populate data.
I create my controls in the page_init event.
How can I go about doing this?
I have come across a solution that is almost the same as what I want to do.
One way to achieve this is by adding the event handlers with Javascript Like this:
function pageLoad()
{
var accordionControl = $find('Accordion1_AccordionExtender');
accordionControl.add_selectedIndexChanging(PaneChanging);
accordionControl.add_selectedIndexChanged(PaneChanged);
}
function PaneChanged(sender, args)
{
alert('In Changed handler.');
}
function PaneChanging(sender, args)
{
alert('In Changing hanlder.');
}
A similar question has been posted here
The specific control you would be looking for is:
$addHandler(header, "click", acc._headerClickHandler);
I am trying to get a report based on different information located in tabs. How do I know If a tab is selected? I looked for something like:
if(colorListTab.isSelected)
{
}
but no luck! Can you guys help me out with this?
You could use the ActiveTab property, for example(in ActiveTabChanged):
if(TabContainer1.ActiveTab.Equals(colorListTab)){
}
or you could use the ActiveTabIndex:
if(TabContainer1.ActiveTabIndex == 1){ //second tab
}
http://www.dotnetcurry.com/ShowArticle.aspx?ID=178
Try using ActiveTabChanged event
Also please have a look at this question AJAX ToolKit TabContainer: Can I capture the “Active Tab Panel Changing” event
The property you're looking for is "ActiveTab", a property of the actual TabContainer (not an individual tab)
if(colorListTabContainer.ActiveTab.TabIndex == 1)
{
//You only get here if the index of the active tab is 1
}
Seems like this should be easy but I must just be missing something... I have a Telerik RadGrid on a page that allows inline editing. How do I programatically put the grid into edit mode to insert a new row into the grid. When the page loads I would like show the existing data and also display 1 empty row that a user can easily type into to add a new record to the table. (I don't want them to have to push the add new button)
Found the answer while back.... updating this in case others need it
RadGrid1.MasterTableView.IsItemInserted = true;
RadGrid1.Rebind();
Lifesaver!!
You can set
radGrid1.MasterTableView.IsItemInserted = false;
radGrid1.Rebind();
that will remove the inserted item (like pressing cancel).
If you need show inset form always you can use next:
protected void NeedDataSource(object sender, GridNeedDataSourceEventArgs e) {
parametersGrid.DataSource = data;
parametersGrid.MasterTableView.IsItemInserted = true;
}
You could try using jQuery to press your add button once the page is ready.
Something along the lines of -
$(document).ready(function() {
$("#addButton").click();
}
What I did when I wanted to do the same with the Telerik grid is to set the MasterTableView.IsItemInserted property of the control to true inside the OnNeedDataSource event handler. I suppose that it should work if you set the property inside the OnDataBound grid handler as well.
Dick
RefreshGrid(userName, "priority", true, false);
RadGrid radGrid = RadGrid1;
radGrid.MasterTableView.InsertItem();
radGrid.Rebind();
Scenario: I have an .aspx page containing multiple collapsible panels. Each panel represents a different report. To run a report, you click a panel and the report's user controls will appear. The date range control I created could be contained "within" more than one panel.
The code below does not work in the multiple panels instance. It sets all of the "to date" text boxes equal to the start date instead of just the active panel's "to date" text box.
How do I only work with the text boxes in the panel I have expanded?
Thanks for your help!
<script type="text/javascript">
$(document).ready(function(){
$('#dFrom').datepicker();
$('#dTo').datepicker();
$('#dTo').click(function(){
try{
var from = $('#dFrom').datepicker("getDate");
$('#dTo').datepicker("setDate",from);
}
catch(Error)
{
alert(Error);
}
});
});
Firstly, you shouldn't be using IDs for any html element that exists more than once, use classes to identify repeating elements instead.
To answer your question, you need to use $(this) to point at the specific element the click event is coming from. You can then simply query the date picker the event is called from by asking for its sibling.
$(document).ready(function(){
$('.dTo').click(function(){
var from = $(this).siblings('.dFrom').datepicker("getDate");
$(this).datepicker("setDate",from);
});
});
I don't know your actual HTML structure so you may have to alter how the siblings are discovered, but hopefully you get the idea.
You need to get a little more relative with your selector syntax. I see you're using the id of each field -- is this shortened from the ASP.Net UniqueID? Because that's definitely not how it would look.
Rather than manually lookup the id, let ASP.Net make of it what it will and find them the jQuery way:
$(Function() {
$('input[id$=dFrom]').datepicker();
$('input[id$=dTo]').datepicker();
$('.panel').each(function() { //replace with appropriate selector syntax for your panels
$(this).click(function() {
var from = $('input[id$=dFrom]',this).datepicker("getDate");
$('input[id$=dTo]',this).datepicker("setDate",from);
});
});
});