Submit Selected Grid Rows To Server

[Zhen Liu]

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

[Venkatesh Ayothi Raman]

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> 

 

 

 

<script type="text/javascript"> 

 

    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. 

[Chris]

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

[Farveen Sulthana Thameeztheen Basha]

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.

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

Regards,

Farveen sulthana T

[Steve Deshaies]

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.

1. Complete Grid code example(server and client end).
2. Screenshot if you have faced any issue.
3. Do you need selected records on external button click or while on selecting the records.
4. 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

[Pavithra Subramaniyam]

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> 

 

<script> 

    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. 

[Steve Deshaies]

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

[Pavithra Subramaniyam]

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. 

 

1. Share the Exact replication procedure
2. Share the changes in code if any

 

Regards, 

Pavithra S. 

[Steve Deshaies]

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

[Pavithra Subramaniyam]

Hi Zhen,  

 

Thanks for your update. 

 

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

 

Regards, 

Pavithra S.