1. Home
  2. Forum
  3. jQuery
  4. EJ1 Grid get checkbox checked Value

EJ1 Grid get checkbox checked Value

Hi Export 
I'm use EJ1 Grid Like Below


grid template do checkbox 

and I need a  button click get checked value , I saw the JS document ,no found JS how to get grid template checked value ~ 
Thanks  

3 Replies 1 reply marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 13, 2021 11:33 AM UTC

Hi Tom, 

Thanks for contacting Syncfusion Support. 

Query#:-  I need a  button click get checked value ,I saw the JS document ,no found JS how to get grid template checked value 
 
To achieve this requirement, we suggest you to use Type checkbox column. While using Type checkbox column, corresponding row will get select/deselect based on check/uncheck of the checkbox.  On external button click, we can get the corresponding checked/selected records with getSelectedRecords method of the Grid.  
 
Refer to the code below:- 
<input type="button" value="Records" onclick=" onClick()" /> 
@(Html.EJ().Grid<object>("FlatGrid") 
                 .Datasource((IEnumerable<object>)ViewBag.datasource) 
                    .Columns(col => 
                    { 
                       { 
                                         col.Field("Verified").HeaderText("Verified").Type("checkbox").Width(50).TextAlign(TextAlign.Right).Add(); 
                           .   .    . 
                        } 
                    })          
 
) 
<script> 
    function onClick(args) { 
        var grid = $("#FlatGrid").ejGrid("instance"); 
        grid.getSelectedRecords();      
    } 
</script> 
 
 
Refer to the documentation Link:- 
 
Solution #2:- 
 
If you want to use Template column(to render checkbox) instead of Type checkbox column, you can get the checked records using TemplateRefresh event of the Grid.  We have render the checkbox as ejCheckBox and bind change event for ejCheckBox using TemplateRefresh event of the Grid. Using the checkbox id of the checked records we have get the index and get the corresponding record from getCurrentViewData method. So that you can get the checked record value using external button click accessed through global variable. 
 
<script type="text/x-jsrender" id="Template"> 
    <input type="checkbox" id='{{:OrderID}}check' class="check" />      //place checkbox with unique value 
</script> 
<input type="button" value="Records" onclick=" onClick()" /> 
@(Html.EJ().Grid<object>("FlatGrid") 
                 .Datasource((IEnumerable<object>)ViewBag.datasource) 
                     .ClientSideEvents(eve =>  { 
                        eve.TemplateRefresh("templateRefresh"); 
                      }) 
                     
                    .Columns(col => 
                    { 
 
                        { 
                            col.Field("Verified").HeaderText("Verified").Templare("#Template").Width(50).TextAlign(TextAlign.Right).Add(); 
                            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                             
                        } 
                    }) 
        ) 
<script> 
    var checkedrec = []; 
    function templateRefresh(args) { 
        $(args.cell).find(".check").ejCheckBox({ "change": Change });  //render checkbox as ejCheckBox and bind change event. 
    } 
    function onClick(args) { 
        console.log(checkedrec)  // get checked records on button click 
    } 
    function Change(args) { 
        var Index = $("#" + args.model.id).closest("tr")[0].rowIndex; 
        var grid = $("#FlatGrid").ejGrid("instance"); 
        var records = grid.getCurrentViewData()[Index];  //from getCurrentViewRecords method get the corresponding checked record 
        checkedrec.push(records); 
    } 
</script> 
 
Refer to the API Link:- 
 
If your requirement is different from above solution share us the following details. 
 
  1. Share Template rendering code.
  2. Detail explanation of your requirement(whether you need to get the checked records/checked value).
  3. Screenshot to demonstrate your requirement.
 
Regards, 
Farveen sulthana T 


Marked as answer
LH line hammer May 17, 2021 06:14 AM UTC

You can use the jQuery prop() method to check or uncheck a checkbox dynamically such as on click of button or an hyperlink etc.
 
$("#radio1").prop("checked", true);

To check the current state of the checkbox you must instead use the jQuery checked property . It is dynamically updated as the user checks/unchecks.
 
if(document.getElementById('radio1').checked) {
    alert("Checked");
}



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 18, 2021 07:01 AM UTC

 
Hi line, 

Thanks for your suggestion. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon