Display/Modify pre uploaded files in Kendo Grid in ASP MVC

[Avinash]

Hi, 

I need to display data in grid where it needs to display pre uploaded files in one of the column. User will also be able to edit the column and be able to delete or upload new attachment in the column. The user should be able to upload multiple files and the grid should display multiple files if the user has already uploaded previously. 

I have been able to display data in grid with one attachment but having hard time to figure out how to display multiple files and enable uploading multiple files in the grid.

Here is my code:

Razor View:
Test.cshtml

@using Kendo.Mvc.UI

@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>
<input id="btnSearch" type="button" value="Search" class="btn btn-default icon-btn-input" />

<div class="col-sm-12">
    @(Html.Kendo().Grid<KendoUIApp3.Models.Certification>()
          .Name("Grid1")
          .Columns(columns =>
          {
              columns.Bound(e => e.SupplierNumber).Width("170px");
              columns.Bound(e => e.CustomerItemNumber).Width("170px");
          })
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))
          .Reorderable(reorder => reorder.Columns(true))
          .AutoBind(false)
          .Selectable()
          .Sortable(sortable => sortable
              .AllowUnsort(true)
              .SortMode(GridSortMode.MultipleColumn))
          .Scrollable(scr => scr.Height(322))
          .Filterable(filterable => filterable
              .Extra(false)
              .Operators(operators => operators
                  .ForString(str => str.Clear()
                      .Contains("Contains")
                      .StartsWith("Starts with")
                      .IsEqualTo("Is equal to")
                      .IsNotEqualTo("Is not equal to"))))
          .Resizable(resize => resize.Columns(true))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .ServerOperation(false)
              .Read(read => read.Action("GetTestData", "Home"))
              .Model(model =>
              {
                  model.Id(p => p.SupplierNumber);
              }))
              .Events(events => events.Change("onRowSelect"))
          )
</div>
<br/><br/>


<div class="col-sm-12">
    @(Html.Kendo().Grid<KendoUIApp3.Models.CertificationDetail>()
          .Name("Grid2")
          .Columns(columns =>
          {
              columns.Command(command =>
              {
                  command.Edit().Text("Edit").HtmlAttributes(new { title = "Edit" });
              }).Width(180).Title("Action");
              columns.Bound(e => e.CertificationName).Width("170px");
              columns.Bound(e => e.Value).ClientTemplate("<input type='checkbox' disabled #=Value == true ? checked='checked' : '' # />").Width("170px");
              columns.Bound(e => e.Attachment).Width("300px").ClientTemplate("#if (Attachment != null && Attachment != '')" +
                                                                                            "{# <a href='#=Attachment#' target='_blank' class='btn-success'>View Attachment</a> #}#")
                                                                                            .EditorTemplateName("_UploadAttachment");
          })
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))
          .Reorderable(reorder => reorder.Columns(true))
          .AutoBind(false)
          .Selectable()
          .Sortable(sortable => sortable
              .AllowUnsort(true)
              .SortMode(GridSortMode.MultipleColumn))
          .Scrollable(scr => scr.Height(322))
          .Filterable(filterable => filterable
              .Extra(false)
              .Operators(operators => operators
                  .ForString(str => str.Clear()
                      .Contains("Contains")
                      .StartsWith("Starts with")
                      .IsEqualTo("Is equal to")
                      .IsNotEqualTo("Is not equal to"))))
          .Resizable(resize => resize.Columns(true))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .ServerOperation(false)
              .Read(read => read.Action("GetDetailTestData", "Home").Data("selectedRow"))
              .Model(model =>
              {
                  model.Id(p => p.CertificationName);
              })
              .Update(update => update.Action("SaveCertificationDetail", "Home")))
    )
</div>

<script>
    $('#btnSearch').click(function(e) {
        $('#Grid1').data('kendoGrid').dataSource.read();
    });

    function selectedRow() {
        var grid = $("#Grid1").data("kendoGrid");
        var selectedItem = grid.dataItem(grid.select());
        var data = selectedItem ? selectedItem.toJSON() : {};

        return { model: data }
    }

    function onRowSelect() {
        $('#Grid2').data('kendoGrid').dataSource.read();
    }
</script>

_UploadAttachment.cshtml

@using Kendo.Mvc.UI

 

@(Html.Kendo().Upload()

        .Name("uploadedFiles")

        .Messages(m => m.Select("Upload Attachment"))

        .Async(a => a

                .Save("SaveAttachments", "Home")

                .Remove("RemoveAttachments", "Home")

            .AutoUpload(true)

        )

        .Multiple(false)

        //.Events(e => e.Success("onUploadSuccess"))

        //.Events(e => e.Upload("function(args){checkFileExtension(args,'.pdf');}"))

        .HtmlAttributes(new { accept = ".pdf" })

)

HomeController.cs

public ActionResult Test()

{

    return View();

}

 

public JsonResult GetTestData([DataSourceRequest] DataSourceRequest request)

{

    var certificationList = new List<Certification>();

    certificationList.Add(new Certification {SupplierNumber = "4343", CustomerItemNumber = "123344"});

    certificationList.Add(new Certification {SupplierNumber = "4242", CustomerItemNumber = "23453"});

    return Json(certificationList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

 

public JsonResult GetDetailTestData([DataSourceRequest] DataSourceRequest request, Certification model)

{

    var certificationDetailLists = new List<CertificationDetail>();

 

    if (model.SupplierNumber == "4343")

    {

        certificationDetailLists.Add(new CertificationDetail {CertificationName = "ROHS", Value = true, Attachment = "Test.pdf"});

        certificationDetailLists.Add(new CertificationDetail {CertificationName = "REACH", Value = false});

    }

    else

    {

        certificationDetailLists.Add(new CertificationDetail { CertificationName = "RLIM", Value = false });

        certificationDetailLists.Add(new CertificationDetail { CertificationName = "RETIM", Value = true });

    }

    return Json(certificationDetailLists.ToDataSourceResult(request));

}

 

public ActionResult SaveAttachments(IEnumerable<HttpPostedFileBase> uploadedFiles)

{

    return Json(null);

}

 

public ActionResult RemoveAttachments(string[] fileNames)

{

    return Json("");

}

 

Model:

public class Certification

{

    public string SupplierNumber      { get; set; }

    public string CustomerItemNumber  { get; set; }

}

 

public class CertificationDetail

{

    public string CertificationName { get; set; }

    public bool Value               { get; set; }

    public string Attachment        { get; set; }

}

[Danail Vasilev]

Hi Avinash,

You can examine the following resources that treats integrating upload with grid components:

    - Show pre uploaded files during edit mode of Grid
    - Upload in Grid Popup editor

Regards,
Danail Vasilev
Telerik by Progress