We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding Uploadbox to the dialog editor template of a Html.EJ().Grid control.

Thread ID:

Created:

Updated:

Platform:

Replies:

119181 May 19,2015 10:22 AM UTC Sep 12,2016 12:29 PM UTC ASP.NET MVC 5
loading
Tags: Grid
Ryno
Asked On May 19, 2015 10:22 AM UTC

Hi,

I'm using the "Html.EJ().Grid" control with the EditMode set to "DialogTemplate". When the record being edited is displayed in the dialog, I'd like to, in addition to the default "Save" and "Cancel" buttons, also display an "@Html.EJ().Uploadbox" control, which would be used to upload a file associated with the current record.

Is it at all possible to add the Uploadbox control to the dialog?

Thanks

Sellappandi Ramu [Syncfusion]
Replied On May 20, 2015 02:16 PM UTC

Hi Jager,

Thanks for using Syncfusion products.

Based on your requirement we have created a sample by using upload box inside the edit template dialog. The sample can be downloaded from following link location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119181/GridEditWithUpload1730680780.zip

In the above sample we have used actionComplete and actionBegin events. The actionComplete event is to render the upload box inside the dialog before rendering the edit form and storing the upload data in the local storage for sending to controller.

The actionBegin is event for before sending the save or update request to controller, we are appending the upload data to grid edit data and send to controller for save the upload details in Database.

We have used the saveUrl and removeUrl properties to store and remove the existing file of uploaded file into the particular folder.

Please refer the following code snippet.

<script type="text/x-jsrender" id="columnTemplate">

<img style="width: 75px; height: 70px" src="/Content/ejThemes/images/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" />

</script>

<script type="text/template" id="template">

// Edit Template Form

</script>


@(Html.EJ().Grid<EmployeePhoto>("EmployeeGrid")

.Datasource(ds => ds.URL("GetEmployeeData").InsertURL("PerformInsert").UpdateURL("PerformUpdate").RemoveURL("PerformDelete").Adaptor(AdaptorType.UrlAdaptor))

.EditSettings(e => e.AllowEditing().AllowDeleting().AllowAdding().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"))

.ToolbarSettings(tool => tool.ShowToolbar().ToolbarItems(item =>

{

item.AddTool(ToolBarItems.Add);

item.AddTool(ToolBarItems.Edit);

item.AddTool(ToolBarItems.Delete);

item.AddTool(ToolBarItems.Update);

item.AddTool(ToolBarItems.Cancel);

}))

.Columns(col =>

{

col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

col.Field("Name").HeaderText("Name").TextAlign(TextAlign.Left).Width(75).Add();

//This column is rendered as template

col.Field("Photo").HeaderText("Employee Image").Template(true).TemplateID("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add();

})

.ClientSideEvents(evt => evt.ActionBegin("onActionBegin").ActionComplete("onActionComplete")))

<script>

$(function () {

//Register helper to show file details

$.views.helpers({ HasFile: HasFile });

});

function onActionBegin(args) {

if (args.requestType == "save") {


//Updating the file as one of the column data

args.data["Photo"] = window.uploadData.files;


window.uploadData["editData"] = new FormData();


//Converting the grid data to form data to send files to controller

for (var d in args.data)

uploadData.editData.append(d, args.data[d]);


proxy = this;

$.ajax({

url: window.uploadData.url,

type: 'POST',

data: window.uploadData.editData,

contentType: false,

processData: false,

success: function () {

proxy.refreshContent();

}

});

}

}


function onActionComplete(args) {

if (args.requestType == "beginedit" || args.requestType == "add") {


//A Global var to track and hold file uploading info

window.uploadData = {};


window.uploadData.url = args.requestType == "add" ? "PerformInsert" : "PerformUpdate";


//Render upload control

$("#EmployeeGridPhoto").ejUploadbox({

saveUrl: "/Home/SaveDefault",

removeUrl: "/Home/RemoveDefault",

dialogAction: { closeOnComplete: true },

fileSelect: function (args) {

//Get the file from fileSelect event

uploadData["files"] = args[0].rawFile;

}

});


}

}

//Helper function to check file available status

function HasFile() {

return this.data["Photo"] != null ? "File Available" : "No File Available";

}


</script>

[controller]

public void SaveDefault(IEnumerable<HttpPostedFileBase> EmployeeGridPhoto)

{

foreach (var file in EmployeeGridPhoto)

{

var fileName = Path.GetFileName(file.FileName);

var destinationPath = Path.Combine(Server.MapPath("~/Content/ejThemes/images/Employees"), fileName);

file.SaveAs(destinationPath);

}

}

public void RemoveDefault(string[] fileNames)

{

foreach (var fullName in fileNames)

{

var fileName = Path.GetFileName(fullName);

var physicalPath = Path.Combine(Server.MapPath("~/Content/ejThemes/images/Employees"), fileName);

if (System.IO.File.Exists(physicalPath))

{

System.IO.File.Delete(physicalPath);

}

}
}


Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R

Ryno
Replied On May 21, 2015 05:49 AM UTC

Hi,

Thank you very much, worked perfectly.

Regards,
Ryno

Sellappandi Ramu [Syncfusion]
Replied On May 22, 2015 01:41 PM UTC

Hi Jagar,

Thanks for the update.
Please get back to us if you need any further assistance we are happy to assist you.

Regards,
Sellappandi R

Matt Phung
Replied On September 9, 2016 06:04 PM UTC

Hi,

Thank you for the example. I have 2 issues:
1. no data is being posted to the controller during PerformUpdate. The data in the EmployeeInsertModel are null.
2. How do you return the name of the file to the edit/save form after you upload the file.

Jayaprakash Kamaraj [Syncfusion]
Replied On September 12, 2016 12:29 PM UTC

Hi Matt, 

Query1 : no data is being posted to the controller during PerformUpdate. The data in the EmployeeInsertModel are null. 
While using latest version, we will get the file from the fileSelect event using below code example and also we suggest you to pass parameter as value in performUpdate .  

function onActionComplete(args) { 
        if (args.requestType == "beginedit" || args.requestType == "add") { 
             
            //A Global var to track and hold file uploading info  
            window.uploadData = {}; 
 
            window.uploadData.url = args.requestType == "add" ? "PerformInsert" : "PerformUpdate"; 
 
            //Render upload control 
            $("#EmployeeGridPhoto").ejUploadbox({ 
                saveUrl: "/Home/SaveDefault", 
                removeUrl: "/Home/RemoveDefault", 
                dialogAction: { closeOnComplete: true }, 
                fileSelect: function (args) { 
                    //Get the file from fileSelect event 
                    uploadData["files"] = args["files"][0].rawFile; // for latest version 
                    //  if you are using older version 13.1.026 we suggest you to use  args[0].rawFile;  
                    var filename = args["files"][0].rawFile.name; // for latest version 
                    //  if you are using older version 13.1.026 we suggest you to use  args[0].rawFile.name;  
                } 
            }); 
 
        } 
    } 
HomeController.cs 
 
//Perform update 
        public void PerformUpdate(EmployeeInsertModel value) 
        { 
 
.. 
 
        } 


Query 2How do you return the name of the file to the edit/save form after you upload the file. 
 
We will get file name in fileSelect event of ejUploadbox using below code example. 


$("#EmployeeGridPhoto").ejUploadbox({ 
                saveUrl: "/Home/SaveDefault", 
                removeUrl: "/Home/RemoveDefault", 
                dialogAction: { closeOnComplete: true }, 
                fileSelect: function (args) { 
                    //Get the file from fileSelect event 
                    uploadData["files"] = args["files"][0].rawFile; // for latest version 
                    //  if you are using older version 13.1.0.26 we suggest you to use  args[0].rawFile;  
                    var filename = args["files"][0].rawFile.name; // for latest version 
                    //  if you are using older version 13.1.0.26 we suggest you to use  args[0].rawFile.name;  
                } 
            }); 


Regards, 

Jayaprakash K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;