Get checkbox values in grid - template column

[Storee Co]

I have template column like this:

<ej:Column Template="<input type='checkbox' id='checkDeliver'>"></ej:Column>

After grid, I have a button:

<input type="button" onclick="approveDelivery()" value="Deliver" />

When clicking the button, I need to loop through the grid and get all the rows that are checked.  Not sure how to get the value of controls in the template column.

Thanks,

Bryon

[Farveen Sulthana Thameeztheen Basha]

Hi Bryon,

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()" /> 

 

<ej:Grid ID="Grid" runat="server" AllowScrolling="True" AllowSorting="True" AllowPaging="true">

             <ClientSideEvents TemplateRefresh="refresh" />

            <Columns>

               

                <ej:Column Field="Verified " HeaderText="Verified" Template="Template"  Width="110" />

              

            </Columns>

        </ej:Grid>

 

<script> 

    var checkedrec = []; 

    function refresh(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:- 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

https://help.syncfusion.com/api/js/ejcheckbox#events:change 

Otherwise if you are using Type checkbox column instead of Template column you can use getSelectedRecords method of the Grid. Refer to the below Links:-

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

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

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

Regards,
Farveen sulthana T