Frequently Done Task On Datagrid : PART - 3 with Demo

Making DataGrid Scrollable:

When we have large number of rows to display in datagrid and if our requirement does not want paging we can display the datagrid inside a div tag with specified height and width.By doing so we can view the content of datagrid inside the div tag by scrolling.

<div style="height: 250px; overflow: auto;">

<asp:DataGrid runat="server" ...>

...

</asp:DataGrid>

</div>

Scrollabale Datagrid With the header being in constant position:

The above example hides the header when we scroll down.By displaying the header in a table and making ShowHeader="False" in datagrid we can make the header to be fixed and data to be scrollable.

<div>

<table align="center" border="1" cellspacing="0" style="border-collapse:collapse;position:relative;left:-9px;">

<tr>

<td bgcolor="Navy" width="100" align="center"> <font color="White" size="4" face="Verdana"><b>FAQ ID</b></font>

</td>

<td bgcolor="Navy" width="400" align="center"> <font color="White" size="4" face="Verdana"><b>Question</b></font>

</td>

<td bgcolor="Navy" width="100" align="center"> <font color="White" size="4" face="Verdana"><b>Views</b></font>

</td>

</tr>

</table>

</div>

<div style="position:relative; vertical-align: top; height:300px; overflow:auto;">

<asp:DataGrid runat="server" id="dgPopularFAQs" AutoGenerateColumns="False" ShowHeader="False" Font-Name="Verdana" Font-Size="11pt" HorizontalAlign="Center"> <Columns>

-----------

----------

</Columns>

</asp:DataGrid>

</div>

DataGrid Summary of a Row:

When situations like displaying some data in datagrid we like to add a summary column to datagrid ie if a column salary is displayed and if we want to display total salary as the last row in our datagrid the folowing code will helps us to do it.

Summary in Datagrid Item:

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

if(e.Item.ItemType == ListItemType.AlternatingItem e.Item.ItemType == ListItemType.Item)

{

e.Item.Cells[2].Text=e.Item.ItemIndex.ToString();

if(e.Item.Cells[0].Text=="Total Rows")

{

e.Item.Cells.RemoveAt(1);

e.Item.Cells[0].ColumnSpan=2;

e.Item.Cells[0].Text="Total Rows";

e.Item.Cells[1].HorizontalAlign = HorizontalAlign.Center;

}

}

}

Summary in Datagrid Footer:

private void Datagrid2_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

string st=e.Item.Cells[2].Text ;

Calculate(st);

if(e.Item.ItemType == ListItemType.Footer )

{

e.Item.Cells.RemoveAt(1);

e.Item.Cells[0].ColumnSpan=2;

e.Item.Cells[0].Text="Total Salary";

e.Item.Cells[0].HorizontalAlign=HorizontalAlign.Center;

e.Item.Cells[1].Text = runningTotal.ToString();

e.Item.Cells[1].HorizontalAlign = HorizontalAlign.Center;

}
}


private void Calculate(string price)

{

runningTotal += Double.Parse(price);

}

Demo1

Demo2

Regards,
Satheesh