We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Submit Selected Grid Rows To Server

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

9 Replies

VA Venkatesh Ayothi Raman Syncfusion Team 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.  
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. 



CH Chris 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


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team 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:-



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



SD Steve Deshaies replied to Farveen Sulthana Thameeztheen Basha 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:-



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


PS Pavithra Subramaniyam Syncfusion Team 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> 
 
<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 }) ; 
             
        } 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 



SD Steve Deshaies 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


PS Pavithra Subramaniyam Syncfusion Team 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. 
 
 
 
 
 
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. 



SD Steve Deshaies 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


PS Pavithra Subramaniyam Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon