This is a migrated thread and some comments may be shown as answers.

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

1 Answer 1190 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Avinash asked on 26 Aug 2016, 09:26 PM

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

}

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

1 Answer, 1 is accepted