Instructor-led online courses : ASP.NET Core 2.2, Angular 7, and ASP.NET Core Design Patterns. Read more...
<%@ Page %>

HOW TO: Display DataGrid in small screen area without using Paging

Introduction

Paging is perhaps one of the most frequently features of DataGrid web control. Paging provides following advantages:
  • Display small set of data from huge collection
  • Save browser window area by dividing entire data into pages
Paging requires you to post back the web form each time you want to change the page. Consider a case when you have say 100 records to be displayed. This is not really huge data for the kind of application you are developing. So, you do not really need paging. At the same time, however, you want to save browser window space because displaying 100 records is taking too much of screen space. How to overcome this? Read on...

Creating web form with DataGrid

We will first create a web form that contains a DataGrid bound with a database table. We will call this web form as WebForm1. The markup looks like this:
<%@ Page Language="vb"%>
<HTML>
<HEAD>
	<title>WebForm1</title>
</HEAD>
<body;>
	<form id="Form1" method="post" runat="server">
		<asp:DataGrid id="DataGrid1" runat="server">
		</asp:DataGrid>
	</form>
</body>
</HTML>
In the Page_Load event we will bind DataGrid as usual:
Dim connstr As String = 
"Integrated Security=SSPI;Initial Catalog=Northwind;
Data Source=SERVER\NetSDK"
Dim cnn As New SqlConnection(connstr)
Dim da As New SqlDataAdapter("select * from employees", cnn)
Dim ds As New DataSet()
da.Fill(ds, "employees")
DataGrid1.DataSource = ds
DataGrid1.DataBind()

Creating web form that hosts this DataGrid

Now, we will create the main form on which you intend to show the Data (say DataGridHost.aspx). We will use IFRAME HTML tag that will point to WebForm1 we developed previously. Following code show that:
<%@ Page Language="vb"%>
<html>
	<head>
		<title>DataGridHost</title>
	</head>
	<body;>
	<iframe src="webform1.aspx">
	</iframe>
	</body>
</html>
This form may have other web control just like any other web form. Once this form gets displayed the DataGrid from WebForm1 will be shown in the IFRAME. Note that IFRAME tage is specific to Internet Explorer.

Bipin Joshi is a software consultant, trainer, author, yoga mentor, and spiritual guide having 24+ years of experience in software development, consulting, and training. He conducts instructor-led online training courses in ASP.NET Core, ASP.NET MVC, and Design Patterns for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get article updates : Facebook  Twitter  LinkedIn

Posted On : 26 April 2002


Tags : ASP.NET Server Controls JavaScript Data Controls


Subscribe to our newsletter

Get monthly email updates about new articles, tutorials, code samples, and how-tos getting added to our knowledge base.

  

Receive Weekly Updates