|
·
Tool Tip on Datagrid Cells.
·
Change datagrid cell text based on the dropdownlist selection in
datagrid.
·
Access textbox in footer of the datagrid.
·
Making datagrid scrollable.
·
Scrollable Datagrid With the header being in constant
position.
·
Row Summary in Datagrid.
1. Summary in Datagrid Item.
2. Summary in Datagrid Footer.
·
Changing the Row color on MouseOver in Datagrid.
·
Changing Color of a Row in Datagrid Based on a Row Value.
·
Auto Generate Serial Number in Datagrid.
Tool Tip on Datagrid Cells
The following code will show tool tip on datagrid
cells.
protected void DataGrid_ItemDataBound(object sender,
DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.AlternatingItem
e.Item.ItemType == ListItemType.Item)
{
e.Item.Cells[1].ToolTip = e.Item.Cells[2].Text;
}
}
Change datagrid cell text based on the dropdownlist
selection in datagrid
The code below can be used
to change the datagrid cell text based on the selection made on the dropdownlist
in datagrid.
protected void DataGrid1_ItemDataBound(object sender,
DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.AlternatingItem
e.Item.ItemType == ListItemType.Item)
{
string[] options = { "Satheesh", "Babu", "Ram" };
DropDownList list =
(DropDownList)e.Item.FindControl("ItemDropDown"); list.DataSource = options;
list.DataBind();
e.Item.Cells[2].Text=list.SelectedItem.Text;
}
}
In HTML view, find the dropdownlist inside the datagrid
tag,
<ItemTemplate>
<asp:DropDownList id="ItemDropDown"
OnSelectedIndexChanged="DropDown_SelectedIndexChanged"
Runat="server"
AutoPostBack="True"></asp:DropDownList>
</ItemTemplate>
//This event is called whenever the dropdown selected item
is changed,dont
// forget to set autopostback to true for the dropdown
protected void DropDown_SelectedIndexChanged(object sender,
EventArgs e)
{
DropDownList list = (DropDownList)sender;
TableCell cell = list.Parent as TableCell;
DataGridItem item = cell.Parent as DataGridItem;
int index = item.ItemIndex;
item.Cells[0].Text=list.SelectedItem.Text;
//Setting Cells[0] to selected text
}
See it in action
Access textbox in footer
of the datagrid
By using the following code we can access the controls in
footer of the datagrid,
private void dgCTF_ItemDataBound(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemIndex==-1 &
e.Item.ItemType==ListItemType.Footer)
{
TextBox t1=(TextBox)e.Item.FindControl("txtFerVal");
t1.Text="Satheesh babu";
}
}
Making DataGrid
Scrollable
When we have large number of rows to display in datagrid
and if our requirement does not require paging then we can make the datagrid
scrollable by putting it inside a div tag with specified height and width. By
doing this 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>
Scrollable 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. Refer the code below,
<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>
See it in action
|