Get selected row values of any column

[Pratura]

Hi,

i cannot find an answer to the easiest question.

How to get the value of a particular column in a selected grid row in vb.net?

[Isuriya Rajan]

Hi Pratura,   

  Thanks for contacting Syncfusion support,   

  We can achieve your requirement by using getSelectedRecords method. Here, we have used RowSelected grid event to get selected row values.   

<ej:grid ID="gvAlumnos" runat='server' AllowPaging="True">   

        <ClientSideEvents RowSelected ="rowSelect" />   

        <Columns>   

           <ej:Column  Field="CustomerID" HeaderText="CustomerID" Width="75" />   

           <ej:Column  Field="OrderID" HeaderText="OrderID" />                                       

        </Columns>             

</ej:grid>   

function rowSelect() {   

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

     //getSelectedRecords method will display the selected row in a grid    

          alert(obj.getSelectedRecords()[0].CustomerID);   

   

      }   

  

Please refer to the below sample and documentation link on how to get selected row values.   

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

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Forum-499114345.zip   

Regards,   

Isuriya R.   

[Pratura]

Great.

Thank you.

I need it in JS also, but my original question was how to get the value from a grid row in VB.NET code  when i'm calling the server side function.

Thank you

[Isuriya Rajan]

Hi Pratura,   

   

To get the value from a grid row in VB.NET code and JS, you have to use theRowSelected event. Please find the below code snippets.   

   

VB.Net:   

   

You can also use OnServerRowSelected server-side event of the Grid. Please find the code example.   

   

[Default.aspx] 

<ej:grid ID="gvAlumnos" runat='server' AllowPaging="True"  

          AllowGrouping="true"  OnServerRowSelected="gvAlumnos_ServerRowSelected"> 

        <Columns> 

                <ej:Column  Field="CustomerID" HeaderText="CustomerID" Width="75" /> 

                <ej:Column  Field="OrderID" HeaderText="OrderID" /> 

                <ej:Column  Field="EmployeeID" HeaderText="EmployeeID" Width="75" /> 

                <ej:Column  Field="ShipCity" HeaderText="ShipCity" Width="75" /> 

        </Columns> 

</ej:grid>                     

                     

[Default.aspx.vb] 

 

Protected Sub gvAlumnos_ServerRowSelected(sender As Object, e As Syncfusion.JavaScript.Web.GridEventArgs) 

        Dim selectedrowindex As Integer = Convert.ToInt32(e.Arguments("rowIndex")) 

 

        Dim id As Integer 

 

        Dim data As Dictionary(Of String, Object) = TryCast(e.Arguments("data"), Dictionary(Of String, Object)) 

 

        For Each keyval As KeyValuePair(Of String, Object) In data 

 

            If keyval.Key = "EmployeeID" Then 

        //find the EmployeeID column value.  

                id = keyval.Value 

            End If 

        Next 

    End Sub 

 

  

    

  

The OnServerRowSelected event helps to get the selected ones in the server side.   

   

   

Please find the attached samples in VB.net below:   

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vb_grid434698659.zip   

   

JS:   

   

We have achieved your requirement by using rowSelected event of the ejGrid. Please find the below code snippets.   

 

  $("#Grid").ejGrid({ 

              dataSource: data, 

              allowPaging: true, 

              allowSorting: true, 

              columns: [ 

                       { field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right }, 

                       { field: "CustomerID", headerText: "Customer ID", width: 80 }, 

              ], 

            //client side event 

              rowSelected: "rowSelected", 

          }); 

function rowSelected() {    

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

     //getSelectedRecords method will display the selected row in a grid     

          alert(obj.getSelectedRecords()[0].CustomerID);    

    

      }    

 

 

     

The “rowSelected” event helps to getSelected in client side.   

   

 Please find the below attached samples and Online Documentation link about getSelectedRecords and rowSelected events.   

  

Documentation link for getSelectedRecords: https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrecords 

  

Documentation link for rowSelected: https://help.syncfusion.com/api/js/ejgrid#events:rowselected   

  

JS: https://jsplayground.syncfusion.com/lkfv40az   

  

Regards,   

Isuriya  R.   

[Pratura]

Thank you.

Is there a way to get the selected item value in vb.net without using the event and iterating through the whole set of data every time a row is selected?

Rather just clicking on a button and getting the value in the form of Me.Grid1.SelectedRows(0).Column(0).Value (i know those methods and properties don't exist, just an example)

[Mohammed Farook J]

Hi Pratura, 

 

Sorry for inconvenience caused. 

 

We have validated your requirement , currently we don’t have support directly get selected value through method in server side . So We suggest to use  the selected values are stored in global variable through Server “RowSelected” event of Grid and you can get selected valued from the global variable . please find the code example 

 

 

[code behind] 

 

Public Class _Default 

    Inherits System.Web.UI.Page 

 

    Dim Shared selectedData  'global  variable declaration  

 

 

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

   Dim selectedRows As Object 

        selectedRows = selectedData 'global  variable resue 

    End Sub 

 

    Protected Sub gvAlumnos_ServerRowSelected(sender As Object, e As Syncfusion.JavaScript.Web.GridEventArgs) 

        Dim selectedrowindex As Integer = Convert.ToInt32(e.Arguments("rowIndex")) 

 

        Dim id As Integer 

        

        Dim data As Dictionary(Of String, Object) = TryCast(e.Arguments("data"), Dictionary(Of String, Object)) 

 

        For Each keyval As KeyValuePair(Of String, Object) In data 

 

 

            If keyval.Key = "EmployeeID" Then 

                id = keyval.Value 

            End If 

        Next 

        selectedData = data 

 

 

    End Sub 

 

 

 

End Class 

 

[aspx] 

 

   <asp:Button ID="selectRow" runat="server" OnClick=" Submit" Text="getSelectedRecords" /> 

                      <ej:grid ID="gvAlumnos" runat='server' AllowPaging="True"  

. . . 

                    

                    </ej:grid>                     

. 

In above code example we have stored selected values in global  variable  through “RowSelected” event of Grid . when get the selected Rows through global  Variable as “selectedData”.  Please find the screen shot. 

 

 

Get selected data from “RowSelected” event of Grid and its stored in Global  variable as SelectedData. 

 

 

 

 

Get selected rows data from global variable when click external button : 

 

 

 

 

 

Regards, 

J.Mohammed Farook 

 

 

[Pratura]

Thank you.

The code works, the problem now is that whenever i click on a row the page refreshes.

I tried putting the grid in the update panel too, it didn't help.

Also, when the page is refreshed the grid is not shown anymore.

The page is blank, since i only have the grid on the page.

On the server side when debugging, prior to refresh, the selectedrow event captures the data just as it should.

[Pratura]

I have moved to client side selected row and passing the data with ajax

The server side event was not satisfactory.

Everything works now.

Thank you for your help.

[Venkatesh Ayothi Raman]

Hi Pratura, 

Thanks for the update. 

 

The reported issue was reproduced in previous version (13.2.0.29) only when using custom toolbar items in Grid. So, please ensure your version. If you are using old version of Essential studio then upgrade to the Latest version of Essential studio from the following link,   

Link: https://www.syncfusion.com/forums/124709/essential-studio-2016-volume-2-release-v14-2-0-26-is-available-for-download 

Refer the following steps to upgrade your project to our latest version. 

1. Please download and Install the Essential Studio latest version. 

2. Replace the Syncfusion latest version scripts and CSS in your project from the following location. 

Scripts and CSS: [installed Location]\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets 

3. We have listed the required Namespaces, DLLs, script and CSS files to work with the ASP.Net MVC Control. So we need to replace all the following files as a latest one. 

 

DLLs	Syncfusion.EJ.dll  Syncfusion.EJ.Web.dll
Script files	Syncfusion script files:  ej.web.all.min.js  ej.unobtrusive.min.js  External Script files:  jquery.min.js  jquery.easing.min.js  jsrender.min.js  jquery.validate.min.js
CSS files	ej.widgets.core.min.css

 

You can find the scripts and css files in the following locations: 

Script Location: [installed Location]\Syncfusion\Essential Studio\14.2.0.26\JavaScript\assets\scripts\web   

CSS Location: [installed Location]\Syncfusion\Essential Studio\14.2.0.26\JavaScript\assets\css\web   

DLL Location: [installed Location]\Syncfusion\Essential Studio\14.2.0.26\Assemblies   

4. Please refer to the latest version (14.2.0.26) of required DLLs in your project and change the referred version in project Web.config file which is located under the project’s root directory.   

 [web.config] 

<compilation debug="true" targetFramework="4.5" > 

    <assemblies> 

                <add assembly="Syncfusion.EJ, Version= 14.2400.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 

                <add assembly="Syncfusion.EJ.Web, Version= 14.2400.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 

    </assemblies> 

</compilation> 

 

5. Clear the browser cache, before you run the upgraded project.   

You can also use server side row selected event by upgrading to the Essential studio latest version. We are happy to hear that your requirement is achieved. 

 

Regards, 

Venkatesh Ayothiraman.