How to Get Rows of DataGrid in JavaScript
DataGrids are control structures used in web programming to present a large amount of data in a neat, clean, tabular format on the web page. The DataGrid connects to the underlying database, using database connectivity controls and data objects. You can display the data from one or more tables in a form that is concise and easy to read. You can make changes to the data in the DataGrid, as required, and these changes can be passed back to the underlying database. You can use JavaScript code to perform client-side actions on the rows in the DataGrid, such as returning a row count.
Other People Are Reading
Instructions
-
-
1
Launch your ASP.NET editor to create an ASP.NET page. If you are using a development environment, such as MS Visual Studio, you would create a project by selecting “File” then “New Project” then choosing the“ASP.NET Windows Application” under your chosen language. If you are an advanced user and have already coded the DataGrid control, you may use a simple text editor, such as Notepad, to add the JavaScript code to the ASP.NET file, provided you save the file on your web server with an “aspx” extension.
-
2
Drag a DataGrid control from the Toolbox window in your editor’s development environment. Follow the instructions in the wizards to configure the control.
-
-
3
Create a database connection using the “Add New Connection” wizard from the “Server Explorer” window in Visual Studio. Follow the instructions in the wizard to create and configure the connection.
-
4
Write all the code needed populate the DataGrid control. You will need to create and configure a data source. You may choose to use a stored procedure on the database by locating the database connection in the “Server Explorer” then choosing the “Add New Stored Procedure” option. Type the code for the procedure in the editor window and save it.
-
5
Connect the DataGrid to the database connection by choosing the “Choose Data Source” option from the “DataGrid Tools” menu and following the instructions in the wizard.
-
6
Switch to the “code behind” page by clicking on the code-behind tab. You will need to intersperse the JavaScript code with the ASP.NET code on the code-behind page, a technique called “inline coding.”
-
7
Type the following code to iterate over every row in the DataGrid using JavaScript and return the number of rows:
<script language="javascript" type="text/javascript">
function GetRows(SelCriteria)
{
var dGIterator = document.getElementById("DataGridName");
var rowCount = dGIterator.rows.length;
}
</script>
You can add code into the script to perform additional processing on the rows of the DataGrid, as needed.
-
1
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
