submit selected rows back to server for processing

[Christian Holbrook]

I need to collect the selected rows and submit them to the server for processing.

Is there a code example that I missed somewhere?

I need to submit to a MVC5 controller.

Thanks!

[Christian Holbrook]

I probably need to provide more information. I am using the URL Adapter approach like:

@Html.EJS().Grid("UrlAdaptor").DataSource(ds => ds.Url(@Url.Action("UrlDatasource", "Grid")).Adaptor("UrlAdaptor")).AllowSorting().Columns(col => ....

[Praveenkumar Gajendiran]

Hi Christian,

Thanks for contacting Syncfusion support.

Based on your query, we could see that you want to pass the selected records to the server side. For this, we have prepared a sample, in that sample we have pass the selected records to the server using ajax request via custom toolbar button click. In the toolbarClick event, you can get the selected records using the getSelectedRecords method and pass the selected records to the server using the data property of the ajax.

Please refer the below code example and sample for more information, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc__sample1-1484343584.zip 

Code Example: 

@{ 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add(new { text = "Selected", tooltipText = "Selected", id = "Selected" }); 

    

} 

 

 

@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 

{ 

   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 

   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 

 

}).AllowPaging().Toolbar(toolbarItems).ToolbarClick("toolbarClick").Render() 

 

<script> 

    function toolbarClick(args) { 

        if (args.item.id === 'Selected') { 

            var selectedRecord = this.getSelectedRecords(); //selected records 

            var ajax = new ej.base.Ajax({ 

                url: "/Home/SelectedRecords", 

                type: "POST", 

                contentType: "application/json", 

                data: JSON.stringify(selectedRecord), 

                successHandler: function (response) { 

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

                }, 

                failure: function (response) { 

                    alert(response); 

                } 

            }); 

            ajax.send(); 

        } 

    } 

</script> 

 

Controller page 

 

 

Please get back to us if need further assistance.

Regards,
Praveenkumar G 

[Christian Holbrook]

Hi Praveenkumar, thanks for your help on this.

Your solution almost works for me. It is my ignorance with the MVC world that is the problem.

I need the posted data to redirect to a different view.

I am not sure that can be done with and ajax call.

Please advise.

Thanks!

[Christian Holbrook]

Also, note that the post controller is dynamically generating a view based on the selected records, so the the idea of putting a redirect in the ajax success method does not work.

Thanks!

[Praveenkumar Gajendiran]

Hi Christian, 

Thanks for your update.

We are not able to clearly understand your requirement from the provided information, So we need the following details to understand the query better at our end. So kindly share the following details.  

1. Do you wish to redirect into the new view?
2. While redirecting to new view, do you want to pass the selected records to the new view?
3. Please elaborate on your exact requirement scenario with more details based on which we will check from our end and provide the further details.

Please get back to us with the requested details which will be helpful for us to validate the reported scenario at our end and provide the solution as early as possible 

Regards 

Praveenkumar G 

[Christian Holbrook]

Hi Praveenkumar, I have figured a way to do what I need but it is not elegant. I am wondering if there is a better more elegant way that allows for the default model binder to work.

I am using code like this:

<!-- In the View -->

<form action="/fred/barny" id="barnyForm" method="post">

    @Html.AntiForgeryToken()

    @Html.EJS().Button("primarybtn").Content("barny").Click("submit").CssClass("e-primary").Render()

</form>

<script>

barnyForm.onsubmit = function (e) {

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

var selectedrecords = grid.getSelectedRecords(); // get the selected records.

$("<input />").attr("type", "hidden")

.attr("name", "rowData")

.attr("value", JSON.stringify(selectedrecords))

.appendTo("#barnyForm");

return true;

    }

</script>

//In the controller

[HttpPost]

public ActionResult Barny(FormCollection data)

{

var rows = data["rowData"];

dynamic d = JsonConvert.DeserializeObject(rows);

//do the logic to generate the data for the view here

....

return View();

}

Am I missing some better more elegant way of handling this?

Thanks!

[Praveenkumar Gajendiran]

Hi Christian, 

Thanks for your update.

Still, we are not able to clearly understand your requirement, So we need the following details to understand the requirement better at our end. So kindly share the following details. 

1. In your previous update, you said you want the selected records to pass and get in another view. So please let us know, what you mean by “view” here, it is a separate individual page or you want the selected records to pass to the separate method on the server-side, what is your exact expectation?
2. In your last update code example, we could see that you have set the selected records as attributes to the form, here we cannot find the code example to navigate to another view. So, we are not able to clearly understand your exact requirement, please share that view and what you want to process in that view?
3. Please elaborate on your exact requirement scenario with a complete code example, sample, and video demonstration of your exact requirement scenario based on which we will check from our end and provide the further details.

Regards,
Praveenkumar G