post kendo grid data to MVC controller on custom command click

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




        }

Take a look at the format of the posted row data in the browser dev tools and compare it to the format that the built-in kendo save posts. You likely need to format your posted row data the same way for the MVC model binder to be able to bind to the [Bind(Prefix = "models")]IEnumerable<OutputCash> results and JSON.stringify() is not producing the same/correct data format. — The Dread Pirate Stephen

HighlanderGrog HighlanderGrog · Accepted Answer · 2017-11-30T16:07:51

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.

post kendo grid data to MVC controller on custom command click

1 Answers