Kendo grid with templates and Kendo upload

[Victor]

I have a Kendo grid which represents some documents, each row is a document, i need to upload a pdf which is a digitalized copy of the physical document. All rows need  to be save as a List in the server so i'm using a template like this

.ClientTemplate("#= OficioId #<input type='hidden' name='OficioAban[#= index(data) #].OficioId' value='#= OficioId #'/>");    

All fields are working ok but the upload.

i'm trying to save the file in a HttpPostedFileBase which is part of OficioAban Class but this template is not working.

This is the Grid

@(Html.Kendo().Grid<RecintoFiscal.Models.OficioAban>(Model.OficioAban).Name("OficioAban")
                                                .DataSource(datasource => datasource
                                                    .Ajax()
                                                    .ServerOperation(false)
                                                    .Events(events => events.Error("error_handler"))
                                                    .Model(model =>
                                                    {
                                                        model.Id(t => t.OficioId);
                                                        model.Field(t => t.OficioId).Editable(false);
                                                        model.Field(t => t.Usuario).Editable(false);
                                                    })
                                                )
                                                .Events(e => e.Edit("onEdit"))
                                                .EnableCustomBinding(true)
                                                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                                                .Navigatable()
                                                .Scrollable()
                                                .TableHtmlAttributes(new { @class = "table" })
                                                .ToolBar(commands =>
                                                {
                                                    commands.Create().Text("Nuevo");
                                                })
                                                .Columns(columns =>
                                                    {
                                                        columns.Bound(o => o.OficioId).Hidden().ClientTemplate("#= OficioId #<input type='hidden' name='OficioAban[#= index(data) #].OficioId' value='#= OficioId #'/>");
                                                        columns.Bound(o => o.NumeroOficio).ClientTemplate("#= getValue(NumeroOficio) #<input type='hidden' name='OficioAban[#= index(data) #].NumeroOficio' value='#= NumeroOficio #'/>");
                                                        columns.Bound(o => o.FechaOficio).ClientTemplate("#= getDate(FechaOficio) #<input type='hidden' name='OficioAban[#= index(data) #].FechaOficio' value='#= getDate(FechaOficio) #'/>");
                                                        columns.Bound(o => o.TipoOficioId).ClientTemplate("#= getTipoOficioText(TipoOficioId) #<input type='hidden' name='OficioAban[#= index(data) #].TipoOficioId' value='#= TipoOficioId #'/>").Title("Asunto");
                                                        columns.Bound(o => o.TipoManiobraId).ClientTemplate("#= getManiobraText(TipoManiobraId) #<input type='hidden' name='OficioAban[#= index(data) #].TipoManiobraId' value='#= TipoManiobraId #'/>").Title("Maniobra");
                                                        columns.Bound(o => o.Remanejos).ClientTemplate("#= getValue(Remanejos) #<input type='hidden' name='OficioAban[#= index(data) #].Remanejos' value='#= Remanejos #'/>");
                                                        columns.Bound(o => o.FechaMovimiento).ClientTemplate("#= getDate(FechaMovimiento) #<input type='hidden' name='OficioAban[#= index(data) #].FechaMovimiento' value='#= getDate(FechaMovimiento) #'/>");
                                                        columns.Bound(o => o.Pedimento).ClientTemplate("#= getValue(Pedimento) #<input type='hidden' name='OficioAban[#= index(data) #].Pedimento' value='#= Pedimento #'/>");
                                                        columns.Bound(o => o.Documento).Width(180).ClientTemplate("#= getValue(Documento) #<input type='hidden' name='OficioAban[#= index(data) #].Documento' value='#= Documento #'/>");
                                                        columns.Bound(o => o.Archivo).ClientTemplate("<input type='hidden' name='OficioAban[#= index(data) #].Archivo'/>");
                                                        columns.Bound(o => o.Liberacion).ClientTemplate("#= Liberacion ? 'Si' : 'No' #<input type='hidden' name='OficioAban[#= index(data) #].Liberacion' value='#= Liberacion #'/>");
                                                        columns.Bound(o => o.Usuario).ClientTemplate("#= getUser(Usuario) #<input type='hidden' name='OficioAban[#= index(data) #].Usuario' value='#= Usuario #'/>");
                                                        columns.Command(command => command.Destroy().Text("Borrar")).Width(95).Title("Acciones");
                                                    })
                                                .Mobile()
                                                .Resizable(resize => resize.Columns(true))
        )

 

and this is my upload file Editor Template

@(Html.Kendo().Upload()
        .Name("Archivo")        
        .ShowFileList(false)
        .HtmlAttributes(new { @class = "form-control filestyle", accept = ".pdf", style = "vertical-align: bottom; padding:0px; margin:0px; border:0px; margin-top:2.5ex;" })
        .Multiple(false)        
)

 

[Ivan Danchev]

Hello Victor,

I am not sure which is your preferred Upload Mode of Operation, but for example using Asynchronous mode you should be able to get the file in the controller:

@(Html.Kendo().Upload()
        .Name("Archivo")
        .ShowFileList(false)
        .Async(async => async
                    .Save("Save", "Home")
                )
        .HtmlAttributes(new { @class = "form-control filestyle", accept = ".pdf", style = "vertical-align: bottom; padding:0px; margin:0px; border:0px; margin-top:2.5ex;" })
        .Multiple(false)
)

public ActionResult Save(IEnumerable<HttpPostedFileBase> archivo)
{
    //The Name of the Upload component is "archivo".
    foreach (var file in archivo)
    {
        //Some browsers send file names with a full path. You only care about the file name.
        var fileName = Path.GetFileName(file.FileName);
        var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

        file.SaveAs(destinationPath);
    }

    //Return an empty string to signify success.
    return Content("");
}

Note that the HttpPostedFileBase parameter in the Save Action should match the name of the Upload.

Regards,
Ivan Danchev
Telerik

[Victor]

Is there a way to get the file name and show it in the view? cause with async operation show the upload completed and the file name but as i'm using those templates when the cell with upload lose the focus the upload botton and the file name are erased

[Ivan Danchev]

Hello Victor,

You can use the approach shown in this thread to return the name of the uploaded file to the View.

Regards,
Ivan Danchev
Telerik

[Victor]

Thanks, Everyting is working now, i add a global variable to get the file name as use this code

FileName = e.response.File;            
            var grid = $("#OficioRF").data("kendoGrid"),
                        model = grid.dataItem(this.element.closest("tr"));

            model.Documento = FileName;
            $("#OficioRF").data('kendoGrid').refresh();

This is because i needed to copy the file name to another cell in the same row so i can have a cell just to upload and the other one to see file name and open it