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

2 posts, 0 answers
  1. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 26 Aug Link to this post

    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; }
    }

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 30 Aug Link to this post

    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
    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
Back to Top