How to stringify grid data source?

[kalum]

Hi,

I have a requirement to send the stringified grid data source to server using ajax by pressing an external button. Is there any way to do it in ASP.NET MVC - EJ2 grid component? I have done it with ejGrid using bellow code.

function btnClick() {
      var obj = $("#FlatGrid").ejGrid("instance");
      obj.batchSave();

      var gridmodel = $("#FlatGrid").ejGrid("model");
      var data = JSON.stringify(gridmodel.dataSource);

      $.ajax({
          url: '/SystemUsers/SaveData',
          type: 'post',
          data: { data: data, a:1 },
          success: function (data) {
              alert('Successfully Saved..!');
          }
      })
    }

Thank you

Kalum

[Rajapandi Ravi]

Hi Kalum, 

Greetings from syncfusion support 

Based on your query we could see that you like to send the stringified data to the server. Based on your requirement we have prepared a sample and achieved your requirement. Please refer the below code example and sample for more information. 

Index.cshtml 

 

<div class="control-section"> 

    @( 

    @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").DataSource((IEnumerable<object> 

    )ViewBag.dataSource).Columns(col => 

    { 

    .  .  .  .  .  .  .  .  . 

    .  .  .  .  .  .  .  .  . 

    .  .  .  .  .  .  .  .  . 

    }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowEditOnDblClick(false).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 

        ) 

</div> 

 

<script> 

    function sendData() { //button click event 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        var persistData = JSON.stringify({ StringifyData: JSON.stringify(grid.dataSource) }); // Grid Datasource 

        var ajax = new ej.base.Ajax({ // use ajax to send the stored stringify data to server 

            url: "/Home/StringifyData", 

            type: "POST", 

            contentType: "application/json; charset=utf-8", 

            datatype: "json", 

            data: persistData 

        }); 

        ajax.send().then(function (value) { 

            console.log(JSON.parse(JSON.parse(value))); 

        }); 

    } 

</script> 

HomeController.cs 

 

public ActionResult StringifyData(string StringifyData) 

        { 

            return Json(StringifyData); 

        } 

Sample: https://www.syncfusion.com/downloads/support/forum/165303/ze/1653032100436162.zip 

Screenshot: 

 

Regards, 

Rajapandi R

[kalum]

Hi Rajapand,

I could achieve my requirement by referring your sample very easily.

Thank you very much for your quick and kind support.

Best Regards,

Kalum

[Rajapandi Ravi]

Hi Kalum, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R