Show progress bar on Submit using AsyncUpload within RadGrid

3 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    519 posts

    Posted 04 Dec 2017 Link to this post

    Requirements

    Telerik Product and Version

    3.5+

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    JavaScript

    PROJECT DESCRIPTION 
    This sample demonstrates the manual upload operation using RadAsyncUpload implemented in RadGrid. Select the desired files, and start the upload on button Click. There are two scenarios in this sample, those are uploading all asynchronously and uploading one after the other.

    RadAsyncUpload in RadGrid

    Steps to recreate the scenario:
    1. Create a RadGrid
    2. Create a GridTemplateColumn and add a RadAsyncUpload to its ItemTemplate
    3. Create a button anywhere outside of the grid which will start the Upload
    4. Use JavaScript to make RadAsyncUpload start the upload on submit/click.

     

    JavaScript

    Copy Code

    // Upload All Async
    function uploadAllAsync(sender, args) {
        var grid = $find('<%=RadGrid1.ClientID %>');
        var masterTable = grid.get_masterTableView();
        traverseUploadAll(masterTable);
    }
    
    function traverseUploadAll(gridTableView) {
        var dataItems = gridTableView.get_dataItems();
        for (var i = 0; i < dataItems.length; i++) {
            dataItems[i].findControl("AsyncUpload1").startUpload();
        }
    }
    
    // Upload Items one by one (per row)
    function uploadPerRow(sender, args) {
        var grid = $find('<%=RadGrid2.ClientID %>');
        var masterTable = grid.get_masterTableView();
        startRowUpload(masterTable, 0);
    }
    function startRowUpload(masterTable, index) {
        var item = masterTable.get_dataItems()[index];
        var asyncUpload = item.findControl("AsyncUpload1");
    
        if (asyncUpload._selectedFilesCount < 1) {
            startRowUpload(masterTable, ++index)
            return false;
        }
    
        function filesUploaded() { /* Event handler for AsyncUpload after file upload has finished */
            for (var i = ++index; i < masterTable.get_dataItems().length; i++) {
                var nextItem = masterTable.get_dataItems()[i];
                if (nextItem.findControl("AsyncUpload1")._selectedFilesCount > 0) {
                    startRowUpload(masterTable, i);
                    break;
                }
            }
        }
        asyncUpload.startUpload();
        asyncUpload.add_filesUploaded(filesUploaded);
    }

     

    Markup

    Copy Code

    <div class="gridContainer">
        <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" AllowSorting="True"
            Width="100%" AutoGenerateColumns="False" GridLines="None"
            OnNeedDataSource="RadGrid_NeedDataSource">
            <MasterTableView CommandItemDisplay="Top" DataKeyNames="OrderID">
                <Columns>
                    <telerik:GridTemplateColumn DataField="OrderID" HeaderText="Image" UniqueName="Upload">
                        <ItemTemplate>
                            <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1" ManualUpload="true">
                            </telerik:RadAsyncUpload>
                        </ItemTemplate>
                        <EditItemTemplate>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <br />
        <br />
        <telerik:RadButton ID="RadButton1" runat="server" Text="Upload All Asynchronously" AutoPostBack="false" OnClientClicked="uploadAllAsync">
        </telerik:RadButton>
    </div>
    <div class="gridContainer">
        <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid2" AllowSorting="True"
            Width="100%"
            AutoGenerateColumns="False" GridLines="None"
            OnNeedDataSource="RadGrid_NeedDataSource">
    
            <MasterTableView CommandItemDisplay="Top" DataKeyNames="OrderID">
                <Columns>
                    <telerik:GridTemplateColumn DataField="OrderID" HeaderText="Image" UniqueName="Upload">
                        <ItemTemplate>
                            <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1" ManualUpload="true">
                            </telerik:RadAsyncUpload>
                        </ItemTemplate>
                        <EditItemTemplate>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <br />
        <br />
        <telerik:RadButton ID="RadButton2" runat="server" Text="Upload One After The Other" AutoPostBack="false" OnClientClicked="uploadPerRow">
        </telerik:RadButton>
    </div>

     

  2. jpa
    jpa avatar
    5 posts
    Member since:
    May 2007

    Posted 18 Dec 2019 Link to this post

    I would just like to control the state of the mentioned button. Thanks. 
  3. Attila Antal
    Admin
    Attila Antal avatar
    519 posts

    Posted 13 Feb Link to this post

    Hi Joe,

    I want to help assist with your query, and for that please open a formal support ticket. There we can discuss the requirements and issues you are experiencing.

    The Code Library site was intended to share samples of custom scenarios that are not included out of the box with the Control.

    Kind regards,
    Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.