Submit Selected Grid Rows To Server

Zhen Liu

Asked On July 6, 2017 04:59 AM UTC

I have a grid which allows multi row selection, how can I submit user selections to the server with a button press?

Reply | Reply with quote

Venkatesh Ayothi Raman [Syncfusion]

Replied On July 7, 2017 12:12 PM UTC

Hi Zhen,

Thanks for contacting Syncfusion support.

In button click , we suggest you to use getSeletedRecords method of ejGrid to get the selected records in Grid and then we need to pass selected records using ajax. Please refer to the below help document and code example.

Link: https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrecords

Code example:

@Grid

<ej-Button ID="refresh" Type="Button" Text="selectedReocds" click="Click" />

<ej-grid id="FlatGrid" allow-sorting="true" allow-paging="true" allow-reordering="true" selectiontype="Multiple">

. . .

<e-datamanager url="/Home/DataSource" update-url="/Home/Edit" insert-url="/Home/Create" remove-url="/Home/Delete" adaptor="UrlAdaptor" />

<e-columns>

. . .

</e-columns>

</ej-grid>

function Click() {

var obj = $(".e-grid").ejGrid("instance");

var data = obj.getSelectedRecords();

$.ajax({

type: "POST",

//send the selected records to server side while button click

url: "Home/SelectedRecords",

datatype: "json",

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

data: JSON.stringify({ Grid1Data: JSON.stringify(data) }),

success: function (result) {

}

});

}

</script>

Please let us know if you have any further assistance on this.

Regards,

Venkatesh Ayothiraman.

Reply | Reply with quote

Chris

Replied On October 11, 2019 03:29 AM UTC

Would someone be able to update the example to include the ASP.NET Core Controller code?

I can get the AJAX POST to be be sent to the controller, however I can't work out how to get a List of selected rows.

Thanks in advance,

Chris

Reply | Reply with quote

Farveen Sulthana Thameeztheen Basha [Syncfusion]

Replied On October 13, 2019 01:51 PM UTC

Hi Chris,

Thanks for contacting Syncfusion Support.

We have checked your query and you can get the selected records on server end by using the following KB:-

https://www.syncfusion.com/kb/8276/how-to-get-selected-rows-data-in-code-behind

For checkbox selection:-https://www.syncfusion.com/kb/9117/how-to-get-selected-records-from-all-pages-in-multicheckbox-feature-with-remote-data

Still you faced the issue, please share us the following details.

Complete Grid code example(server and client end).
Screenshot if you have faced any issue.
Do you need selected records on external button click or while on selecting the records.
Have you used normal selection/checkbox selection.

Regards,

Farveen sulthana T

Reply | Reply with quote

Steve Deshaies

Replied On October 17, 2019 01:16 AM UTC

Hi Chris,

Thanks for contacting Syncfusion Support.

We have checked your query and you can get the selected records on server end by using the following KB:-

https://www.syncfusion.com/kb/8276/how-to-get-selected-rows-data-in-code-behind

For checkbox selection:-https://www.syncfusion.com/kb/9117/how-to-get-selected-records-from-all-pages-in-multicheckbox-feature-with-remote-data

Still you faced the issue, please share us the following details.

Complete Grid code example(server and client end).

Screenshot if you have faced any issue.

Do you need selected records on external button click or while on selecting the records.

Have you used normal selection/checkbox selection.

Regards,

Farveen sulthana T

These KB samples provided are for ASP.Net Web Forms which is not longer even supported by Syncfusion

Do you have a sample of accessing selected rows with these requirements:

1) ASP.NET Core 2.0+ using Razor Pages

2) Syncfusion ASP.net Core EJ2(latest version)

3) Grid uses checkboxes for selection'

4) Grid is loaded via model

5) Custom ToolBar Button Click

6) Access the selected rows in on your index.cs page via postWhatever

This would be very helpful for many.

Thanks

Steve

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On October 18, 2019 12:49 PM UTC

Hi Steve,

Thanks for your update.

We have created a sample based on your requirement. Please refer to the below cod example and sample link for more information.

[index.cshtml]

@page

@model IndexModel

@{

ViewData["Title"] = "Home page";

}

@Html.AntiForgeryToken()

<div>First Grid</div>

<ejs-grid id="Grid1" toolbarClick="toolbarClick" allowPaging="true" load="onLoad1" toolbar="@( new List<object>() {"Add","Update","Cancel", "Selected"})">

<e-data-manager url="/Index?handler=DataSource" adaptor="UrlAdaptor"></e-data-manager>

<e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings>

<e-grid-columns>

<e-grid-column type="checkbox" width="50"></e-grid-column>

. . .

</e-grid-columns>

</ejs-grid>

function onLoad1() {

this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

}

function toolbarClick(e) {

console.log(e);

if (e.item.text == "Selected") {

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

var data = grid.getSelectedRecords();

$.ajax({

type: "POST",

url: "/Index?handler=Selected",

beforeSend: function (xhr) {

xhr.setRequestHeader("XSRF-TOKEN",

$('input:hidden[name="__RequestVerificationToken"]').val());

},

contentType: "application/json",

dataType: "json",

data: JSON.stringify({ dm: data }), //Pass the selected row index value to server side

success: function (response) {

console.log(response);

},

failure: function (response) {

alert(response);

}

});

}}

</script>

[index.cshtml.cs]

public JsonResult OnPostSelected([FromBody]Selecteddata<OrdersDetails> dm)

{

return new JsonResult(new { result =dm }) ;

}

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#toolbarclick

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Selected1348205671

Please get back to us if you need any further assistance on this.

Regards,

Pavithra S.

Reply | Reply with quote

Steve Deshaies

Replied On October 19, 2019 06:12 PM UTC

Hello,

Thanks for taking the time to provide an example.

I downloaded and ran the sample provided.

Please see screenshot attached.

Look at the breakpoint and the dm variable details. I selected two records - clicked the select button

and broke it on this line:

return new JsonResult(new { result =dm }) ;

Where in the dm is the selected records(should be 2) - I see all 8 records? I do not see any

selected identifier?

Am I missing it?

Thanks

Steve

Attachment: selectedexamplebreakpoint1_d3876adb.7z

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On October 21, 2019 09:24 AM UTC

Hi Steve,

We have checked the issue at our end but it is working fine. Please refer to the below screenshot and modified sample link for more information.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/selelctedrecords220112340

If you still face the issue please share the below details that will be helpful for us to provide a better solution as early as possible.

Share the Exact replication procedure
Share the changes in code if any

Regards,

Pavithra S.

Reply | Reply with quote

Steve Deshaies

Replied On October 22, 2019 04:25 PM UTC

Your new sample seems to work!

The fist sample you provided a few days ago is different and did not work, at first glance you no longer Stringify the result in the ajax post. I will take a deeper dive and see if it will work for me.

Thank you!

Steve

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On October 23, 2019 06:41 AM UTC

Hi Zhen,

Thanks for your update.

Please get back to us if you need any further assistance on this.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148374	Jul 6,2017 04:59 AM UTC	Oct 23,2019 06:41 AM UTC	ASP.NET Core - EJ 2	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US