[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 724
  • Last Modified:

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

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
tmhoang
Asked:
tmhoang
4 Solutions
 
nauman_ahmedCommented:
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
 
AerosSagaCommented:
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
 
AerosSagaCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nouloukCommented:
0
 
tmhoangAuthor Commented:
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
 
nouloukCommented:
Part 3: you can use the custom button rollover server control:
http://aspnet.4guysfromrolla.com/articles/091703-1.aspx
0
 
waterhiddenCommented:


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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now