post kendo grid data to MVC controller on custom command click - excel

Question

I'm trying to post kendo grid data on clicking a button. I want to save the data to an excel file, the default option provided by kendo for saving grid data fails when the dataset is large. So, I'm trying to do the excel operations on server side. My issue is I'm not able to pass the data to the controller.
Code:
View
#(Html.Kendo().Grid(Model)
.Name("OutputCashGrid")
.Events(ev => ev.Edit("onEdit"))
.Columns(columns =>
{
columns.Bound(p => p.ClientID).Hidden();
columns.Bound(p => p.LoadID).Title("Loadid").Hidden();
columns.Bound(p => p.Level1).Title("Level1").Width(130);
columns.Bound(p => p.Level2).Title("Level2").Width(130);
columns.Bound(p => p.AsOfDate).Title("AsOfDate").Width(150).Format("{0:d}").Width(130);
})
.ToolBar(toolbar =>
{
toolbar.Save().HtmlAttributes(new { id = "Save" }).SaveText("Save External Balances and Comments");
toolbar.Custom()
.Text("Export To Excel")
.HtmlAttributes(new { #class = "export" })
.Url("javascript:myFunction()");
})
.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode.
.HtmlAttributes(new { style = "height: 550px;" })
.Groupable()
//.Excel(excel => excel
// .AllPages(true)
// .FileName("CashSummary_" + #ViewBag.goClientName + "_" + #ViewBag.Asofdate.ToString("MM/dd/yyyy") + ".xlsx")
// .Filterable(true)
// .ProxyURL(Url.Action("Excel_Export_Save", "SaveRec"))
// ) //this fails for large datasets
.Reorderable(r => r.Columns(true))
.Sortable()
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Events(e2 => e2.Change("vChange"))
.PageSize(50)
.ServerOperation(false)
.Batch(true) // Enable batch updates.
.Model(model =>
{
model.Id(p => p.OutputcashID); // Specify the property which is the unique identifier of the model.
//model.Field(p => p.OutputcashID).Editable(false); // Make the ProductID property not editable.
.Update("Editing_Update", "SaveRec",new { loadid = #loadid,clientid=#clientid })
)
.Pageable(pageable => pageable
.Refresh(true)
.Input(true)
.Numeric(false)
)
.Resizable(resize => resize.Columns(true))
.Selectable()
)
I tried using Url("Action","Controller") in the custom toolbar it hits the action but doesn't pass the data. When i decorate the action with HttpPost it gives me 404 error.
When calling with js function
function myFunction() {
var grid = $("#OutputCashGrid").getKendoGrid();
var data = JSON.stringify(grid.dataSource.view());
$.ajax({
url: '/SaveRec/Excel_save',
type: 'POST',
data: data,
async: true,
processData: false
});
}
Controller:
// [AcceptVerbs(HttpVerbs.Post)] get 404 error when using http.post, without this it hits the action but doesn't pass data.
public ActionResult Excel_save([DataSourceRequest]DataSourceRequest request,[Bind(Prefix = "models")]IEnumerable<OutputCash> results)
{
//gives me null for results
var WFSEntities=new WFSEntities();
var grid = WFSEntities.OutputCashes;
var gridresults = grid.ToDataSourceResult(request).Data; //returns all the data from the table.
//Create new Excel workbook
var workbook = new HSSFWorkbook();
//Create new Excel sheet
var sheet = workbook.CreateSheet();
//create excel sheet, removed code for brevity
return File(output.ToArray(), //The binary data of the XLS file
"application/vnd.ms-excel", //MIME type of Excel files
"Output.xls"); //Suggested file name in the "Save as" dialog which will be displayed to the end user
}

Answer 1

To do the entire operation server side, you don't pass the data to the controller from the ajax call. The controller takes in the URL you pass and you grab the data for the export in the controller. After it has been pulled fresh server side, you pass to your worksheet generator. The trickiest part is passing in any filters/pages that you want applied to the data before the controller action grabs it. It is also beneficial to have a loading image present while the server side processing takes place.