1. Home
  2. Forum
  3. ASP.NET MVC
  4. Syncfusion Grid with Checkboxes and POST data to Controller

Syncfusion Grid with Checkboxes and POST data to Controller

Hi there,
Is there a way I can load data into a grid and have a checkbox on each line.
I check any of the boxes and POST the data back to my Controller?
I am using version 13.4.0.63
Thanks
Neill

7 Replies
VN Vignesh Natarajan Syncfusion Team October 17, 2017 08:32 AM UTC

Hi Neil, 
 
Thanks for using Syncfusion product. 
 
We have achieved your requirement through ColumnTemplate feature and send the ajax post to the controller in the RecordClick event of the Grid. please refer the below code snippet 
Cshtml 
    col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Priority(3).Width(75).Format("{0:C}").Add(); 
            col.Field("ShipName").HeaderText("Ship Name").Width(110).Add(); 
            col.Field("ShipCity").HeaderText("Ship City").Width(90).Priority(2).Add(); 
            col.Template("#check").HeaderText("CheckBox").Width(50).Add(); 
        }) 
        .ClientSideEvents(e=>e.RecordClick("recordClick"))) 
</div> 
 
JS 
<script id="check" type="text/x-jsrender">     @*to render the checkbox in the Grid*@ 
    <input id="{{:OrderID}}"type="checkbox"/>   @*To set the unique id value*@  
</script> 
<script type="text/javascript"> 
    function recordClick(args) { 
        if (args.columnName == "CheckBox" && $("#" + args.data.OrderID).is(":checked")) {     @* ajax post will be called only when checkbox is clicked*@ 
            var val = args.data; 
            $.ajax({ 
                type: "POST", 
                url: "/Grid/DataSourceVentas2", 
                data: { 
                    value: JSON.stringify(val)          // pass the current rowData as the parameter 
                }, 
                success: function (result) { 
                } 
            }); 
        } 
    } 
</script> 
 
C# 
 
public ActionResult DataSourceVentas2(string value) 
        { 
           var val = value;  // retrun value in form of string 
           var value1 =  Newtonsoft.Json.JsonConvert.DeserializeObject(value); // retrun value in form of object 
            return Json(value1,JsonRequestBehavior.AllowGet); 
        } 
 
Please refer the below screenshot 
 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Refer our online documentation for you reference 
 
 
if we misunderstood your query please get back to us with more details 
 
Regards, 
Vignesh Natarajan 


NE Neill October 20, 2017 06:30 AM UTC

Thank you for the reply.


I am loading the grid from a partial view.

  .Columns(col =>

                                {

                                    //col.Field("IsSelected").Type("checkbox").Width(20).Add();

                                    col.Field("SerialNumber").HeaderText("Serial Number").Width(60).Add();

                                    col.Template("#check").HeaderText("CheckBox").Width(50).Add();

                                })

                                .ClientSideEvents(e => e.RecordClick("recordClick")))

When I add the above click event to the grid columns, the grid no longer renders because I get the following error:

"GET http://localhost:8040/Jobcard/GetOpenJobcardsByModel?deviceModel=AFR2-HV-B3 500 (Internal Server Error)"

Neill

*Edit*

Looking at the code is my assumption correct that the ajax method is called each time a checkbox is checked? If this is the case then it is not what I am trying to achieve.

I want to be able to check any number of checkboxes, click a button and POST all the checked boxes data to my controller.

Neill





MS Mani Sankar Durai Syncfusion Team October 20, 2017 11:48 AM UTC

Hi Neill, 

We have analyzed your query and we found that you want to pass multiple row data on external button click when selection multiple rows in grid. 
Based on your requirement we have prepared a sample that can be downloaded from the below link 
In this sample we have performed multiple check box selection in grid based on the below Kb link 
Now when clicking the external button we have passed the selected records in grid to the controller (server side) using AJAX post. 
Refer the code example 
@(Html.EJ().Grid<object>("Grid") 
        .Datasource((IEnumerable<object>)ViewBag.data) 
        .AllowPaging() 
     .SelectionType(SelectionType.Multiple) 
 
        .Columns(col => 
            { 
               ... 
            }) 
      .ClientSideEvents(eve => eve.Create("create").ActionComplete("complete").RecordClick("recordClick")) 
) 
 
... 
<script type="text/javascript"> 
    $(function () { 
        $("#btn").ejButton({ 
            click: function (args) { 
                var grid = $("#Grid").ejGrid("instance"); 
                var val = grid.getSelectedRecords();   //get the grid selected records 
                $.ajax({ 
                    type: "POST", 
                    url: "/Home/DataSourceVentas2", 
                    data: { 
                        value: JSON.stringify(val)          // pass the current rowData as the parameter 
                    }, 
                    success: function (result) { 
                    } 
                }); 
 
            } 
        }) 
    }) 
... 
    </script> 

Note: At initial we have rendered the button in View page and upon clicking the button we have rendered the grid from the partial view page. When using getSelectedRecords we can pass only the current page records. 
Refer the documentation link 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


NE Neill October 24, 2017 08:56 AM UTC

Thank you,


With the sample I have managed to my code working.

I have 2 questions though.

1. When I use the "Select All" checkbox in the grid header, the first row checkbox and the checkbox in the header is not selected. All other rows are selected.


2. On my submit button, I am using custom classes for the button look. After the grid is rendered the button no longer looks the way it should.

It should look like this: 


But instead it looks like this:


It is as if the CSS class is being overwritten. I am using bootstrap for the button.

   


Neill


*EDIT*

As a side note I'm not sure if the problem is because in my ajax success, I have to call ej.widget.init($('#OpenJobCards')) or else my grid does not render.

i see if the supplied sample that that call is not neccessary?


*EDIT AGAIN*

I created a brand new project from the Syncfusion Template and the same problem occurs.

Please help me sort this out ASAP.

Neill






VN Vignesh Natarajan Syncfusion Team October 24, 2017 12:37 PM UTC

Hi Neil, 


Query1: When I use the "Select All" checkbox in the grid header, the first row checkbox and the checkbox in the header is not selected. All other rows are selected. 

In our older versions, we don’t have a default support to select multiple rows in grid by using Checkbox column. So, we have achieved it by using ColumnTemplate feature. We suspect that you have used advanced version than the 13.4.0.63 version from your provided details and we have provided the inbuilt support to select the multiple rows using Checkbox from 14.3.0.49 version itself.  

Please find the release notes details from below link 


So, we suggest you to use Checkbox column to select the multiple column in Grid  

Refer the below code snippet 

  .Columns(col => 
            { 
                col.Type("checkbox").Width(50).Add();              
                col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Add(); 
                col.Field("CustomerID").HeaderText("Customer ID").Add(); 

Refer the screenshot 

 
 



Note: Clicking on the SelectAll checkbox will select all the records in the Grid. If you want to select only the current page record please refer the below code, we have achieved that requirement using RowSelecting event of Grid  


  .ClientSideEvents(eve => eve.Create("create").ActionComplete("complete").RowSelecting("rowselect")) 
 
function rowselect(args) { 
         
            var flag = false; 
            if ($(args.target).hasClass("e-checkselectall")) { 
                if (!($(args.row).find("input").is(":checked"))) // to cancel the selection on unchecking the box 
                    args.cancel = true;     // to cancel the selecting of all reord in grid 
                flag = true; 
            } 
            if (flag == true) { 
                if (!($(args.row).find("input").is(":checked"))) { 
                    var check = $("#Grid").ejGrid("instance"); 
                    check.selectRows(0, this.model.currentViewData.length - 1); // to select the row based on index,  
                } 
            } 
    } 

Refer our online documentation for your reference 




Query2:  “On my submit button, I am using custom classes for the button look. After the grid is rendered the button no longer looks the way it should” 

We have applied styles to the Button and we are able to reproduce the reported issue. We suggest you to apply the styles using important property as Grid Css is overrides the existing Css.  

Refer the below code 

<style type="text/css"> 
    .violet{ 
        background-color:blueviolet !important; 
    } 
</style> 

Regards, 
Vignesh Natarajan 


NE Neill October 24, 2017 01:26 PM UTC

Goo day,

Apologies, I did indeed upgrade to the latest version.

With the code you have provided it is working perfectly.

Also I changed this line:

 $("#btn").ejButton({ 

to not use ejButton, but a normal click event:

  $("#btn").off().on("click", function() {

and this no longer overwrites the CSS class and my button looks the way it should.

Many thanks for your continued support.

Neill



VN Vignesh Natarajan Syncfusion Team October 25, 2017 12:36 PM UTC

Hi Neill, 

Thanks for your update. 

We are happy that you query has been resolved. 

Kindly get back to us if you further assistance in future. 

Regards, 
Vignesh Natarajan.  


Loader.
Up arrow icon