Quantcast
Channel: AjaxControlToolkit Wiki & Documentation Rss Feed
Viewing all 275 articles
Browse latest View live
↧

Updated Wiki: AlwaysVisible Control

May 27, 2015, 2:23 am
$
0
0

AJAX Control Toolkit AlwaysVisible Control

The AlwaysVisible control extends any ASP.NET control and lets you pin it to the page so that it appears to float over the background body content when it is scrolled or resized. The extender keeps the position of the control a specified distance from the horizontal and vertical sides.

To avoid having the control flash and move when the page loads, you should specify absolute positioning for the control and specify the location.

See the AlwaysVisible Control in action

AlwaysVisible Tutorials

AlwaysVisible Reference

↧
Search

Updated Wiki: Creating a Simple Accordion

June 19, 2015, 6:47 am
$
0
0

Creating a Simple Accordion

In this tutorial, you learn how to add an AJAX Control Toolkit Accordion to a page and show three panes of content. There are four steps: (1) Add a ScriptManager (2) Add an Accordion (3) Add AccordionPanes (4) Add Accordion styles.

To learn how to install the AJAX Control Toolkit, see the Step-by-Step Installation Guide page.

Add a ScriptManager

Before you can use any of the AJAX Control Toolkit controls in a page, you first need to add a ScriptManager to the page. You can drag the ScriptManager from the Visual Studio Toolbox window onto the page. The ScriptManager is located in the AJAX Extensions tab under the Toolbox.

<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>

Add an Accordion

Next, in source view, you need to add an Accordion control. You can drag the Accordion control from the Toolbox or type the tag yourself:

<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><ajaxToolkit:AccordionID="Accordion1"runat="server"></ajaxToolkit:Accordion>

Add AccordionPanes

Next, in source view, add one or more AccordionPane controls. The Accordion displays a single AccordionPane at a time. Notice that each AccordionPane contains both a header and content tag.

<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><ajaxToolkit:AccordionID="Accordion1"runat="server"><Panes><ajaxToolkit:AccordionPanerunat="server"><Header>Pane 1</Header><Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.            
        </Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane1"runat="server"><Header>Pane 2</Header><Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane2"runat="server"><Header>Pane 3</Header><Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>

Add Accordion Styles

An Accordion without any Cascading Style Sheet styles applied to it does not look very nice. The final step is to add one or more styles to the Accordion control:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionSimple.Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Simple Accordion</title><styletype="text/css">
        .accordion {
            width: 400px;
        }
        
        .accordionHeader {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }
        
        .accordionHeaderSelected {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #5078B3;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }
        
        .accordionContent {
            background-color: #D3DEEF;
            border: 1px dashed #2F4F4F;
            border-top: none;
            padding: 5px;
            padding-top: 10px;
        }
    </style></head><body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><ajaxToolkit:AccordionID="Accordion1"CssClass="accordion"HeaderCssClass="accordionHeader"HeaderSelectedCssClass="accordionHeaderSelected"ContentCssClass="accordionContent"runat="server"><Panes><ajaxToolkit:AccordionPanerunat="server"><Header>Pane 1</Header><Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.            
        </Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane1"runat="server"><Header>Pane 2</Header><Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane2"runat="server"><Header>Pane 3</Header><Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion></div></form></body></html>

Notice that the page contains the definition of four Cascading Style Sheet classes named accordion, accordionHeader, accordionHeaderSelected, and accordionContent. These styles are applied to the Accordion control by setting the CssClass, HeaderCssClass, HeaderSelectedCssClass, and ContentCssClass properties.

Click here to see the Accordion control in action
↧
↧

Updated Wiki: Displaying a Fixed Panel

June 19, 2015, 6:49 am
$
0
0

Displaying a Fixed Panel with the AlwaysVisible Control Extender

In this tutorial, you learn how to use an AlwaysVisible control extender to cause a Panel control to appear statically in a page. There are four steps: (1) Add a ToolkitScriptManager (2) Add a Panel (3) Add an AlwaysVisible control extender (4) Add Cascading Style Sheet styles.

To learn how to install the Ajax Control Toolkit, see the Download & Install page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>

Add a Panel

Next, you need to add a standard ASP.NET Panel control to the page. The Panel control contains the content that you want to appear statically

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Panel1"CssClass="staticPanel"runat="server"><h2>Hello World!</h2></asp:Panel>

Add the AlwaysVisible Control Extender

Next, in order to cause the Panel control to be always visible at the top-right corner of your page, add an AlwaysVisible control extender to the page. Notice that the TargetControlID property of the AlwaysVisible control points at the Panel control.

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Panel1"CssClass="staticPanel"runat="server"><h2>Hello World!</h2></asp:Panel><asp:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"TargetControlID="Panel1"VerticalSide="Top"VerticalOffset="10"HorizontalSide="Right"HorizontalOffset="10"runat="server"/>

Add Styles

Finally, in order to improve the appearance of the Panel control, you should style the Panel control with Cascading Style Sheet styles. 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="AlwaysVisible_Simple" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Simple AlwaysVisible</title><styletype="text/css">
        html {
            background-color: #cccccc;   
        }
        
        .staticPanel {
             width: 150px;
             background-color: White;  
             border: solid 1px black;
             padding: 10px; 
        }
    
    </style></head><body><formid="form1"runat="server"><div><asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Panel1"CssClass="staticPanel"runat="server"><h2>Hello World!</h2></asp:Panel><asp:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"TargetControlID="Panel1"VerticalSide="Top"VerticalOffset="10"HorizontalSide="Right"HorizontalOffset="10"runat="server"/><p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </p><p>
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
    </p><p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
    </p></div></form></body></html>

Click here to see the AlwaysVisible control in action
↧

Updated Wiki: Creating a Yellow Fade Effect

June 19, 2015, 6:53 am
$
0
0

Creating a Yellow Fade Effect

In this tutorial, you learn how create a yellow fade effect by taking advantage of the Ajax Control Toolkit Animation control. Using a yellow fade effect is a good way to draw attention to a specific area of a page.

You can create a yellow fade effect by completing the following steps: (1) Add a ToolkitScriptManager (2) Add a Panel (3) Add a LinkButton (4) Add an Animation control.

To learn how to install the Ajax Control Toolkit, see the Download & Install page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>

Add a Panel

The Panel control contains the content that you want to highlight with the yellow fade effect. In the following code, the Panel contains a simple text message:

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Message"runat="server">
Pay attention to me!
</asp:Panel>

Add a LinkButton

We'll use a LinkButton control to initiate the animation. Notice that the LinkButton includes an OnClientClick property that prevents the LinkButton from causing a postback:

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Message"runat="server">
Pay attention to me!
</asp:Panel><asp:LinkButtonID="lnkYellowFade"OnClientClick="return false;"runat="server">Play Animation</asp:LinkButton>

Add an Animation Control

The final step is to add the Animation control. When you click the LinkButton, the Animation control uses a Color animation to create the yellow fade effect.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="Animation_Simple" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Yellow Fade</title><styletype="text/css">
    
    #Message {
        width: 250px;
        padding: 10px;   
        margin-bottom:10px;
    }
    
    </style></head><body><formid="form1"runat="server"><div><asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits=&qpan>asp:Panel><asp:LinkButtonID="lnkYellowFade"OnClientClick="return false;"runat="server">Play Animation</asp:LinkButton><asp:AnimationExtenderID="AnimationExtender1"TargetControlID="lnkYellowFade"runat="server"><Animations><OnClick><Sequence><ColorAnimationTarget="Message"Duration="2"Property="style"PropertyKey="backgroundColor"StartValue="#FFFF66"EndValue="#FFFFFF"/></Sequence></OnClick></Animations></asp:AnimationExtender></div></form></body></html>

Click here to see the Animation control in action
↧

Updated Wiki: Displaying a Simple Auto-Complete TextBox

June 19, 2015, 6:55 am
$
0
0

Creating a Simple Auto-Complete TextBox

In this tutorial, you learn how to apply an AutoCompleteExtender control to a TextBox in order to display auto-complete suggestions as you type.

We'll create an auto-complete TextBox by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an AutoCompleteExtender (4) Add a page method.

To learn how to install the Ajax Control Toolkit, see the Download & Install page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>

Add a TextBox Control

The AutoCompleteExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.

Next, change the ID of the TextBox control to txtMovie. You can change the ID in the Properties Window. The resulting source code looks like this:

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:TextBoxID="txtMovie"runat="server"></asp:TextBox>

Add an AutoCompleteExtender

The next step is to apply an AutoCompleteExtender control to the TextBox. Add the following AutoCompleteExtender control to your page:

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:TextBoxID="txtMovie"runat="server"></asp:TextBox><asp:AutoCompleteExtenderID="AutoCompleteExtender1"TargetControlID="txtMovie"runat="server"/>

Add a Page Method

The final step is to create a method that returns the auto-complete suggestions. You can return auto-complete suggestions from an ASMX Web service, a WCF Web service, or a static page method. We use a static page method.

SmartTag.png

The easiest way to add the static page method is to click on the Add AutoComplete page method smart tag option. Selecting this menu option will create a new page method named GetCompletionList:

VB
<System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()>
PublicSharedFunction GetCompletionList(ByVal prefixText AsString, ByValcountAsInteger, ByVal contextKey AsString) AsString()
  ReturnNothingEndFunction

C#
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
publicstaticstring[] GetCompletionList(string prefixText, int count, string contextKey) {
    returndefault(string[]);
}

VB
<System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()>
PublicSharedFunction GetCompletionList(ByVal prefixText AsString, ByValcountAsInteger, ByVal contextKey AsString) AsString()
	' Create array of moviesDim movies() AsString = {"Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II"}

	' Return matching moviesReturn (
	    From m In movies
	    Where m.StartsWith(prefixText,StringComparison.CurrentCultureIgnoreCase)
	    Select m).Take(count).ToArray()
EndFunction

C#
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
publicstaticstring[] GetCompletionList(string prefixText, int count, string contextKey) {
    // Create array of moviesstring[] movies = {"Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II"};

    // Return matching moviesreturn (from m in movies where m.StartsWith(prefixText,StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();
}

The following TextBox illustrates how the AutoCompleteExtender works. Enter the text Star into the TextBox and you will get matching suggestions.

Auto-Complete TextBox

By default, the AutoCompleteExtender will not display suggestions until after you have typed at least 3 characters. You can change this default behavior by modifying the AutoCompleteExtender MinimumPrefixLength property.
↧
↧

Updated Wiki: Displaying a Simple Popup Calendar

June 19, 2015, 6:58 am
$
0
0

Displaying a Simple Popup Calendar

In this tutorial, you learn how to display a popup calendar when someone moves focus to a TextBox. You can use the calendar to select a particular date.

We'll create the popup calendar by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an CalendarExtender

To learn how to install the Ajax Control Toolkit, see the Download & Install page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.
<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>

Add a TextBox Control

The CalendarExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.

Next, change the ID of the TextBox control to txtStartDate. You can change the ID in the Properties window. The resulting source code looks like this:

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:TextBoxID="txtStartDate"runat="server"></asp:TextBox>

Add a CalendarExtender

The next step is to apply a CalendarExtender control to the TextBox. Add the following CalendarExtender control to your page:

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:TextBoxID="txtStartDate"runat="server"></asp:TextBox><asp:CalendarExtenderID="CalendarExtender1"TargetControlID="txtStartDate"runat="server"/>

The following TextBox illustrates how the CalendarExtender works. Click or tab into the TextBox and the popup calendar will appear:

Click here to see the Calendar control in action
↧

Updated Wiki: Accordion Control Reference

June 30, 2015, 5:50 am
$
0
0

Accordion Reference

 

Accordion Server Reference

The Accordion control represents a series of panes that can be viewed one at a time. The control is used to create "strongly typed" access to the AccordionBehavior. Its major purpose is to structure the content in a way that the AccordionBehavior can understand it.

Accordion Server Properties

NameDescription
AccordionExtenderReference to the AccordionExtender wrapped by the Accordion control
AutoSizeDetermine how growth of the Accordion will be controlled. If it is set to None, then the Accordion can grow as large or as small as necessary. If it is set to Limit, then the Accordion will always be less than or equal to its Height. If it is set to Fill then it will always be equal to its height.
ContentCssClassDefault Content CSS Class
ContentTemplateTemplate for the Content of databound panes
ControlsPrevent the Controls property from appearing in the editor (so that people will use the Panes collection instead)
DataMemberMember in the DataSource to bind to
DataSourceGets or sets the data source that provides data for populating the list of AccordionPanes.
DataSourceIDThe ID of the DataControl that this control should use to retrieve its data source. When the control is bound to a DataControl, it can retrieve a data source instance on-demand, and thereby attempt to work in auto-DataBind mode.
FadeTransitionsWhether or not to use a fade effect when transitioning between selected Accordion Panes
FramesPerSecondThe number of frames per second used in the transition animation effects. This is used to tune performance when using FadeTransition, a large number of Accordion Panes, etc.
HeaderCssClassDefault Header CSS Class
HeaderSelectedCssClassDefault selected Header CSS Class
HeaderTemplateTemplate for the Header of databound panes
IsBoundUsingDataSourceIDWhether or not the Accordion was databound using the DataSourceID property rather than setting the DataSource directly
PanesCollection of child panes in the Accordion
RequireOpenedPaneWhether or not clicking the header will close the currently opened pane (leaving all the Accordion's panes closed)
RequiresDataBindingWhether or not the control has already been databound, or still needs to be databound
SelectArgumentsArguments used to request data-related operations from data source controls when data is retrieved
SelectedIndexIndex of the AccordionPane to be displayed (this property must be set before OnPreRender)
SuppressHeaderPostbacksWhether or not we suppress the client-side click handlers of any elements (including server controls like Button or HTML elements like anchor) in the header sections of the Accordion.
TransitionDurationLength of the transition animation in milliseconds

Accordion Server Methods

NameDescription
ConstructorDefault constructor that tells ASP.NET to render it as a DIV
ClearPanesEmpty out the child Pane's collection
ConnectToDataSourceViewConnects this data bound control to the appropriate DataSourceView and hooks up the appropriate event listener for the DataSourceViewChanged event. The return value is the new view (if any) that was connected to. An exception is thrown if there is a problem finding the requested view or data source.
CreateChildControlsCreate the AccordionExtender and attach it to the div that will be generated for this control
CreateControlHierarchy(System.Boolean)Create the new control hierarchy of AccordionPanes (using the DataSource if specificed)
CreateDataSourceSelectArgumentsCreate the DataSourceSelectArguments (which just defaults to the Empty value because we don't want to sort, filter, etc.)
CreateItem(System.Object, System.Int32, AjaxControlToolkit.AccordionItemType, AjaxControlToolkit.AccordionContentPanel, System.Web.UI.ITemplate, System.Boolean)Create an AccordionPane's item (either Header or Content) and raise the ItemCreated event
DataBindBind the Accordion to its DataSource
DoSelect(System.Collections.IEnumerable)Select the data
EnsureDataBoundEnsure that the Accordion has been databound if it needed to be
FindControl(System.String)Override FindControl to look first at this control, then check each of its child AccordionPanes for the control
GetDataReturns an IEnumerable that is the DataSource, which either came from the DataSource property or from the control bound via the DataSourceID property.
OnBubbleEvent(System.Object, System.EventArgs)Wrap the CommandArgs of an ItemCommand event with AccordionCommandEventArgs
OnDataBinding(System.EventArgs)DataBind the Accordion to its panes
OnDataPropertyChangedThis method is called when DataMember, DataSource, or DataSourceID is changed.
OnDataSourceViewChanged(System.Object, System.EventArgs)Indicate that we need to be databound whenever the DataSourceView changes
OnInit(System.EventArgs)OnInit handler to wireup the Page's PreLoad event
OnItemCommand(AjaxControlToolkit.AccordionCommandEventArgs)Raise the ItemCommand event
OnItemCreated(AjaxControlToolkit.AccordionItemEventArgs)Raise the ItemCreatedEvent
OnItemDataBound(AjaxControlToolkit.AccordionItemEventArgs)Raise the ItemDataBound event
OnLoad(System.EventArgs)Connect to the DataSourceView and determine if we still need to do databinding
OnPagePreLoad(System.Object, System.EventArgs)OnPreLoad is used to determine whether or not we still need to databind the Accordion
OnPreRender(System.EventArgs)Mark the selected AccordionPane so it does not appear collapsed

Accordion Server Events

NameDescription
ItemCommandEvent to raise when a command is fired
ItemCreatedEvent to raise when an item (i.e. Pane's Header or Content) is created during data binding
ItemDataBoundEvent to raise when an item (i.e. Pane's Header or Content) is data bound

 

AccordionBehavior Client Reference

The AccordionBehavior is used to turn properly structured XHTML into an Accordion with panes that can expand one at a time.

AccordionBehavior Client Properties

NameDescription
AutoSizeAutoSize mode
CountPanes count
FadeTransitionsWhether or not to fade the accordion panes when transitioning
FramesPerSecondNumber of steps per second in the transition animations. The default value is 30 frames per second.
HeaderCssClassThis is the CSS class applied to each header.
HeaderSelectedCssClassThis is the CSS class applied to the selected header.
PaneGet a specific Accordion pane given its index. If no index is provided, get the currently selected pane.
requireOpenedPaneWhether or not clicking the header will close the currently opened pane (which leaves all the Accordion's panes closed)
SelectedIndexIndex of the currently selected Accordion section
suppressHeaderPostbacksWhether or not we suppress the client-side click handlers of any elements (including server controls like Button or HTML elements like anchor) in the header sections of the Accordion.
TransitionDurationLength of time to transition between Accordion sections in milleseconds. The default value is 250ms.

 

AccordionBehavior Client Methods

NameDescription
addPaneCreate a new Accordion pane given references to its header and content divs and add it to the _panes collection. We also wrap the content div in a new container div, add a click handler to the header div, etc.
disposeDispose of the AccordionBehavior
initializeThe initialize function is responsible for getting the selected index from the ClientState mechanism and walking the children of the behavior's target to find all of the accordion's child panes. It builds up a collection of the panes from the headers and content sections. Then we hide all the content sections that aren't selected and initialize the layout.
raiseSelectedIndexChangedRaise the selectedIndexChanged event
raiseSelectedIndexChangingRaise the selectedIndexChanging event

 

AccordionBehavior Client Events

NameDescription
selectedIndexChangedAdd an event handler for the selectedIndexChanged event
selectedIndexChangingAdd an event handler for the selectedIndexChanging event

 

↧

Updated Wiki: Contributors

June 30, 2015, 5:53 am
↧
Search

Updated Wiki: Contributors

June 30, 2015, 5:55 am
↧
↧

Updated Wiki: Contributors

June 30, 2015, 5:55 am
↧

Updated Wiki: Home

August 18, 2015, 10:29 am
$
0
0

AJAX Control Toolkit (maintained by DevExpress)

Update August 2015:

The ASP.NET AJAX Control Toolkit v15.1.3 is now available! 

Get the new installer from DevExpress.com (provides Visual Studio toolbox integration).

Or use the ASP.NET AJAX Control Toolkit Nuget package.

Learn about the v15.1.3 release here:

Blog: ASP.NET AJAX Control Toolkit - v15.1.3 - Maintenance update available

Check out these helpful articles:

Update May 2015:

The ASP.NET AJAX Control Toolkit v15.1.2 is now available! 

Learn about the v15.1.2 release here:

Blog: ASP.NET AJAX Control Toolkit - v15.1.2 - Nuget, bug fixes, and more

Update March 2015:

The ASP.NET AJAX Control Toolkit v15.1 is now available! Get the new installer from DevExpress.com:

If you've used the toolkit in the past, you also know that for quite some time, the project was poorly supported, with an ever growing list of critical issues. Seeing the demand for such a library and considering its current state, we approached Microsoft and suggested that we help bring the Toolkit back into a dependable and usable state. Needless to say, Microsoft agreed. The good news is that since we took on this responsibility, we've managed to clean up the codebase, introduced improved Visual Studio support, and fixed nearly 900 bugs.

Download the DevExpress Edition of the AJAX Control Toolkit today, evaluate it in your project and let us know what you think.

Watch the Getting Started video:

YouTube

 

Channel 9 Video: DevExpress maintains AjaxControlToolkit for ASP.NET WebForms Developers

Check out these helpful articles:

A great new installer makes the getting started experience much better:

Update September 2014:

The open sourced Ajax Control Toolkit now has a new owner: DevExpress. Please see the DevExpress announcement blog post for more details. Stay tuned for more updates coming soon.

The ASP.NET AJAX Control Toolkit is a classic set of ASP.NET WebForms extensions. It has been used in a huge number of existing projects and remains popular till now. The Toolkit contains more than 40 controls, including the HtmlEditor,  Accordion, AutoComplete, Calendar and ColorPicker controls integrated with the Visual Studio design time.


To view an interactive Web site that demonstrates each of the Ajax Control Toolkit controls, visit theAjax Control Toolkit Sample Site. The official website for the Ajax Control Toolkit -- which contains reference documentation, tutorials, and answers to frequently asked questions -- is located at http://www.asp.net/ajaxlibrary/.

.NET 3.5 version is no longer supported in v15.1

 

↧

Updated Wiki: testtesttest

September 9, 2015, 6:02 am
$
0
0
Table Heading 1 Table Heading 2 Table Heading 3
Row 1 - Cell 1 Row 1 - Cell 2 Row 1 - Cell 3
Row 2 - Cell 1 Row 2 - Cell 2 Row 2 - Cell 3
↧

Updated Wiki: Accordion

September 9, 2015, 6:54 am
$
0
0

Accordion (demo)

The Accordion control represents a series of panes that can be viewed one at a time. The control is used to create "strongly typed" access to the AccordionBehavior. Its major purpose is to structure the content in a way that the AccordionBehavior can understand it.

Methods

DataBind()
Bind the Accordion to its DataSource

FindControl(id)
Override FindControl to look first at this control, then check each of its child AccordionPanes for the control
Params:
  • id
    • Type:
    • Description:

Events

ItemCommand
Fires when a command is fired

ItemCreated
Fires when an item (i.e. Pane's Header or Content) is created during data binding

ItemDataBound
Fires when an item (i.e. Pane's Header or Content) is data bound

Properties

Name Description
AutoSize Determine how growth of the Accordion will be controlled. If it is set to None, then the Accordion can grow as large or as small as necessary. If it is set to Limit, then the Accordion will always be less than or equal to its Height. If it is set to Fill then it will always be equal to its height. The default is None.
ContentCssClass Default Content CSS Class
ContentTemplate Template for the Content of databound panes
Controls Prevent the Controls property from appearing in the editor (so that people will use the Panes collection instead)
DataMember Member in the DataSource to bind to
DataSource The data source that provides data for populating the list of AccordionPanes.
DataSourceID The ID of the DataControl that this control should use to retrieve its data source. When the control is bound to a DataControl, it can retrieve a data source instance on-demand, and thereby attempt to work in auto-DataBind mode.
FadeTransitions Whether or not to use a fade effect when transitioning between selected Accordion Panes. The default is false.
FramesPerSecond The number of frames per second used in the transition animation effects. This is used to tune performance when using FadeTransition, a large number of Accordion Panes, etc. The default is 30.
HeaderCssClass Default Header CSS Class
HeaderSelectedCssClass Default selected Header CSS Class
HeaderTemplate Template for the Header of databound panes
Panes Collection of child panes in the Accordion
RequireOpenedPane Whether or not clicking the header will close the currently opened pane (leaving all the Accordion's panes closed). The default is true.
SelectedIndex Index of the AccordionPane to be displayed (this property must be set before OnPreRender). The default is 0.
SuppressHeaderPostbacks Whether or not we suppress the client-side click handlers of any elements (including server controls like Button or HTML elements like anchor) in the header sections of the Accordion. The default is false.
TransitionDuration Length of the transition animation in milliseconds. The default is 500.

↧
↧

Updated Wiki: Calendar

September 14, 2015, 3:06 am
$
0
0

Calendar Extender (demo)

The Calendar control extender can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with a customizable date format and UI in a popup control.

Properties

Name Description
Animated Sets whether or not changing modes is animated. The default value is true
ClearTime Sets whether or not time should be cleared in edited date/time. The default value is false
CssClass The name of the Cascading Style Sheet class used to style the calendar.
DaysModeTitleFormat A format string used to display the Days Mode Title. The default value is MMMM, yyyy.
DefaultView The default view of the calender. The default value is Days.
EnabledOnClient Sets whether or not this behavior is available for the current element. The default value is true
EndDate The end date for a range.
FirstDayOfWeek The first day of the week. The default value is Default
Format A format string used to display the selected date. The default value is d
OnClientDateSelectionChanged A script that is executed when a new date is selected.
OnClientHidden A client script that is executed immediately after the calendar is hidden.
OnClientHiding A client script that is executed immediately before the calendar is hidden.
OnClientShowing A client script that is executed immediately before the calendar is displayed.
OnClientShown A client script that is executed immediately after the calendar is displayed.
PopupButtonID The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus.
PopupPosition The popup position of the calendar. The default value is BottomLeft.
SelectedDate The date that the calendar is initialized with.
StartDate The start date for a range.
TodaysDateFormat A format string used to display today's date. The default value is MMMM d, yyyy.

Client properties

animated
Sets whether or not changing modes is animated. The default is true
Getter name: get_animated()
Setter name: set_animated(value)

button
The button to use to show the calendar (optional).
Getter name: get_button()
Setter name: set_button(value)

clearTime
Determines whether or not time should be cleared in the edited date/time. The default is false
Getter name: get_clearTime()
Setter name: set_clearTime(value)

cssClass
The name of a CSS class used to style the calendar. The default value is ajax__calendar
Getter name: get_cssClass()
Setter name: set_cssClass(value)

dayCell
Gets a day cell at the specified row or column
Getter name: get_dayCell()

daysModeTitleFormat
A format string used to display Days Mode Title. The default value is MMMM, yyyy.
Getter name: get_daysModeTitleFormat()
Setter name: set_daysModeTitleFormat(value)

defaultView
The default view of the calender. The default value is Days.
Getter name: get_defaultView()
Setter name: set_defaultView(value)

enabled
Determines whether or not this behavior is available for the current element.
Getter name: get_enabled()
Setter name: set_enabled(value)

endDate
The end date for a range.
Getter name: get_endDate()
Setter name: set_endDate(value)

firstDayOfWeek
The first day of the week. The default value is Default
Getter name: get_firstDayOfWeek()
Setter name: set_firstDayOfWeek(value)

format
A format string used to display the selected date. The default value is d
Getter name: get_format()
Setter name: set_format(value)

isOpen
Determines whether or not the calendar is open. The default value is false
Getter name: get_isOpen()

popupPosition
The popup position of the calendar. The default is BottomLeft
Getter name: get_popupPosition()
Setter name: set_popupPosition(value)

selectedDate
A date that the calendar is initialized with.
Getter name: get_selectedDate()
Setter name: set_selectedDate(value)

startDate
The start date for the range.
Getter name: get_startDate()
Setter name: set_startDate(value)

todayButton
The button used to select today's date.
Getter name: get_todayButton()

todaysDate
The date to use for "Today".
Getter name: get_todaysDate()
Setter name: set_todaysDate(value)

todaysDateFormat
A format string used to display today's date. The default value is MMMM d, yyyy.
Getter name: get_todaysDateFormat()
Setter name: set_todaysDateFormat(value)

visibleDate
The date currently visible in the calendar.
Getter name: get_visibleDate()
Setter name: set_visibleDate(value)

Client methods

blur()
Blurs the calendar.

focus()
Focuses the calendar.

hide()
Hides the calendar.

show()
Shows the calendar.

Client events

dateSelectionChanged
Fires when calendar date selection is changed.
Add event handler method: add_dateSelectionChanged(handler)
Remove event handler method: remove_dateSelectionChanged(handler)
Raise event method: raise_dateSelectionChanged()

hidden
Fires after the calendar is hidden.
Add event handler method: add_hidden(handler)
Remove event handler method: remove_hidden(handler)
Raise event method: raise_hidden()

hiding
Fires when the calendar is being hidden.
Add event handler method: add_hiding(handler)
Remove event handler method: remove_hiding(handler)
Raise event method: raise_hiding()

showing
Fires when the calendar is being shown.
Add event handler method: add_showing(handler)
Remove event handler method: remove_showing(handler)
Raise event method: raise_showing()

shown
Fires after the calendar is shown.
Add event handler method: add_shown(handler)
Remove event handler method: remove_shown(handler)
Raise event method: raise_shown()

↧

Updated Wiki: Reference

September 14, 2015, 3:10 am
$
0
0
↧
Search

Updated Wiki: Reference

September 14, 2015, 3:11 am
$
0
0
↧

Updated Wiki: Accordion

September 14, 2015, 3:11 am
$
0
0

Accordion Control(demo)

The Accordion control represents a series of panes that can be viewed one at a time. The control is used to create "strongly typed" access to the AccordionBehavior. Its major purpose is to structure the content in a way that the AccordionBehavior can understand it.

Properties

Name Description
AutoSize Determines how to controll resizing of the Accordion. If it is set to None, then the Accordion can grow as large or as small as necessary. If it is set to Limit, then the Accordion will always be less than or equal to its Height. If it is set to Fill then it will always be equal to its height. The default is None.
ContentCssClass The default Content CSS class
ContentTemplate A template for the content of databound panes
Controls Prevent the Controls property from appearing in the editor (so that people will use the Panes collection instead)
DataMember A member in the DataSource to bind to
DataSource The data source that provides data for populating the list of AccordionPanes
DataSourceID The ID of the DataControl that this control should use to retrieve its data source. When the control is bound to a DataControl, it can retrieve a data source instance on demand, and thereby attempt to work in auto-DataBind mode.
FadeTransitions Whether or not to use a fade effect when transitioning between selected Accordion Panes. The default is false
FramesPerSecond The number of frames per second used in animation effects' transition. This is used to tune performance when using FadeTransition, a large number of Accordion Panes, etc. The default is 30.
HeaderCssClass The default Header CSS class
HeaderSelectedCssClass The default selected Header CSS Class
HeaderTemplate A template for the Header of databound panes
Panes A collection of child panes in the Accordion
RequireOpenedPane Whether or not clicking the header will close the currently opened pane (leaving all the Accordion's panes closed). The default is true
SelectedIndex Index of the AccordionPane to be displayed (this property must be set before OnPreRender). The default is 0
SuppressHeaderPostbacks Whether or not we suppress the client-side click handlers of any elements (including server controls like Button or HTML elements like anchor) in the header sections of the Accordion. The default is false
TransitionDuration Length of the transition animation in milliseconds. The default is 500

Methods

DataBind()
Bind the Accordion to its DataSource

FindControl(id)
Override FindControl to look first at this control, then check each of its child AccordionPanes for the control
Params:
  • id
    • Type: String
    • Description: ID of the control to find

Events

ItemCommand
An event to raise when a command is fired

ItemCreated
An event to raise when an item (i.e. Pane's Header or Content) is created during data binding

ItemDataBound
An event to raise when an item (i.e. Pane's Header or Content) is data bound

↧
↧

Updated Wiki: AjaxFileUpload

September 14, 2015, 3:11 am
$
0
0

AjaxFileUpload Control (demo)

AjaxFileUpload is an ASP.NET AJAX Control that allows you to asynchronously upload files to the server.

Properties

Name Description
AllowedFileTypes A comma-separated list of allowed file extensions. The default is an empty string.
ChunkSize The size of a chunk used by HTML5 to upload large files in bytes. The default is 4096.
IsInFileUploadPostBack This will be true when a postback will be performed from the control. This can be used to avoid execution of unnecessary code during a partial postback. The default is false.
MaximumNumberOfFiles A maximum number of files in an upload queue. The default is 10.
Mode How AjaxFileUpload displays a progress bar. The default is Auto.
OnClientUploadComplete The name of a JavaScript function executed on the client side after a file is uploaded successfully.
OnClientUploadCompleteAll The client script that executes when all of files in queue uploaded, or when user hits Cancel button to stop uploading
OnClientUploadError The name of a JavaScript function executed on the client side if the file upload failed.
OnClientUploadStart The name of a JavaScript function executed on the client side before any files are uploaded.
ServerPollingSupport Whether or not AjaxFileUpload supports server polling.
ThrobberID The ID of a control that is shown on the file upload. The throbber image is displayed for browsers that do not support the HTML5 File API or server-side polling.

Methods

SaveAs(fileName)
Saves the uploaded file with the specified file name
Params:
  • fileName
    • Type: String
    • Description: Name of the file to save

Events

UploadComplete
An event raised when the file upload is complete.

UploadCompleteAll
An event handler that will be raised when the UploadComplete event is raised in all files in an upload queue, or when a user presses the Cancel button to stop uploading.

UploadStart
An event raised when the file upload starts.

Client properties

allowedFileTypes
A comma-separated list of allowed file extensions.
Getter name: get_allowedFileTypes()
Setter name: set_allowedFileTypes(value)

chunkSize
The size of a chunk used by HTML5 to upload a large file in bytes.
Getter name: get_chunkSize()
Setter name: set_chunkSize(value)

maximumNumberOfFiles
A maximum number of files in an upload queue. Default value is 10.
Getter name: get_maximumNumberOfFiles()
Setter name: set_maximumNumberOfFiles(value)

mode
How AjaxFileUpload displays a progress bar.
Getter name: get_mode()
Setter name: set_mode(value)

postBackUrl
A url of the page where the control is located.
Getter name: get_postBackUrl()
Setter name: set_postBackUrl(value)

serverPollingSupport
Whether or not AjaxFileUpload supports server polling.
Getter name: get_serverPollingSupport()
Setter name: set_serverPollingSupport(value)

throbber
A control that is shown while a file is uploading. The throbber image is displayed for browsers that do not support the HTML5 File API or server-side polling.
Getter name: get_throbber()
Setter name: set_throbber(value)

Client methods

addFileToQueue(item)
The processor will call this method to add a selected file to the queue. It will return true if a file item is successfully added, otherwise, it returnes false.
Params:
  • item
    • Type: Object
    • Description: File to add to the queue

attachEvents(elements)
Attaches the click event hanlder to an upload button.
Params:
  • elements
    • Type: Object
    • Description: Collection of AjaxFileUpload visual elements

cancelUpload()
Cancels upload process.

confirmFileIsInvalid(fileItem)
Sends alert to a user that the file type is not acceptable. The processor uses this method after validation.
Params:
  • fileItem
    • Type: Object
    • Description: File trying to be added to queue

done()
Call this method when all files has been uploaded. This method will reset states of the control.

doneAndUploadNextFile(fileItem)
Marks fileItem as uploaded, and uploads the next file in a queue.
Params:
  • fileItem
    • Type: Object
    • Description: Uploaded file

enableControls(enable)
If set to true, it will set the control state to enabled (ready to upload), otherwise the control will be disabled and the button state turns to the Cancel button.
Params:
  • enable
    • Type: Boolean
    • Description: true to enable controls, otherwise false

fileTypeIsValid(fileType)
Checks whether the file type is allowed to be uploaded by checking it against the AlowedFileTypes property.
Params:
  • fileType
    • Type: String
    • Description: File extension

getCurrentFileItem()
Gets a file item based on the current file id.

getFileItem(id)
Get file in upload queue by ID
Params:
  • id
    • Type: Number
    • Description: File ID

getNextFile()
Gets a file in an upload queue by id.

removeFileFromQueueHandler(e)
Removes a file from the queue and updates user interface.
Params:
  • e
    • Type: Sys.Extended.UI.AjaxFileUpload.Item
    • Description: An item to remove

setAsUploading(fileItem)
Sets the file item status to uploading.
Params:
  • fileItem
    • Type: Sys.Extended.UI.AjaxFileUpload.Item
    • Description: Uploading file

setDefaultElementsLayout(elements)
Sets default elements layout during initializing.
Params:
  • elements
    • Type: Object
    • Description: Elements to set up

setFileStatus(fileItem, fileStatusText, text)
Sets file item status text.
Params:
  • fileItem
    • Type: Sys.Extended.UI.AjaxFileUpload.Item
    • Description: Uploading file
  • fileStatusText
    • Type: String
    • Description: Text displayed in file info container
  • text
    • Type: String
    • Description: Text displayed in status bar

setPercent(percent)
Sets upload percentage.
Params:
  • percent
    • Type: Number
    • Description: Upload percent

setStatusMessage(msg)
Sets a message in a status bar.
Params:
  • msg
    • Type: String
    • Description: Text to set

Client events

uploadComplete
Occurs when the file upload completes.
Add event handler method: add_uploadComplete(handler)
Remove event handler method: remove_uploadComplete(handler)
Raise event method: raise_uploadComplete()

uploadCompleteAll
An event handler that will be raised when the UploadComplete event is raised in all files in an upload queue, or when a user presses the Cancel button to stop uploading.
Add event handler method: add_uploadCompleteAll(handler)
Remove event handler method: remove_uploadCompleteAll(handler)
Raise event method: raise_uploadCompleteAll()

uploadError
An event handler raised when an upload error occurs.
Add event handler method: add_uploadError(handler)
Remove event handler method: remove_uploadError(handler)
Raise event method: raise_uploadError()

uploadStart
Occurs when the file upload starts
Add event handler method: add_uploadStart(handler)
Remove event handler method: remove_uploadStart(handler)
Raise event method: raise_uploadStart()

↧

Updated Wiki: AreaChart

September 14, 2015, 3:12 am
$
0
0

AreaChart Control(demo)

The AreaChart control allows rendering an area chart from one or more series of values.

Properties

Name Description
BaseLineColor Base line color
CategoriesAxis Comma-separated text for each category rendered below X axis
CategoryAxisLineColor Category axis line color
ChartType A chart type. The default value is Basic.
ClientSeries A list of series.
Series A list of series with designer support.
ValueAxisLineColor Value axis line color
ValueAxisLines Value axis lines count. The default value is 9

Client properties

baseLineColor
Color of a base line.
Getter name: get_baseLineColor()
Setter name: set_baseLineColor(value)

categoriesAxis
Comma-separated text for each category rendered below X axis
Getter name: get_categoriesAxis()
Setter name: set_categoriesAxis(value)

categoryAxisLineColor
Color of a category axis line.
Getter name: get_categoryAxisLineColor()
Setter name: set_categoryAxisLineColor(value)

chartHeight
Chart height in pixels. Default value is 300
Getter name: get_chartHeight()
Setter name: set_chartHeight(value)

chartTitle
A chart title.
Getter name: get_chartTitle()
Setter name: set_chartTitle(value)

chartTitleColor
Color of a chart title.
Getter name: get_chartTitleColor()
Setter name: set_chartTitleColor(value)

chartType
A type of chart. The default value is Basic.
Getter name: get_chartType()
Setter name: set_chartType(value)

chartWidth
Chart width in pixels. Default value is 300
Getter name: get_chartWidth()
Setter name: set_chartWidth(value)

clientSeries
A list of series.
Getter name: get_clientSeries()
Setter name: set_clientSeries(value)

theme
A CSS file name for AreaChart. The default value is 'AreaChart'.
Getter name: get_theme()
Setter name: set_theme(value)

valueAxisLineColor
Color of a value axis line.
Getter name: get_valueAxisLineColor()
Setter name: set_valueAxisLineColor(value)

valueAxisLines
Value axis lines count. The default value is 9.
Getter name: get_valueAxisLines()
Setter name: set_valueAxisLines(value)

Client methods

generateAreaChart()
Generates the AreaChart with the specified values

↧

Updated Wiki: AsyncFileUpload

September 14, 2015, 3:12 am
$
0
0

AsyncFileUpload Control (demo)

AsyncFileUpload is an ASP.NET AJAX Control that allows you to asynchronously upload files to the server. The file uploading results can be checked both on the server and client sides.

Properties

Name Description
CompleteBackColor The control's background color on upload complete. The default value is Lime.
ContentType Gets the name of a file on the client that is uploaded using the control.
ErrorBackColor The control's background color on an upload error. The default value is Red.
FailedValidation Whether validation is failed
FileBytes Uploaded file bytes
FileContent Gets a Stream object that points to an uploaded file to prepare for reading the content of the file.
FileName Gets the name of a file on the client that is uploaded using the control.
HasFile A bool value indicating whether the control contains a file
IsUploading Whether a file is being uploaded.
OnClientUploadComplete The name of a javascript function executed on the client side after a file is successfully uploaded.
OnClientUploadError The name of a javascript function executed on the client side if the file upload failed.
OnClientUploadStarted The name of a javascript function executed on the client side if the file upload started.
PersistFile Whether a file is stored in session. The default value is false.
PostedFile A HttpPostedFile object that provides access to the uploaded file
ThrobberID ID of a control that is shown while the file is being uploaded.
UploaderStyle The control's appearance style (Traditional, Modern). The default value is Traditional.
UploadingBackColor The control's background color when uploading is in progress. The default value is White.
Width The control's width (Unit). The default value is 355px.

Methods

ClearAllFilesFromPersistedStore()
Clears all uploaded files of a current control from session.

ClearFileFromPersistedStore()
Clears all uploaded files of current control from session

SaveAs(fileName)
Saves the content of an uploaded file.
Params:
  • fileName
    • Type: String
    • Description: Uploaded file name

Events

UploadedComplete
Fires when the file is successfully uploaded.

UploadedFileError
Fires when the uploaded file is corrupted.

Client properties

completeBackColor
The control's background color on upload complete. The default value - 'Lime'.
Getter name: get_completeBackColor()
Setter name: set_completeBackColor(value)

errorBackColor
The control's background color on upload error. The default value - 'Red'.
Getter name: get_errorBackColor()
Setter name: set_errorBackColor(value)

formName
Name of the form
Getter name: get_formName()
Setter name: set_formName(value)

hiddenField
Stores the file path.
Getter name: get_hiddenField()
Setter name: set_hiddenField(value)

innerTB
An inner throbber.
Getter name: get_innerTB()
Setter name: set_innerTB(value)

inputFile
Inputs an element with type='file'.
Getter name: get_inputFile()
Setter name: set_inputFile(value)

postBackUrl
Url that receives posted data relative to the form.
Getter name: get_postBackUrl()
Setter name: set_postBackUrl(value)

postBackUrl
A name of the form.
Getter name: get_postBackUrl()
Setter name: set_postBackUrl(value)

throbber
The control that is shown while the file is being uploaded.
Getter name: get_throbber()
Setter name: set_throbber(value)

uploadingBackColor
The control's background color when uploading is in progress. The default value - 'White'.
Getter name: get_uploadingBackColor()
Setter name: set_uploadingBackColor(value)

Client methods

setThrobber(value)
Set throbber visual style
Params:
  • value
    • Type: String
    • Description: Visual style value

Client events

uploadComplete
Occurs when file uploading is completed.
Add event handler method: add_uploadComplete(handler)
Remove event handler method: remove_uploadComplete(handler)
Raise event method: raise_uploadComplete()

uploadError
Fires when file uploading encounters an error
Add event handler method: add_uploadError(handler)
Remove event handler method: remove_uploadError(handler)
Raise event method: raise_uploadError()

uploadStarted
Occurs when file uploading starts.
Add event handler method: add_uploadStarted(handler)
Remove event handler method: remove_uploadStarted(handler)
Raise event method: raise_uploadStarted()

↧
Viewing all 275 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>