Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Upload > How to use the Upload To populate a Grid

Not answered How to use the Upload To populate a Grid

Feed from this thread
  • Dan Harvey avatar

    Posted on Jan 17, 2012 (permalink)

    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!

    Reply

  • Plamen Zdravkov Plamen Zdravkov admin's avatar

    Posted on Jan 20, 2012 (permalink)

    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

    Reply

  • Dan Harvey avatar

    Posted on Jan 20, 2012 (permalink)

    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

    Reply

  • Plamen Zdravkov Plamen Zdravkov admin's avatar

    Posted on Jan 23, 2012 (permalink)

    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

    Reply

  • Dan Harvey avatar

    Posted on Jan 23, 2012 (permalink)

    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?

    Reply

  • Plamen Zdravkov Plamen Zdravkov admin's avatar

    Posted on Jan 24, 2012 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Upload > How to use the Upload To populate a Grid
Related resources for "How to use the Upload To populate a Grid"

ASP.NET Upload Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]