How to use the Upload To populate a Grid

Thread is closed for posting
6 posts, 0 answers
  1. Dan Harvey
    Dan Harvey avatar
    67 posts
    Member since:
    Jul 2008

    Posted 17 Jan 2012 Link to this post

    Hello,

    I want to use the files selected from the Upload control to populate a grid.

    below is my code, please provide examples I had trouble following the documentation...It wasn't exactly what I wanted, I want the same interface of selecting documents that the upload control provides, but I want to make a collection of those documents and then set it as the datasource for my grid.

    Here is my code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default3.aspx.cs" Inherits="MultiFileUploadPrototype.Default3" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2011.3.1305.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
      
    <head id="Head1" runat="server">
      
        <style type="text/css">
            .binaryImage img
            {
                border: 1px solid;
            }
        </style>
      
    </head>
      
    <body class="BODY">
      
        <form runat="server" id="mainForm" method="post">
      
            <!-- content start -->
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
      
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
              
                <script type="text/javascript">
                      
                    //On insert and update buttons click temporarily disables ajax to perform upload actions
                    function conditionalPostback(sender, eventArgs) {
                        var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
                        if (eventArgs.get_eventTarget().match(theRegexp)) {
                            var upload = $find(window['UploadId']);
      
                            //AJAX is disabled only if file is selected for upload
                            if (upload.getFileInputs()[0].value != "") {
                                eventArgs.set_enableAjax(false);
                            }
                        }
                    }
      
                    function validateRadUpload(source, e) {
                        e.IsValid = false;
      
                        var upload = $find(source.parentNode.getElementsByTagName('div')[0].id);
                        var inputs = upload.getFileInputs();
                        for (var i = 0; i < inputs.length; i++) {
                            //check for empty string or invalid extension
                            if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {
                                e.IsValid = true;
                                break;
                            }
                        }
                    }
      
                    var $ = $telerik.$;
      
                    function onClientFileUploaded(radAsyncUpload, args) {
                        //                    var $row = $(args.get_row());
                        //                    var categoryInputName = radAsyncUpload.getAdditionalFieldID("TextBox");
                        //                    var categoryInputType = "text";
                        //                    var categoryInputID = categoryInputName;
                        //                    var categoryInput = createInput(categoryInputType, categoryInputID, categoryInputName);
                        //                    var categoryLabel = createLabel(categoryInputID, "Category");
      
                        //                    var subCategoryInputName = radAsyncUpload.getAdditionalFieldID("ComboBox");
                        //                    var subCategoryInputID = subCategoryInputName;
                        //                    var subCategoryInput = createComboBox(subCategoryInputID);
                        //                    var subCategoryLabel = createLabel(subCategoryInputID, "Category");
      
                        //                    $row.append("<br/>");
                        //                    $row.append(categoryLabel);
                        //                    $row.append(categoryInput);
                        //                    $row.append("<br/>");
                        //                    $row.append(subCategoryLabel);
                        //                    $row.append(subCategoryInput);
                    }
      
                </script>
      
            </telerik:RadCodeBlock>
              
            <div class="FileDetails">
                <telerik:RadAsyncUpload runat="server" 
                                        id="RadAsyncUpload1"
                                        OnClientFileUploaded="onClientFileUploaded" 
                                        MultipleFileSelection="Automatic" 
                                        OnFileUploaded="RadAsyncUpload1_OnFileUploaded">
                </telerik:RadAsyncUpload>
            </div>
      
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="conditionalPostback">
      
                <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
                <telerik:RadProgressArea ID="RadProgressArea1" runat="server" />
      
                <telerik:RadGrid runat="server" 
                                 ID="RadGrid1" 
                                 AllowPaging="True" 
                                 AllowSorting="True"
                                 AutoGenerateColumns="False" 
                                 Width="97%" 
                                 ShowStatusBar="True"
                                 GridLines="None"
                                 PageSize="4" 
                                 OnItemDataBound="RadGrid1_ItemDataBound" 
                                 OnItemCreated="RadGrid1_ItemCreated" >
                      
                    <PagerStyle Mode="NumericPages" AlwaysVisible="true" />
      
                    <MasterTableView CommandItemDisplay="Top" 
                                     EditMode="InPlace" 
                                     AutoGenerateColumns="false" 
                                     AllowMultiColumnSorting="True" 
                                     EnableNoRecordsTemplate="False" 
                                     DataKeyNames="DocID" 
                                     IsFilterItemExpanded="False">
                          
                        <CommandItemTemplate>
                               <table width="100%">
                                    <tr>
                                           <td width="40px">
                                                <asp:linkbutton id="btnRefresh" runat="server" commandname="RebindGrid">
                                                <img id="imgRebindGrid" style="border: 0px; vertical-align: middle;" alt="Refresh Data"
                                                    runat="server" src="~/images/grids/refresh_small.gif" /></asp:linkbutton>
                                           </td>
                                           <td>
                                                    <asp:linkbutton id="btnClearSort" runat="server" commandname="ClearSort">
                                                    <img id="img1" style="border: 0px; vertical-align: middle;" alt="Clear Sorting"
                                                        runat="server" src="~/images/grids/Filter_Delete.gif" /></asp:linkbutton>
                                           </td>
                                           <td align="right">
                                                    Show  
                                                    <asp:dropdownlist ID="ddlFilterByDays" runat="server" Width="70px" commandname="filterbydays" AutoPostBack="true" >
                                                            <asp:ListItem Value="7">7 days</asp:ListItem>
                                                            <asp:ListItem Value="14">14 days</asp:ListItem>
                                                            <asp:ListItem Value="30">30 days</asp:ListItem>
                                                            <asp:ListItem Value="60">60 days</asp:ListItem>
                                                            <asp:ListItem Value="-1">ALL</asp:ListItem>
                                                    </asp:dropdownlist>         
                                            </td>
                                    </tr>
                               </table>
                        </CommandItemTemplate>
      
                        <Columns>
                              
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <asp:ImageButton ID="btnEdit" ToolTip="Edit Record" runat="server" CausesValidation="False" CommandName="EditItem" ImageUrl="~/Images/Grids/edit_pencil_small.gif" />
                                </ItemTemplate>  
                            </telerik:GridTemplateColumn>
      
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <asp:ImageButton ID="btnDelete" ToolTip="Delete Record" runat="server" CausesValidation="False"
                                                     CommandName="DeleteItem" OnClientClick="return GetUserConfirmForItemDelete(event);"
                                                     ImageUrl="~/Images/Delete.gif" />
                                                              
                                </ItemTemplate>             
                            </telerik:GridTemplateColumn>
      
                            <telerik:GridBoundColumn DataField="FileName" AllowFiltering="true" HeaderText="File Name" SortExpression="FileName" UniqueName="FileName" />
                          
                            <telerik:GridBoundColumn DataField="Category" AllowFiltering="true" HeaderText="Category" HeaderStyle-Wrap="true" SortExpression="Category" UniqueName="Category" />
                              
                            <telerik:GridBoundColumn DataField="SubCategory" AllowFiltering="true" HeaderText="Sub Category" HeaderStyle-Wrap="true" SortExpression="SubCategory" UniqueName="SubCategory" />
                              
                        </Columns>
      
                    </MasterTableView>
      
                    <ClientSettings>
                        <Selecting AllowRowSelect="false" /> 
                    </ClientSettings>
      
                </telerik:RadGrid>
      
            </telerik:RadAjaxPanel>
           
        </form>
    </body>
    </html>

    I have a class called uploadedDocument, which contains an ID, Name, Category and Subcategory.  How do I on the server side create a collection of this type based on the documents selected (for example, the document name I would use for the Name property and empty string for the other properties).

    Thanks,

    Thanks!
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 20 Jan 2012 Link to this post

    Hi Dan,

     
    Would you please try to explain how exactly the Using RadAsyncUpload in an Ajaxified Grid scenario is different from what you are trying to achieve since it is not very clear from the code? 

    All the best,
    Plamen Zdravkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan Harvey
    Dan Harvey avatar
    67 posts
    Member since:
    Jul 2008

    Posted 20 Jan 2012 Link to this post

    Hey,

    I was able to figure out the grid issue.

    However I can't figure out how to hide the rows of uploaded documents in the UploadAsync control.  I figured out how to add the files being uploaded into a grid control, but I can't figure out how to hide the rows being added to the UploadAsync control.

    I have attached screenshots to demo what i have and what im trying to accomplish.

    Screenshot 1 shows currently what I have.  You click the select button and select the documents you want to upload, and the rows are added above the UploadAsync and also to the grid control.

    Screenshot 2 shows what I want to accomplish.  You click the select button and select the documents you want to upload and the rows aren't added to the UploadAsync control but just the grid.

    Can this be accomplished?

    Thanks

  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 23 Jan 2012 Link to this post

    Hello Dan,

     
    You can try to accomplish this by using the following css:

    <style type="text/css">
        
       .ruInputs li
       {
           display:none ;
           }
          .ruInputs li:last-child
       {
           display:inherit !important;
           
        
       </style>
     
    Hope this helps.

    All the best,
    Plamen Zdravkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Dan Harvey
    Dan Harvey avatar
    67 posts
    Member since:
    Jul 2008

    Posted 23 Jan 2012 Link to this post

    Hey Plamen,

    Thank you for your response.  Initially setting this code hides the entire control.  I just want to hide the rows.  How can I do this?
  7. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 24 Jan 2012 Link to this post

    Hi Dan,

     
    You can try to hide it with this OnClientFileUploaded event:

    function OnClientFileUploaded(sender, args) {
     
              $telerik.$(args.get_row(), sender.get_element()).css("display", "none");
          }


    Hope this will help.

    Greetings,
    Plamen Zdravkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017