Get columns of select row to appear on labels or textbox controls

[Teddy Kubheka]

Greetings, 

I have a grid table and below there are some controls like textboxes and labels. I would like for some of the selected grid row columns to be loaded into the textbox/label controls. This can either be onClick or on some button press event.

Thank you

[Farveen Sulthana Thameeztheen Basha]

Hi Teddy Kubheka,

Greetings from Syncfusion.

To display selected grid row details in textboxes or labels, you can use the RowSelected event of the Grid component. This event provides the selected row’s data and columns details.

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

Using the RowSelected Event:

The following example demonstrates how to retrieve the selected row details and update a textbox accordingly:

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" >

            <ClientSideEvents RowSelected="rowSelected" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" ActionComplete="complete" />

            <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75">

                </ej:Column>

                   .    .      .

            </Columns>

        </ej:Grid>

    </div>

 

     <asp:TextBox ID="OrderId" runat="server"></asp:TextBox>

 

    </ej:Button>

 

    <script>

 

       function rowSelected(args) {

          var selectedData = args.selectedData; // Get selected data from the grid

          document.getElementById('<%= OrderId.ClientID %>').value = selectedData.OrderID;   

        

       }

      </script>

Using getSelectedRecords Method

Alternatively, you can retrieve selected row details using the getSelectedRecords method when clicking a button.

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

    <ej:Button ID="refresh" runat="server" Type="Button" Text="Refresh" ClientSideOnClick="rowDetails">

 

      <script>

 

        function rowDetails(args) {

            var gridObj = $('#<%= FlatGrid.ClientID %>').data("ejGrid");

            gridObj.getSelectedRecords();     // get row details from getSelectedRecords method

        }

       </script>

Additionally, we would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive. This new-generation data grid control offers several benefits over our existing EJ1 Grid control like better performance, touch friendliness, light weight, and much more. JS2 DataGrid offers 2–3x improved performance in many scenarios.  The Essential JS 2 documentation is regularly updated and maintained.

     

We suggest you look into our following product page for more details.    

https://www.syncfusion.com/javascript-ui-controls/js-data-grid     

https://ej2.syncfusion.com/javascript/documentation/getting-started/webforms

https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/grid-overview.html

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

Regards,
Farveen sulthana T