PDA

View Full Version : [CLOSED] Add field to Multiupload Grid



atroul
Jan 11, 2017, 4:04 PM
ok thanks! Got it! Sorry for the confusion.
Another question regarding MultiUpload is how I can add another field in the grid where its values come from a ComboBox.

24811

ComboBox code:

<ext:ComboBox ID="ComboBox12"
runat="server"
Editable="false"
DisplayField="type"
QueryMode="Local"
ForceSelection="true"
TriggerAction="All"
Text="Type"
EmptyText="Select a type...">
<Store>
<ext:Store ID="DDTypesStore" runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="type" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Change OnEvent="ComboBox_Change">
<ExtraParams>
<ext:Parameter Name="type" Value="newValue" Mode="Raw" />
</ExtraParams>
</Change>
</DirectEvents>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="list-item">
{type}
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>

fabricio.murta
Jan 11, 2017, 5:13 PM
Hello @atroul!

As we are touching a new subject (despite under the same component), I deliberately moved your post to a new thread. Let's keep different subjects in different threads for future reference, right? Hope you don't mind!

About adding the other field, you can just add it to the model and column to fit the field, but I don't really get what you mean with


add another field where its values come from a ComboBox

You want to change that combo box and its value show in the whole grid? I don't really see much point on that.

By the sample code+screenshot you provided, seems what you want is to specify the file type in the combo box and allow only that type of file to be selected? That would be a problem, say, you add files of a given type, then switch, then add other file types, then try to upload all files.

The grid in the example is just an ordinary grid panel, and it uses multiupload's events to fill the grid's records as the files are added.

atroul
Jan 12, 2017, 8:11 AM
Hello Fabricio and thanks for the fast replies.
What I want is:
When you upload some files you use the combobox to select their type (type1, type2, ..., typeN).
I want to put that value in the grid also. As you can see in the screenshot all the fields are ok except the type field.

24813

I tried to modify this function with no luck:

var fileSelected = function (item, file) {
this.up('grid').store.add({
id: file.id,
name: file.name,
type: file.type, //<--------------------
size: file.size,
status: 'Pending',
progress: 0
});
};

fabricio.murta
Jan 12, 2017, 7:06 PM
Hello @atroul!

In the same example we are using as base for this thread (http://examples4.ext.net/#/MultiUpload/Basic/Grid/), you can see how they use the updateRecord() function to set up the contents of the grid as the upload status changes.

You don't need the ExtraParams on your combobox event, cause it passes the selected value once you select something on the combobox by default.

You don't need the event to be server-side (direct event) as you probably already have the information you need in the combo box (the description string and ID of the file type), so you should be using a <Listener> block instead of a <DirectEvent> one in your combo box.

Then, as I suppose you added the corresponding field to the model of the grid (besides the column you show in your screenshot), all you have to do is call updateRecord() for each grid row with the field name and the value you just chose in the combobox. All that in the change event handler of the combo box.

I tried to highlight the important keywords to make it easier to follow. If this does not help, share the full test case (you probably modifying it from the example linked above, right? that should be simple enough), so we can talk about what to change in which lines or just reply the same test case with the fixes.

Hope to hear back from you soon!

atroul
Jan 13, 2017, 9:27 AM
Hello Fabricio,

I want to set up the Type fields in the grid when FileSelected fires. So someone first selects the type that wants to upload, then he
will select the files for upload and then he will see the files' list and their info in the grid and then he will click upload.
I want to keep the <DirectEvent> because I need that value in CodeBehind because I am storing the name and the type of the file
in a database and I populate an another grid not showing in the photo.
The code as you thought is exactly the same with this example (http://examples4.ext.net/#/MultiUpload/Basic/Grid/) I just removed some buttons and added the ComboBox which I posted in first post.

Thank you very much again

fabricio.murta
Jan 14, 2017, 9:16 PM
Hello @atroul!

The code below was modified from the example you pointed and I am confident that it contains all aspects you would need to implement the grid the way you need:



<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
fileTypeCBStore.DataSource = new object[]
{
new { id = 1, desc = "All files", ext = "*" },
new { id = 2, desc = "Executables", ext = "exe" },
new { id = 3, desc = "Text", ext = "txt" },
new { id = 4, desc = "Spreadsheet", ext = "xls" }
};
fileTypeCBStore.DataBind();

fileTypeCB.Select(0);
}
}
protected void MultiUpload1_FileUpload(object sender, FileUploadEventArgs e)
{
X.Msg.Notify("File is uploaded", "Name: " + e.FileName).Show();
}

/// <summary>
/// Handles the file upload when successfully finished (and handled by the
/// MultiUpload1_FileUpload() above).
/// </summary>
/// <param name="sender"></param>
/// <param name="e">Event container with extra parameters transmitted.</param>
protected void HandleUploadSuccess(object sender, DirectEventArgs e)
{
string fileName, fileType;

#region Handle exceptions
try
{
fileName = e.ExtraParams.GetParameter("filename").Value;
}
catch (Exception ex)
{
throw new Exception("The 'filename' parameter was not specified.");
}

try
{
fileType = e.ExtraParams.GetParameter("filetype").Value;
}
catch (Exception ex)
{
throw new Exception("The 'filetype' parameter was not specified.");
}
#endregion Handle exceptions

X.Msg.Alert("upload complete", "the upload of the '" + fileType + "' file '" + fileName + "' has completed successfully.").Show();
}

public object[] SupportedFileTypes = new object[]
{
new { id = 1, desc = "All files", ext = "*" },
new { id = 2, desc = "Executables", ext = "exe" },
new { id = 3, desc = "Text", ext = "txt" },
new { id = 4, desc = "Spreadsheet", ext = "xls" }
};
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Grid MultiUpload - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var loadFailed = function () {
alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative");
};

var statusIconRenderer = function (value) {
switch (value) {
default:
return value;
case 'Pending':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Hourglass") + '" width=16 height=16>';
case 'Sending':
return '<div src="x-loading-indicator" width=16 height=16>';
case 'Error':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>';
case 'Cancelled':
case 'Aborted':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>';
case 'Uploaded':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Tick") + '" width=16 height=16>';
}
};

var updateRecord = function (id, field, value) {
var rec = App.UploadGrid.store.getById(id);

rec.set(field, value);
rec.commit();
};

var abortUpload = function (btn) {
var selModel = btn.up('grid').getSelectionModel(),
records;

if (!selModel.hasSelection()) {
Ext.Msg.alert('Error', 'Please select an upload to cancel');
return true;
}

records = selModel.getSelection();
App.MultiUpload1.abortUpload(records[0].getId());
};

var removeUpload = function (btn) {
var selModel = btn.up('grid').getSelectionModel(),
records;

if (!selModel.hasSelection()) {
Ext.Msg.alert('Error', 'Please select an upload to remove');
return true;
}

records = selModel.getSelection();
App.MultiUpload1.removeUpload(records[0].getId());
};

var fileSelected = function (item, file) {
// Example of cancelling a file
if (file.name == 'image.jpg') {
Ext.Msg.alert('Error', 'You cannot upload the file named "image.jpg"');
return false;
}

this.up('grid').store.add({
id: file.id,
name: file.name,
filetype: App.fileTypeCB.getSelectedRecord().data.desc,
size: file.size,
status: 'Pending',
progress: 0
});
};

var uploadError = function (item, file, errorCode, message) {
updateRecord(file.id, 'progress', 0);
updateRecord(file.id, 'status', 'Error');

switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
alert("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
alert("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
alert("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
alert("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
alert("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
alert("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
updateRecord(file.id, 'status', 'Cancelled');
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
updateRecord(file.id, 'status', 'Stopped');
break;
default:
updateRecord(file.id, 'status', "Unhandled Error: " + errorCode);
alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
};

var fileSelectionError = function (item, file, errorCode, message) {
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
return;
}

switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
alert("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
alert("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
alert("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
default:
alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
};

// Handle selecting entries in the file type combo box.
var fileTypeSelectHandler = function (item, records) {
var ext = records[0].data.ext,
desc = records[0].data.desc;

App.MultiUpload1.fileTypes = "*." + ext;
App.MultiUpload1.multiUpload.setFileTypes("*." + ext, desc + " (*." + ext + ")");
}

// Given the queued file handle, get its ID and from this, fetch the extension description
// bound to the file record entry in the grid.
var getCurrentFileTypeDesc = function(file) {
var grid = App.UploadGrid,
retVal = null;

return App.UploadGrid.store.getById(file.id).data.filetyp e;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />

<ext:GridPanel
ID="UploadGrid"
runat="server"
Width="920"
Height="300"
Frame="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="name" />
<ext:ModelField Name="filetype" />
<ext:ModelField Name="size" />
<ext:ModelField Name="status" />
<ext:ModelField Name="progress" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="File Name" DataIndex="name" Width="150" />
<ext:Column runat="server" Text="File Type" DataIndex="filetype" Width="150" />
<ext:Column runat="server" Text="Size" DataIndex="size" Width="60">
<Renderer Format="FileSize" />
</ext:Column>
<ext:Column runat="server" Text="&nbsp;" DataIndex="status" Width="30">
<Renderer Fn="statusIconRenderer" />
</ext:Column>
<ext:Column runat="server" Text="Status" DataIndex="status" Width="60" />
<ext:ProgressBarColumn runat="server" Text="Progress" DataIndex="progress" />
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:MultiUpload
ID="MultiUpload1"
runat="server"
OnFileUpload="MultiUpload1_FileUpload"
FileDropAnywhere="true"
FileSizeLimit="15 MB"
FileTypes="*.*"
FileTypesDescription="All Files"
FileUploadLimit="100"
FileQueueLimit="0">
<Listeners>
<SwfUploadLoadFailed Fn="loadFailed" />
<FileSelected Fn="fileSelected" />
<UploadStart Handler="updateRecord(file.id, 'status', 'Sending');" />
<UploadProgress Handler="updateRecord(file.id, 'progress', bytesComplete / bytesTotal);" />
<UploadComplete Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" />
<UploadAborted Handler="updateRecord(file.id, 'status', 'Aborted');" />
<UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.id));" />
<UploadError Fn="uploadError" />
<FileSelectionError Fn="fileSelectionError" />
</Listeners>
<DirectEvents>
<UploadSuccess OnEvent="HandleUploadSuccess">
<ExtraParams>
<%-- This requires special function binding and parameters' transmission so that
the values are resolved at run time.
The grid is NOT the same component as the MultiUpload, but an auxiliary
component, so data from it must be fetched indirectly. --%>
<ext:Parameter Name="filename" Value="Ext.Function.bind(function(file) { return file.name; }, this, [file])" Mode="Raw" />
<ext:Parameter Name="filetype" Value="Ext.Function.bind(getCurrentFileTypeDesc, this, [file])" Mode="Raw" />
</ExtraParams>
</UploadSuccess>
</DirectEvents>
</ext:MultiUpload>

<ext:ToolbarSeparator />

<ext:ComboBox
runat="server"
ID="fileTypeCB"
FieldLabel="File Type"
DisplayField="desc"
ValueField="ext">
<Store>
<ext:Store runat="server" ID="fileTypeCBStore">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="desc" />
<ext:ModelField Name="ext" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="fileTypeSelectHandler" />
</Listeners>
</ext:ComboBox>
<ext:Button
runat="server"
Text="Start Upload"
Icon="Tick"
Handler="#{MultiUpload1}.startUpload();" />
<ext:Button
runat="server"
Text="Abort"
Icon="Decline"
Handler="abortUpload" />
<ext:Button
runat="server"
Text="Abort All"
Icon="Decline"
Handler="#{MultiUpload1}.abortAllUploads();" />
<ext:Button
runat="server"
Text="Remove"
Icon="Delete"
Handler="removeUpload" />
<ext:Button
runat="server"
Text="Remove All"
Icon="Delete"
Handler="#{MultiUpload1}.removeAllUploads();" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>


Hope this helps!

atroul
Jan 16, 2017, 2:36 PM
Hello Fabricio,

I tried to fit your example in my code but I wasn't able. I am really novice on ext.
The file type is not depended on the extension but on what the user selects from the dropdown menu.
For example File Type can be "Document", "Photo", "Spreadsheet" etc.
Isn't easier to populate the "Type" grid column from the dropdown in client's side?
Is there a way to do that? So I can keep the <DirectEvent> to pass the FileType in CodeBehind to store it in my DB
and use the selected type in client's side to populate the grid.

Thank you very much

fabricio.murta
Jan 16, 2017, 6:09 PM
Hello!

The grid is being populated by client-side (fileSelected function, lines 130-135). If you need various extensions for a given type, instead of "*.exe" for example you can use "*.exe; *.com; *.bat" in, maybe, a switch case or ifs in the fileTypeSelectHandler function, which switches multiupload's selected file extensions.

If you don't care about the extension, just remove the fileTypeSelectHandler function (lines 206-209 and 323-325).

The example is also passing the file type then the upload success direct event triggers (line 295 with the help of 214-221).

I hope this helps!

atroul
Jan 17, 2017, 10:26 AM
Hello Fabricio,
still not working... here is my code:


<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
DDTypesStore.DataSource = new object[]
{
new { id = 1, type = "type1" },
new { id = 2, type = "type3" },
new { id = 3, type = "type5" },
new { id = 4, type = "type7" }
};
DDTypesStore.DataBind();

cmbType.Select(0);
}
}

public int i = 0;
protected void DocUpload_FileUpload(object sender, FileUploadEventArgs e)
{
X.Msg.Notify("File is uploaded", "Name: " + e.FileName).Show();
}

/// <summary>
/// Handles the file upload when successfully finished (and handled by the
/// MultiUpload1_FileUpload() above).
/// </summary>
/// <param name="sender"></param>
/// <param name="e">Event container with extra parameters transmitted.</param>
protected void HandleUploadSuccess(object sender, DirectEventArgs e)
{
string fileName, fileType;

#region Handle exceptions
try
{
fileName = e.ExtraParams.GetParameter("filename").Value;
}
catch (Exception ex)
{
throw new Exception("The 'filename' parameter was not specified.");
}

try
{
fileType = e.ExtraParams.GetParameter("type").Value;
}
catch (Exception ex)
{
throw new Exception("The 'filetype' parameter was not specified.");
}
#endregion Handle exceptions

X.Msg.Alert("upload complete", "the upload of the '" + fileType + "' file '" + fileName + "' has completed successfully.").Show();
}

protected void ComboBox_Change(object sender, DirectEventArgs e)
{
typeSelected = e.ExtraParams["type"];
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Grid MultiUpload - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var loadFailed = function () {
alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative");
};

var statusIconRenderer = function (value) {
switch (value) {
default:
return value;
case 'Pending':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Hourglass") + '" width=16 height=16>';
case 'Sending':
return '<div src="x-loading-indicator" width=16 height=16>';
case 'Error':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>';
case 'Cancelled':
case 'Aborted':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>';
case 'Uploaded':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Tick") + '" width=16 height=16>';
}
};

var updateRecord = function (id, field, value) {
var rec = App.UploadGrid.store.getById(id);

rec.set(field, value);
rec.commit();
};

var removeUpload = function (btn) {
var selModel = btn.up('grid').getSelectionModel(),
records;

if (!selModel.hasSelection()) {
Ext.Msg.alert('Error', 'Please select an upload to remove');
return true;
}

records = selModel.getSelection();
App.MultiUpload1.removeUpload(records[0].getId());
};

var fileSelected = function (item, file) {
// Example of cancelling a file
if (file.name == 'image.jpg') {
Ext.Msg.alert('Error', 'You cannot upload the file named "image.jpg"');
return false;
}

this.up('grid').store.add({
id: file.id,
name: file.name,
type: App.cmbType.getSelectedRecord().data.type,
size: file.size,
status: 'Pending',
progress: 0
});
};

var uploadError = function (item, file, errorCode, message) {
updateRecord(file.id, 'progress', 0);
updateRecord(file.id, 'status', 'Error');

switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
alert("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
alert("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
alert("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
alert("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
alert("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
alert("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
updateRecord(file.id, 'status', 'Cancelled');
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
updateRecord(file.id, 'status', 'Stopped');
break;
default:
updateRecord(file.id, 'status', "Unhandled Error: " + errorCode);
alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
};

var fileSelectionError = function (item, file, errorCode, message) {
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
return;
}

switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
alert("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
alert("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
alert("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
default:
alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
};

// Handle selecting entries in the file type combo box.
var fileTypeSelectHandler = function (item, records) {
var ext = records[0].data.ext,
desc = records[0].data.desc;

App.MultiUpload1.fileTypes = "*." + ext;
App.MultiUpload1.multiUpload.setFileTypes("*." + ext, desc + " (*." + ext + ")");
}

// Given the queued file handle, get its ID and from this, fetch the extension description
// bound to the file record entry in the grid.
var getCurrentFileTypeDesc = function(file) {
var grid = App.UploadGrid,
retVal = null;

return App.UploadGrid.store.getById(file.id).data.filetyp e;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />
<div>
<ext:Viewport runat="server" StyleSpec="background-color: transparent:" Layout="BorderLayout>
<Items>
<ext:GridPanel
ID="UploadGrid"
runat="server"
Flex="3"
Region="South"
Frame="true">
<Store>
<ext:Store ID="FileUploadStore runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="name" />
<ext:ModelField Name="type" />
<ext:ModelField Name="size" />
<ext:ModelField Name="status" />
<ext:ModelField Name="progress" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column2" runat="server" Text="File Name" DataIndex="name" Width="150" />
<ext:Column ID="Column3" runat="server" Text="Size" DataIndex="size" Width="120">
<Renderer Format="FileSize" />
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Type" DataIndex="type" Width="120" />
<ext:Column ID="Column5" runat="server" Text="&nbsp;" DataIndex="status" Width="60">
<Renderer Fn="statusIconRenderer" />
</ext:Column>
<ext:Column ID="Column6" runat="server" Text="Status" DataIndex="status" Width="120" />
<ext:ProgressBarColumn ID="ProgressBarColumn1" runat="server" Text="Progress" DataIndex="progress" />
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:MultiUpload
ID="DocUpload"
runat="server"
OnFileUpload="DocUpload_FileUpload"
FileDropAnywhere="true"
FileSizeLimit="15 MB"
FileTypes="*.*"
FileTypesDescription="All Files"
FileUploadLimit="100"
FileQueueLimit="0">
<Listeners>
<SwfUploadLoadFailed Fn="loadFailed" />
<FileSelected Fn="fileSelected" />
<UploadStart Handler="updateRecord(file.id, 'status', 'Sending');" />
<UploadProgress Handler="updateRecord(file.id, 'progress', bytesComplete / bytesTotal);" />
<UploadComplete Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" />
<UploadAborted Handler="updateRecord(file.id, 'status', 'Aborted');" />
<UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.id));" />
<UploadError Fn="uploadError" />
<FileSelectionError Fn="fileSelectionError" />
</Listeners>
<DirectEvents>
<UploadSuccess OnEvent="HandleUploadSuccess">
<ExtraParams>
<%-- This requires special function binding and parameters' transmission so that
the values are resolved at run time.
The grid is NOT the same component as the MultiUpload, but an auxiliary
component, so data from it must be fetched indirectly. --%>
<ext:Parameter Name="filename" Value="Ext.Function.bind(function(file) { return file.name; }, this, [file])" Mode="Raw" />
<ext:Parameter Name="type" Value="Ext.Function.bind(getCurrentFileTypeDesc, this, [file])" Mode="Raw" />
</ExtraParams>
</UploadSuccess>
</DirectEvents>
</ext:MultiUpload>
<ext:ToolbarSeparator />
<ext:Button ID="Button1"
runat="server"
Text="Start Upload"
Icon="Tick"
Width="170"
Handler="#{DocUpload}.startUpload();" />
<ext:ComboBox ID="DDTypeComboBox"
runat="server"
Editable="false"
DisplayField="type"
QueryMode="Local"
ForceSelection="true"
TriggerAction="All"
Text="Type"
EmptyText="Select a type...">
<Store>
<ext:Store ID="DDTypesStore" runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="type" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Change OnEvent="ComboBox_Change">
<ExtraParams>
<ext:Parameter Name="type" Value="newValue" Mode="Raw" />
</ExtraParams>
</Change>
</DirectEvents>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="list-item">
{type}
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
<ext:Button ID="Button2"
runat="server"
Text="Remove All"
Icon="Delete"
Width="170"
Handler="#{DocUpload}.removeAllUploads();" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</Items
</ext:Viewport>
</div>
</form>
</body>
</html>

fabricio.murta
Jan 17, 2017, 8:32 PM
Hello @atroul!

What exactly is not working? Can you point steps to reproduce what didn't come as you needed?

atroul
Jan 18, 2017, 8:56 AM
Hello Fabricio,

well when I select the type from the combobox and then select the files to upload, the 'type' column in the
UploadGrid is empty, not taking the type value that I selected in the combobox

fabricio.murta
Jan 18, 2017, 7:55 PM
Hello! You saying with the example I provided you don't get the result I'm getting in the screenshot below?

24820

I tested this with bot Ext.NET 4.1 stock and latest github snapshot and get the very same result on both. Both IE11 and Chrome 55.0 works the same. If this code sample does not fill the grid panel I suggest you create a clean/empty project, install the NuGet package and check the code again, it must work with current Ext.NET versions.

atroul
Jan 19, 2017, 1:35 PM
Hello Fabricio,
my mistake, it worked as expected! Thank you very much!
Is it possible to select the type after its selected? So you select the rows of the files that you want to
change the type and then change the dropdown menu and updates the type and then you can upload them

fabricio.murta
Jan 19, 2017, 11:12 PM
Hello @atroul!

Please, if we are going to change the subject, would you mind opening a new thread?

But yes, you can do this. You should just try with the example you already have and understand it, then I'm sure you will be able to make it work. If you find any problems implementing this, please open a new thread and post the code (as simplified as you can make it). I believe you won't need to open a thread for this at all, but we'll be glad to help if you run into trouble trying this.