CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Article » Useful Datagrid Tips   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Useful Datagrid Tips

By Satheesh babu
Posted On Apr 29,2008
Article Rating: (Login)
Be first to rate
this article.
No of Comments: 6
Print this article.
Category: ASP.Net

Subscribe to our feed!

Useful Datagrid Tips

Datagrid is one of the most widely used controls in asp.net applications. It is one of the powerful controls which are not only used to display the data in tabular view to the client but also to achieve lots of other tasks. There are some frequent queries that are being asked in most of the forums and UG’s regarding datagrid. I have compiled a list of useful tips from my previous articles and posted it here. This article will discuss on the following tasks.

·          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




ASP.Net Hosting

Recent Articles

Row Summary in Datagrid
Sometimes we will have requirements to add all the value of a column and display it in the footer. For example, if a column salary is displayed and if we want to display total salary as the last row in our datagrid the following 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);

}

See it in action


Changing the Row color on MouseOver in Datagrid
To change the Row color when we move the cursor over the datagrid we can use the following code in ItemDataBound event.

 

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

{

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

{

e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFC0C0'");

e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#C0C0FF'");

}

}

Changing the Row color in Datagrid Based on a Row Value
To change the Row color in the datagrid based on some values in a row we can use the following code in ItemDataBound event,

protected void dgContacts_ItemDataBound(object source, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

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

{

string name=dgContacts.Items[e.item.ItemIndex].Cells[0].Text;

if (name == "Babu")

{

e.Item.BackColor = System.Drawing.Color.AliceBlue;

}

}

}

Auto Generate Serial Number in Datagrid
To generate auto number for the rows in datagrid we can use the following code in ItemDataBound event.

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

{

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

{

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

}

}

 

Conclusion

Thus we have learnt a handful of useful tips that can be done on datagrid control. Read my article on Useful GridView Tips here.

Happy Coding!!

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    prvYH5 , [url=http://lagqpttevicl.com/]lagqpttevicl[/url], [link=http://fwlwnpgmgcul.com/]fwlwnpgmgcul[/link], http://oyjdefldljzp.com/
    prvYH5 , [url=http://lagqpttevicl.com/]lagqpttevicl[/url], [link=http://fwlwnpgmgcul.com/]fwlwnpgmgcul[/link], http://oyjdefldljzp.com/
    LookingAnswers
    2 big thumbs up.....
    Excellent
    Excellent Article.. I got what am looking for..
    Keep posting..
    Useful GridView Tips
    Very good
    Datagrid
    Hi i am using gridview for displaying records.at first i have enterd those record by using multline textbox. there are 10 record and i would like to show those records one by one vertically in grid. can u help me to solve this problem. rajeshkharvi@gmail.com
    raja
    best one