I'm trying to bulk save the data in my slickgrid. I've tried using this post, but "dataB" is always "" even though there are several rows in the grid. What is the best way to send grid data to the controller using Html.BeginForm? Is there a better way?
View:
@using (Html.BeginForm("SaveReport", "Home", FormMethod.Post))
{
<table width="100%">
<tr>
<td align="right">
<div style="float:right;" class="btn-group" role="group" aria-label="...">
<button type="submit" class="btn btn-default">Save</button>
<a class="btn btn-default" href="~/Home/ReportData/@ViewBag.ID">Results</a>
</div>
</td>
</tr>
</table>
<input type="hidden" name="dataB" value="" />
<div style="position:relative;" id="gridContainerB">
<div>
<div class="grid-header slickgrid">
<label>Selected Fields</label>
</div>
<div id="selectedGrid" style="width:100%;"></div>
</div>
</div>
}
<script>
$(function () {
$("form").submit(function(){
$("input[name='dataB']").val($.JSON.encode(dataB));
});
var gridB;
var dataB = [];
var columnsB = [
{ id: "#", name: "", width: 40, cssClass: "cell-reorder dnd", behavior: "selectAndMove", selectable: false, resizable: false },
{ id: "name", name: "Name", field: "Name", minWidth: 300 },
{ id: "filter", name: "Filter", field: "Filter", minWidth: 100 },
{ id: "description", name: "Description", field: "Description", minWidth: 500 }
];
var optionsB = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
enableColumnReorder: false,
asyncEditorLoading: true,
forceFitColumns: false,
topPanelHeight: 25,
autoHeight: true,
autoEdit: false
};
dataB = @Html.Raw(Json.Encode(Model.selectedFields));
gridB = new Slick.Grid("#selectedGrid",dataB,columnsB, optionsB);
gridB.setSelectionModel(new Slick.RowSelectionModel());
gridB.autosizeColumns();
});
Controller:
public bool SaveReport(string dataB, ReportViewModel model)
{
return false;
}