We want to be able to manage a list of documents in a MVC grid.
Essentially, the user should be able to select the document type from a dropdown,select a document to upload and when the user clicks save, the document gets saved to the database.
When the user views the grid, the document will provide a link to download the document. Can you please advise if this is doable?
15 Answers, 1 is accepted
Hello Man,
Yes, the scenario is possible to achieve with the Kendo UI Grid and Upload widgets. The following example project demonstrates a similar one, that you could use as a base and modify further.
Regards,Dimiter Madjarov
Telerik
Rank 1
Hi Dimiter,
many thanks for your email .My biggest sticking point was having a column as a hyperlink which allows users to click on the link so they can download the uploaded document to their local machine
Hello Man,
This could be achieved similarly to the way the images are displayed in the example project i.e. using a client template that shows the link and uses the bound property as the file download path.
E.g.
columns.Bound(c => c.ImageUrl).ClientTemplate("<img src='" + Url.Content("~/CategoryImage/") + "/>");Dimiter Madjarov
Telerik
Rank 1
Hi Dimiter,
My apologies. I should have clarified earlier. We are planning to store the doucments in the database so that it is easier to manage
Hello Man,
We have demonstrated a sample approach for uploading files to a database and listing them in a Grid in the following example project. The current scenario seems similar to it.
Regards,Dimiter Madjarov
Telerik
Rank 1
Hi Dimiter,
Many thanks for your solution. That helped. Just had a small question on those lines. I want the user to select a ​document type and upload the file when they want to add the file. Can you please help with this?
All the examples I found deal only with the upload tool in isolation but not as a form where you select the file and it uploads it finally when a button is clicked along with other controls
Hello Man,
I would suggest to use the Upload widget select event. It receives an e.files parameter representing the selected files. You could use this parameter to check the extension of the file and prevent the select event if it does not match the condition.
Regards,Dimiter Madjarov
Telerik
Rank 1
Sorry Dimiter.
Essentially what i meant is we have a form where the user selects a document type which relates more to a category of documents from a dropdown.
so essentially we have a form which has a dropdown where the user says he is uploading a document of X category and selects the file. he then presses the submit button which should then trigger the save/upload function with both values so we can save both the file data and the category
Hello Man,
In this case you could use the upload event handler of the widget and send the document category type as additional metadata with the file. The approach is demonstrated on the following page.
Regards,Dimiter Madjarov
Telerik
Rank 1
Thanks Dimiter.
1 more thing. I have used the upload control on my grid popup edit form.
I have done the following
1. User selects category of document which enables the select control
2. User selects a file which triggers the upload Action on the Controller and uploads the file to a local directory
3. I have set a hidden field to be populated with the path from the controller
4. The upload control runs through the onSuccess function and sets the value in the hidden field but still shows "Uploading"
How do i set the text to say "Done"
My View
@(Html.Kendo().Upload()
.Name("files")
.Multiple(false)
.Enable(false)
.Events(file => file.Upload("onUpload")
.Success("onSuccess"))
.Async(file => file.Save("Upload", "Documentation"))
.ShowFileList(false) // Hide the file list as we're displaying uploaded files in the Grid
)
Jquery =
function onUpload(e) {
e.data = {
documentType: $("#DocumentType").val()
};
}
function onSuccess(e) {
$("#DocumentName").val(e.response.fullDocumentName);
}
​
Please assist
Rank 1
Also, When I click Update on the Add form, it does pass all the values to the back end but does not pass the DocumentName value in the model.
ALternatively, is there any way I can possibly get the details of the file that has been selected for the upload
Hello Man,
If all files are finished uploading, the label of the widget should automatically switch to "Done". It is not clear what is causing the issue with it in the current case. If this problem is still reproducing, please send us an isolated runnable example that demonstrates it, so we could inspect it locally.
Regarding the second question, here is a possible approach for passing additional data to the back end. The linked example demonstrates the approach for the read action, but the same could be used for Update/Create too. Nevertheless I am not sure if this is needed, since the file is already uploaded and it's details could be accessed directly on the server side.
Dimiter Madjarov
Telerik
Rank 1
Hi Dimiter,
The reason I uploaded to the server was as an interim measure. I think I could possilby use the Data method. Just a final question. Is there a way to access the HttpPostedFileBase file from upload control and pass it through as if there is then I can just do nothing on the upload action and just return a blank and do the upload (to db) in the update/create actions as there are a few validations that need to be carried out on other values before I can upload.
Rank 1
Hi Dimiter,
Is there a way I can send you the code in a secure manner as I cannot post it on the public forums and it will take me a lot of time to send an isolated example
Hello Man,
If the current question is whether the file can be send along with the rest of the Grid data during Update/Create action, this is not supported. The Grid sends the data via Ajax request and using such to upload a file is not possible.
Regarding the second question, you could open a separate support ticket and send us an example there, if you don't want to post it on the public forums.
Dimiter Madjarov
Telerik