This is a migrated thread and some comments may be shown as answers.

How to use the Upload To populate a Grid

5 Answers 124 Views

Upload (Obsolete)

This is a migrated thread and some comments may be shown as answers.

Dan Harvey asked on 17 Jan 2012, 07:34 PM

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">

<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!

5 Answers, 1 is accepted

answered on 20 Jan 2012, 05:21 PM

Screenshot1.jpg

Screenshot2.jpg

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

answered on 23 Jan 2012, 01:52 PM

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