Solved

DataGrid changes, combining multiple columns under one heading, adding text, adding mouse overs

Posted on 2004-08-03
7
715 Views
Last Modified: 2009-07-29
I'd like help making a few changes to a typical datagrid. I haven't been able to search for tutorials for these changes, because I'm not exactly sure what to search for.

1. I'd like to combine three columns under one heading. For example, the heading should be called Description and the columns under it are grade, season, and year.

2. I'd like to add text in each cell along with the data from the database. For example, under one heading named 'Registration', the text should be 'starting date' with a date from one db column, and 'ending date' with a date from another db column.

3. I'd like to add a link column to the datagrid with an image that changes when the mouse goes over it.

4. I'd like to add a tooltip to the element that says something like 'click here to go to 'name'', with name being a value from the database.

I really appreciate any tips or links to some tutorials for these changes. Thanks.
0
Comment
Question by:tmhoang
7 Comments
 
LVL 25

Assisted Solution

by:nauman_ahmed
nauman_ahmed earned 50 total points
Comment Utility
Hi,

You are talking about adding subheadings in datagrid right? The following tutorial will help you:

http://aspnet.4guysfromrolla.com/articles/072603-1.aspx

Best, Nauman
0
 
LVL 17

Assisted Solution

by:AerosSaga
AerosSaga earned 150 total points
Comment Utility
This shows you how to create the calculated columns:

I would add a template column and make an itemdatabound subroutine to handle the OnItemDataBound event (put OnItemDataBound="DataGrid1_ItemDataBound" in the HTML source between the datagrid tags

Each time a row is added, it will call this subroutine and you can do math with each cell of the row(item)

    Protected Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
         'assuming template column will be column #7 and the dropdown list is column 5 and the quantity is column 6
         e.item.cells(7).text = CStr(CDbl(e.item.cells(6).text) * CDbl(CType(e.item.cells(5).controls(0) ,DropDownList).SelectedItem.Text)
    End Sub

As for the mouseover effects, you will have to use javascript:

Regards,

Aeros
0
 
LVL 17

Expert Comment

by:AerosSaga
Comment Utility
Heres the onclick bit:

<input type="hidden" name="__EVENTTARGET">
<input type="hidden" name="__EVENTARGUMENT">
<script language="javascript">
function __doPostBack(eventTarget, eventArgument)
{
      var theform = document.Form1;
      theform.__EVENTTARGET.value = eventTarget;
      theform.__EVENTARGUMENT.value = eventArgument;
      theform.submit();
}
</script>
__________________________________________________________________________________________________________-

Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
   BindGrid()
End If
end Sub

Private Sub DataGrid1_ItemCreated
(ByVal sender As Object,
ByVal e As DataGridItemEventArgs)
Handles DataGrid1.ItemCreated
If e.Item.ItemType = ListItemType.Item
Or e.Item.ItemType = ListItemType.AlternatingItem
Or e.Item.ItemType = ListItemType.SelectedItem Then
e.Item.Attributes.Add
("onmouseover", "this.style.backgroundColor=
'beige';this.style.cursor='hand'")
e.Item.Attributes.Add
("onmouseout", "this.style.backgroundColor='white';")
e.Item.Attributes.Add
("onclick",
"javascript:__doPostBack
('" & "DataGrid1:" & "ctrl" &
e.Item.ItemIndex & ":ctrl0','')")
End If
End Sub

Private Sub DataGrid1_SelectedIndexChanged
(ByVal sender As System.Object,
ByVal e As System.EventArgs)
Handles DataGrid1.SelectedIndexChanged
DataGrid1.SelectedItem.Attributes.Item("onmouseover") =
"this.style.cursor='hand'"
DataGrid1.SelectedItem.Attributes.Remove("onmouseout")
End sub

Regards,

Aeros
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 9

Expert Comment

by:noulouk
Comment Utility
0
 

Author Comment

by:tmhoang
Comment Utility
I found a solution for grouping columns under the heading by following the above links. Here's what I did:

public void dg_ItemCreated(object sender, DataGridItemEventArgs e)
{
      if (e.Item.ItemType == ListItemType.Header)
      {
            e.Item.Cells[2].Text = "Organization Name";
            e.Item.Cells[3].ColumnSpan = 2;
            e.Item.Cells[3].Text = "Location";
            e.Item.Cells.RemoveAt(4);
      }
}

I'm now working on the other problems. I'll return later. Thanks everybody.
0
 
LVL 9

Accepted Solution

by:
noulouk earned 200 total points
Comment Utility
Part 3: you can use the custom button rollover server control:
http://aspnet.4guysfromrolla.com/articles/091703-1.aspx
0
 
LVL 2

Assisted Solution

by:waterhidden
waterhidden earned 100 total points
Comment Utility


you can do such kind of operations in itemdatabound:

study on this piece of code,


    Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
'normal rows (not head or footer)
            e.Item.Attributes.Add("onclick", "window.open('../TalepAyrinti.aspx?talepno=" & e.Item.Cells(0).Text & "','DisplayPhoto'," & _
            "'width=650,height=450,scrollbars=yes,status=no,toolbar=no,menubar=no,resizable=no,left=0,top=0')")

            e.Item.Attributes.Add("onmouseover", "this.style.cursor = 'hand';")

        ElseIf e.Item.ItemType = ListItemType.Footer Then
            e.Item.Cells(0).ColumnSpan = CInt(e.Item.Cells.Count)
            e.Item.Cells(0).Text = "Total: " & Me.DataGrid1.Items.Count
            For i = e.Item.Cells.Count - 1 To 1 Step -1
                e.Item.Cells.RemoveAt(i)
            Next

        End If
    End Sub
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now