Kendo grid with templates and Kendo upload

5 posts, 1 answers
  1. Victor
    Victor avatar
    16 posts
    Member since:
    Nov 2015

    Posted 10 May Link to this post

    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)        
    )

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 12 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Victor
    Victor avatar
    16 posts
    Member since:
    Nov 2015

    Posted 12 May in reply to Ivan Danchev Link to this post

    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
  5. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 16 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Victor
    Victor avatar
    16 posts
    Member since:
    Nov 2015

    Posted 20 May Link to this post

    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

Back to Top
UI for ASP.NET MVC is VS 2017 Ready