ASPxClientProgressBar.SetPosition(position) Method

Sets the position of the operation’s progress.

Declaration

SetPosition(
    position: number
): void

Parameters

Name	Type	Description
position	number	The progress position.

Example

In this example, the ASPxProgressBar control is used to visualize the progress of a file upload initiated within the ASPxUploadControl. The ASPxClientUploadControl.UploadingProgressChanged client event of the ASPxUploadControl is handled, to supply the ASPxProgressBar control with current progress information. Using the ASPxProgressBar as a separate control, allows placing it at any desired position within the page.

JS

function OnBtnUploadClick(s, e){
            if(uploadControl.GetText() != ""){
                lblCompleteMessage.SetVisible(false);
                pbUpload.SetPosition(0);
                uploadControl.Upload();
                btnUpload.SetEnabled(false);
                pnlProgress.SetVisible(true);
            }
        }

        function OnUploadProgressChanged(s, e){
            pbUpload.SetPosition(e.progress);
        }

        function OnFileUploadComplete(s, e){
            if(e.isValid){
                btnCancel.SetVisible(false);
                btnUpload.SetEnabled(true);
                pbUpload.SetPosition(100);
                lblCompleteMessage.SetVisible(true);
            }
            else{
                btnUpload.SetEnabled(true);
                pnlProgress.SetVisible(false);
            }
        }

        function OnBtnCancelClick(s, e){
            uploadControl.Cancel();
            btnUpload.SetEnabled(true);
            pnlProgress.SetVisible(false);
        }

        function OnUploadControlTextChanged(s, e){
            btnUpload.SetEnabled(s.GetText() != "");
        }

ASPX

...
    <dxe:ASPxLabel ID="lblFileSizeMessage" runat="server" 
                 Text="The size of a file to upload shouldn't be greater than 5000 Kb." 
    CssClass="smallMessage" />
...
    <dxuc:ASPxUploadControl ID="uc" ClientInstanceName="uploadControl" runat="server">
        <ClientSideEvents UploadingProgressChanged="OnUploadProgressChanged" 
                                 FileUploadComplete="OnFileUploadComplete"
        TextChanged="OnUploadControlTextChanged" />
    </dxuc:ASPxUploadControl>
...
    <dxe:ASPxButton ID="btnUpload" ClientInstanceName="btnUpload" runat="server" Text="Upload"
    AutoPostBack="False">
        <ClientSideEvents Click="OnBtnUploadClick" />
    </dxe:ASPxButton>
...
    <dxe:ASPxProgressBar ID="pbUpload" ClientInstanceName="pbUpload" runat="server" Width="200px"
    Height="23px" />
...
    <dxe:ASPxButton ID="btnCancel" ClientInstanceName="btnCancel" runat="server" Text="Cancel"
    AutoPostBack="False">
        <ClientSideEvents Click="OnBtnCancelClick" />
    </dxe:ASPxButton>
...
    <dxe:ASPxLabel ID="lblCompleteMessage" ClientInstanceName="lblCompleteMessage" 
                ClientVisible="False" runat="server" Text="Upload completed" />
...