Terkadang kita memerlukan tabel di dalam form, misalnya untuk kasus data one-to-many.
Salah satu alternatif solusinya dapat menggunakan Kendo Grid.
CREATE
InvoiceFormStub.cs
[code language=”csharp”]
public class InvoiceFormStub
{
//…
public List<InvoiceItemFormStub> AdditionalItem { get; set; }
[DisplayName("Tambahan Item")]
public string AdditionalItemText { get; set; }
//…
}
[/code]
Form.cshtml
[code language=”csharp”]
<div class="form-group">
@Html.LabelFor(model => model.AdditionalItemText, new { @class = "col-xs-4 control-label" })
<div class="col-xs-12 grid-item-container">
<div id="grid-item"></div>
@Html.HiddenFor(model => model.AdditionalItemText, new { @class = "" })
@Html.ValidationMessageFor(model => model.Status)
</div>
</div>
[/code]
[code language=”javascript”]
<script type="text/javascript">
//variabel
var initialData = [];
$(document).ready(function () {
//…
//additional invoice items
@if (Model.AdditionalItemText != null && Model.AdditionalItemText != "")
{
<text>
initialData = @Html.Raw(Model.AdditionalItemText);
</text>
}
$("#grid-item").kendoGrid({
dataSource: {
data: initialData,
schema: {
model: {
id: ‘Id’,
fields: {
Id: { type: "string", defaultValue: null },
IdInvoice: { type: "string", defaultValue: null },
Category: { type: "string", validation: { required: { message: "Kategori wajib diisi." } } },
Value: { type: "number", validation: { min: 0, max: 1000000000000000, required: { message: "Nilai wajib diisi." } } },
}
}
},
aggregate: [{ field: "Value", aggregate: "sum" }],
sort: { field: ‘Category’, dir: ‘asc’ },
},
filterable: kendoGridFilterable,
sortable: true,
scrollable: true,
resizable: true,
editable: ‘inline’,
toolbar: [{ name: "create", text: " Tambah" }],
columns: [
{
command: [
{
name: "edit",
text: "Edit",
imageClass: "glyphicon glyphicon-edit",
template: ‘<a class="k-button-icon #=className#" #=attr# href="\\#" title="#=text#"><span class="#=imageClass#"></span></a>’
},
{
name: "destroy",
text: "Hapus",
imageClass: "glyphicon glyphicon-remove",
template: ‘<a class="k-button-icon #=className#" #=attr# href="\\#" title="#=text#"><span class="#=imageClass#"></span></a>’
}
],
width: 75
},
{
field: "Id",
title: "Id",
hidden: true
},
{
field: "Category",
title: "Keterangan",
},
{
field: "Value",
title: "Nilai",
format: ‘{0:n0}’,
},
],
edit: function(e) {
var commandCell = e.container.find("td:first");
commandCell.html(‘<a class="k-button-icon k-grid-update" href="\\#" title="Simpan"><span class="glyphicon glyphicon-floppy-saved"></span></a><a class="k-button-icon k-grid-cancel" href="\\#" title="Batal"><span class="glyphicon glyphicon-remove"></span></a>’);
}
});
//…
});
</script>
[/code]
InvoiceController.cs
[code language=”csharp”]
[HttpPost]
public ActionResult Create(InvoiceFormStub model, bool print = false)
{
if (model.AdditionalItemText != null && model.AdditionalItemText != "")
model.AdditionalItem = new JavaScriptSerializer().Deserialize<List<InvoiceItemFormStub>>(model.AdditionalItemText);
//…
}
[/code]
EDIT
Ketika menghapus data pada tabel, perlu ada penanganan khusus.
