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

[Ryno]

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]

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]

Hi,

Thank you very much, worked perfectly.

Regards,

Ryno

[Sellappandi Ramu]

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]

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]

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 2:  How 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. 

https://help.syncfusion.com/js/api/ejuploadbox#events:fileselect 

$("#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;  

                } 

            }); 

Sample: http://www.syncfusion.com/downloads/support/forum/119181/ze/GridEditWithUpload764067443 

Regards, 

Jayaprakash K.