ASP.NET MVC Telerik Grid – file upload on popup mode


Supposing that you need to upload file(s) on popup mode of kendo grid.If your table has relationship with another table then you might want to assign id or whatsoever.
Firstly, let’s create our grid and some JavaScript codes.

@(Html.Kendo().Grid<ModelName>()
      .Name("grid")
      .Columns(columns =>
      {
        columns.Bound(c => c.ColumnName);
        columns.Bound(c => c.ColumnName2);
        // ...
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
      .ToolBar(toolbar => {
            toolbar.Create();
            toolbar.Excel();
      }) 

// AddContractDialog is our template for popup editing mode.
      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddContractDialog"))
      .Scrollable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(p => p.idSome))
          .Read(read => read.Action("Grid_Read", "ControllerName"))
              .Create(create => create.Action("Grid_Create", "ControllerName").Data("additionalDetail"))
          .Update(update => update.Action("Grid_Update", "ControllerName"))
          .Destroy(destroy => destroy.Action("Grid_Destroy", "ControllerName"))
      )
        )
<script>
    function additionalDetail() {
        return {
            filename: window.UploadedFile
        }
    }
</script>
<script>
   var UploadedFile;
    function onSuccess(e) {
        UploadedFile = e.response.fileName;
    }
</script>

What I did is add UploadedFile value that will pass the detail that comes from Success event of upload widget.By defining additionalDetail, we’ll pass our file name to grid’s create event.
Here is our kendo upload widget
(AddContractDialog.cshtml)

    @(Html.Kendo().Upload()
    .Name("attachments")
    .Async(async => async
        .Save("Save", "ControllerName")
    )
            .Events(c => c
                .Success("onSuccess")
            )
    )

For saving uploaded file and pass file name (in my case,you can pass whatever detail you want) to the Success event.

   public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments)
        {
            string attachmentName = null;
           
            if (attachments != null)
            {
                foreach (var file in attachments)
                {
                    attachmentName = Path.GetFileName(file.FileName);
// Don't forget create CategoryImage folder.
                    var physicalPath = Path.Combine(Server.MapPath("~/CategoryImage/"), attachmentName );

                     file.SaveAs(physicalPath);
                }
            }

            // Return file name string to success event
          return Json(new { fileName = attachmentName }, "text/plain");
        }

and in Grid’s create event we add some extra parameter to get our file name.
Contract is just an example model

 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Grid_Create([DataSourceRequest]DataSourceRequest request, Contract contract, string filename)
        {

Now you will receive your file’s name as parameter in the Grid_Create (as filename).

Resources:
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/upload/metadata#receiving-metadata-from-the-save-handler
http://www.telerik.com/forums/grid-with-upload-in-custom-editor-template-popup#KXXGIwt6bUmZQHwFPjlojw

Tagged:

Cavab yaz

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: