Questions on UI for ASP.NET MVC Forum

1 answer

1.2K+ views

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

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

}

Grid

answered on 30 Aug 2016

1 answer

309 views

Web Grid UI MVC In-cell/batch edit with a bool? column I still get drop list when clicking next to checkbox.

So I'm using 2016.1.412 Telerik controls. MVC Grid UI.

I've followed this (http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing) in order to get one of my boolean? columns to only show a checkbox and allow single click changes. It works if I very carefully click on the check box. If I click (within the cell) but next to the check box I get the drop list with the values "true, false, not set". How do I get rid of the drop list?

1.columns.Bound(p => p.SendTo).Template(@<text></text>).ClientTemplate("<input type='checkbox' #= SendTo ? checked='checked':'' # class='sendtochkbx'/>")

2. .Title(GridColumns.SendToPorzio)

3. .Filterable(true)

4. .HtmlAttributes(new { style = "text-align: center;" })

5. .Sortable(false)

6. .Width(150)

7. .Locked(true)

8. .HeaderTemplate("Send To Porzio <input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/> ");

1.$("#SpendGrid").on('click',

2. '.sendtochkbx',

3. function () {

4. var checked = $(this).is(':checked');

5. var dataItem = grid.dataItem($(this).closest('tr')); //grid is defined earlier in code block

6. dataItem.set('SendTo', checked);

7. });

Grid

answered on 30 Aug 2016

1 answer

128 views

How to style web app with consistent Kendo look/feel

How can I style my web application to have a consistent look and feel?

Most places I used the kendo controls (Kendo helpers) however there are some places in my application where I've had to use the standard html helpers or just the regular markup.

In those cases I would the appearance of the Kendo style. (Checkboxes, textboxes, etc).

How can I accomplish this?

General Discussions

answered on 29 Aug 2016

3 answers

658 views

grid.saveRow(); does not call the controller to update

Hi,

I have a where i need to display data and have a button in each row, on click of the button need to toggle the record with selected property as 0 or 1.

I have used a custom command as i do not need to edit the records. and have used a click on the command, below is the code in the javascript method called in the click. But this makes the row editable and then updates the record but there is no post done to the controller, i have set the Update and Create event both. Please can you help and let me know if this is the current way of doing it.

columns.Command(command =>

{

command.Custom("Set").Click("onSetActive").HtmlAttributes(new { @className = "k-icon k-update", @title = "Set" });

command.Custom("Unset").Click("onUnsetActive").HtmlAttributes(new { @className = "k-icon k-cancel", @title = "Unset" });

}).Width(145);

......

.Create(update => update.Action("Update", "My"))
.Read(read => read.Action("Read", "My"))
.Update(update => update.Action("Update", "My"))

function onSetActive(e)

{

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var row = $(e.currentTarget).closest("tr");

var grid = $("#Grid").data("kendoGrid");

grid.editRow(row);

dataItem.Selected = 1;

setTimeout(function () {

grid.saveRow();

});

}

Grid

answered on 29 Aug 2016

1 answer

192 views

DatePicker masked for MVC

Hi, is it posible to have

@(Html.Kendo().DatePickerFor(model => model.BeginDate)

with a masked input?

I want to have the option to write the date but with a mask like 00/00/0000

Thanks

DatePicker

answered on 26 Aug 2016

4 answers

621 views

kendo ui grid batch edit - auto select cell on click

I am using the latest kendo Grid script client with batch edit. Here is my code:
$("#Contract").kendoGrid({
columns: [
{
field: "SomeField",
}],
editable: true,
scrollable: true,
navigatable: true,
selectable: "cell"

How do I make the cell selected when users click on a cell?
I saw a demo at http://demos.telerik.com/aspnet-mvc/razor/grid/editingbatch and wanted to do the same but I could not figure which setting is needed. For editable setting, I tried 0,1,and 2 but it does not seem to work like telerik grid.

Grid

answered on 26 Aug 2016

3 answers

210 views

Exchange Web Services API and Scheduler

Is there any information on using the Scheduler with the Microsoft Exchange Web Services API?

It seems like it would be a good fit to use calendar information from Exchange Services.

Scheduler

answered on 26 Aug 2016

3 answers

954 views

Disable paging when only 1 page

Hi all,

I was wondering if it was possible to disable/hide the paging feature dynamically when only 1 page is shown, i.e. PageSize is set to 100, but the data only consists of 70 rows.

Thanks!

Lennart

Grid