Currently i have the following html table:
<body>
<button id="addRow" type="button" class="btn btn-info fa fa-plus"> </button>
<table id="ItemTable" class="display" style="width:100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</tfoot>
</table>
</body>
and this my jquery script:
$(document).ready(function () {
var t = $('#ItemTable').DataTable({
// Add for each row a drop down list
});
var counter = 1;
$('#addRow').on('click', function () {
t.row.add([
"Add input field" (InvoiceDescription),
"Add input field" (ItemType),
"Add for each row a drop down list (Unit)"
]).draw(false);
counter++;
});
// Automatically add a first row of data
$('#addRow').click();
});
I need to add table rows with dropdown and input field, for each row on click event, so that the user can enter data inline and post back to the server. I am using ASP.NET MVC if that matters, with the following controller and action:
[Authorize]
public class ItemController : BaseController
{
private readonly IItemRepositoryService itemRepositoryService;
public ItemController(IItemRepositoryService itemRepositoryService)
{
this.itemRepositoryService = itemRepositoryService;
}
public JsonResult Add(ItemViewModel ItemViewModel)
{
itemRepositoryService.SaveItem(ItemViewModel, UserId);
return Json(1, JsonRequestBehavior.AllowGet);
}
}
And this is my model:
public class ItemViewModel
{
public string Unit{ get; set; }
public string ItemType{ get; set; }
public string InvoiceDescription { get; set; }
}
as I said I am using jquery DataTables.
Can anyone help in solving this problem?
