Show progress bar on Submit using AsyncUpload within RadGrid

1 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    135 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
    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" AllowSorting="True"
        Width="100%"  AutoGenerateColumns="False" GridLines="None"
        OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">
            <Columns>
                <telerik:GridTemplateColumn DataField="ID" HeaderText="Image" UniqueName="Upload">
                    <ItemTemplate>
                        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1"
                            OnFileUploaded="RadAsyncUpload1_FileUploaded" 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>
     
     
    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid2" AllowSorting="True"
        Width="100%"
        AutoGenerateColumns="False" GridLines="None"
        OnNeedDataSource="RadGrid1_NeedDataSource">
     
        <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">
            <Columns>
                <telerik:GridTemplateColumn DataField="ID" HeaderText="Image" UniqueName="Upload">
                    <ItemTemplate>
                        <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1"
                            OnFileUploaded="RadAsyncUpload1_FileUploaded" 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>
Back to Top