loop through rows in grid and get value from cell

[Danferd Lan]

Is it possible to loop through the rows with checkbox checked and then get the value of a cell from the checked row?

[Jayaprakash Kamaraj]

Hi Danferd, 

Thank you for contacting Syncfusion support. 

In this RowSelected event of the Grid, we can collect the records on the basis of checkbox selection and push the corresponding records in the window variable. Later, you can collect the records and their primary key values using the window variable. In the Rowselected event, we have spliced the records when the checkboxes were unchecked. Please refer to the below Help Document and code example.  

  

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

  

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 

 

    <ej:Button runat='server' Type="Button" Text="getRecords" ClientSideOnClick="onClick" /> 

 

 

    <ej:Grid id="FlatGrid" ClientIDMode="Static" runat='server' AllowPaging="true">  

        <ClientSideEvents RowSelected="rowselected" DataBound="databound" /> 

        <Columns> 

            <ej:Column  Type="checkbox" /> 

            <ej:Column Field="OrderID" HeaderText="Order ID" Type="number" IsPrimaryKey="True" /> 

.. 

        </Columns> 

    </ej:Grid> 

 

    <script> 

        window.records = []; 

.. 

        function rowselected(args) { 

            if ($(args.target).prop('checked') == false) 

                window.records.push(args.data); 

            else if ($(args.target).prop('checked')) { 

                for (var i = 0; i < window.records.length; i++) { 

                    if (window.records[i].OrderID == args.data.OrderID) { 

                        window.records.splice(i, 1); 

                        break; 

                    } 

                } 

            } 

 

        } 

        function onClick(args){ 

            var obj = $("#FlatGrid").ejGrid("instance"); 

            console.log(window.records); 

        } 

 

    </script> 

 

</asp:Content> 

  

  

If you are checking the header checkbox, you have to bind the click event for them and dynamically push the records as shown in the following code example. In this, click event will be bound to the checkbox element in the DataBound event of the Grid. Refer to the following code example.   

  

<input type='button' id="btn">  

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 

 

 

    <ej:Grid id="FlatGrid" ClientIDMode="Static" runat='server' AllowPaging="true">  

        <ClientSideEvents RowSelected="rowselected" DataBound="databound" /> 

        <Columns> 

            <ej:Column  Type="checkbox" /> 

.. 

        </Columns> 

    </ej:Grid> 

 

    <script> 

        window.records = []; 

        function databound(args) { 

            //to handle the header checkbox selection  

            //works only for local dataSource  

            $('.e-checkselectall').click(function () { 

                if (!$(this).is(':checked')) 

                    window.records = []; 

                else { 

                    window.records = $("#FlatGrid").ejGrid("model.dataSource"); 

                } 

            }); 

 

        } 

 

    </script> 

 

</asp:Content> 

  

Please make a note, this solution will work only for the local data. Since we cannot get the other page records in the model.dataSource, this solution will not retrieve the data from other pages.   

  

Refer to the following API Reference section of DataBound event.  

  

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

  

Sample: http://www.syncfusion.com/downloads/support/forum/129011/ze/ASPGrid-386699735 

  

Regards,  

Jayaprakash K.  

[Jayaprakash Kamaraj]

Hi Danferd, 

When using remote data in grid it is processed based on demand loading. So we cannot get the whole data from grid.model.dataSource and we can able to retrieve only the current page data. As per your requirement you have get the checkbox details from whole grid data so to retrieve the whole data in button click we suggest you to pass the external AJAX post as like below.   

  

Refer the code example.  

function myFunc() {  

        var grid = $("#Grid").ejGrid("instance");  

        var checkeddata = [];  

...  

                $.ajax({  

                type: "POST",  

                url: "/Home/Data",  

                success: function (result) {  

                    var gridObj = $("#Grid").data("ejGrid");  

                    var data= result;  

                    for (i = 0; i < data.length; i++) {  

                        var check = data[i].Verified;  

                        if (check == true) {  

                            checkeddata.push(data[i]);  

                        }  

                    }                    

      alert("Checkbox data length :" + checkeddata.length);  

                },  

           });  

    }  

</script>  

 

Note: Since you have also performing CRUD operations in grid so we need to pass the external AJAX post to retrieve the whole data  

Please let us know if you need further assistance.  

Regards,  

 

Jayaprakash K. 

 

[Diego C Fracasso]

Hi Danferd, 

When using remote data in grid it is processed based on demand loading. So we cannot get the whole data from grid.model.dataSource and we can able to retrieve only the current page data. As per your requirement you have get the checkbox details from whole grid data so to retrieve the whole data in button click we suggest you to pass the external AJAX post as like below.   

  

Refer the code example.  

function myFunc() {  

        var grid = $("#Grid").ejGrid("instance");  

        var checkeddata = [];  

...  

                $.ajax({  

                type: "POST",  

                url: "/Home/Data",  

                success: function (result) {  

                    var gridObj = $("#Grid").data("ejGrid");  

                    var data= result;  

                    for (i = 0; i < data.length; i++) {  

                        var check = data[i].Verified;  

                        if (check == true) {  

                            checkeddata.push(data[i]);  

                        }  

                    }                    

      alert("Checkbox data length :" + checkeddata.length);  

                },  

           });  

    }  

</script>  

 

Note: Since you have also performing CRUD operations in grid so we need to pass the external AJAX post to retrieve the whole data  

Please let us know if you need further assistance.  

Regards,  

 

Jayaprakash K. 

 

I´m converting a GridView to ej.grid in my asp.net VB application. How can I do something like this?

Protected Sub Gravar(sender As Object, e As EventArgs)

For Each row As GridViewRow In GridView1.Rows  <------------------- RUNNING ALL ROWS

     If row.RowType = DataControlRowType.DataRow Then

          Dim chkRow As CheckBox = TryCast(row.Cells(0).FindControl("chkAprovar"), CheckBox)

          Dim chkNegar As CheckBox = TryCast(row.Cells(0).FindControl("chkNegar"), CheckBox)

          If chkRow.Checked Or chkNegar.Checked Then

               Dim txtTipoRow As String = row.Cells(0).Text

               Dim txtNumeroRow As String = row.Cells(1).Text

               Dim varSaldoOrc As Decimal = row.Cells(10).Text

               Dim Param As SqlParameter() = New SqlParameter(2)

               Param(0) = New SqlParameter("@p_OrigemTipo", txtTipoRow)

               Param(1) = New SqlParameter("@p_OrigemNum", txtNumeroRow)

               Param(2) = New SqlParameter("@p_Usuario", Session.Item("Usuario"))

               If varSaldoOrc >= 0 Then

                    Dim SQLComm As String = ""

                    If chkNegar.Checked Then

                         SQLComm = "EXEC [spOrcamento] @Processo = 'mN' , @OrigemTipo = @p_OrigemTipo, @OrigemNum = @p_OrigemNum, @Usuario = @p_Usuario"

                    End If

                    If chkRow.Checked Then

                         SQLComm = "EXEC [spOrcamento] @Processo = 'mA' , @OrigemTipo = @p_OrigemTipo, @OrigemNum = @p_OrigemNum, @Usuario = @p_Usuario"

                    End If

                    Try

                         ExecNQuery(SQLComm, Param)

                    Catch ex As Exception

                         btnStatus.ForeColor = Drawing.Color.Red

                         btnStatus.Text = "NÃO FOI POSSÍVEL ATUALIZAR ORÇAMENTOS! ERRO DE GRAVAÇÃO"

                    End Try

               End If

          End If

     End If

 Next

End Sub

[Farveen Sulthana Thameeztheen Basha]

Hi Diego, 

We have checked your query and we have  bind the sql dataTable to the Grid and get the corresponding checkbox column and check whether it is checked or unchecked  using sql query and perform some operations based on that and return the value. 

Please refer to the code example:- 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) 

        Dim myConnection As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("NORTHWNDConnectionString").ToString()) 

        Dim dt As DataTable = New DataTable("Orders") 

        Dim take As SqlCommand = New SqlCommand("SELECT checkbox FROM Orders WHERE IF (@CheckStatus IS FALSE) DO SOMETHING ElSEIF (@CheckStatus IS TRUE), con);", SqlDataAdapter, __InlineAssignHelper(da, New SqlDataAdapter(take))) 

        Dim dt As DataTable = New DataTable() 

        da.Fill(dt) 

        con.Close() 

        Return dt.Rows(0)("checkbox").ToString() 

    End Sub 

                               

Please refer to the online Demo Link:- 

https://asp.syncfusion.com/demos/web/grid/sqlbinding.aspx 

If we misunderstood your query, please share us the following details. 

1. Exact scenario you need to achieve. 

2. Screenshot/Video Demo to demonstrate your requirement. 

3. How you bind ejGrid in your sample project. Please share that code example(both in server and client side). 

4. If possible provide an issue reproducing sample. 

The provided information will be helpful to provide you response as early as possible. 

Regards, 

Farveen sulthana T