DataGrid and JavaScript GURU...

[Tim::..]

Hi

I'm trying to create a little application that shows an image of a user when
you mouseover there details in a datagrid. The datagrid is populated from an
Active Directory Database and I presume the best way to create the popup is
by using a layer with javascript hide and show...

I intend to use a database to store the pictures in and the use the users
full name to build a relationship between the database with the images and
the Active Directory...

Can someone please tell me how I change the layer ID in the datagrid and
<div> so that it is not always the same image that is shown???

Or alternatively how do I create a user control with a placement holder in
the layer that refers to the correct image

Or suggest a better way to achieve this...

I would really appritiate any help....

<Inline Code>
<!--Popup Layer with users info-->
<DIV id="Layer1" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000
1px solid; Z-INDEX: 1; LEFT: 300px; VISIBILITY: hidden; BORDER-LEFT: #000000
1px solid; WIDTH: 120px; BORDER-BOTTOM: #000000 1px solid; POSITION:
absolute; TOP: 100px; HEIGHT: 130px; BACKGROUND-COLOR:
#ffffff"><asp:placeholder id="phIMGpopup"
runat="server"></asp:placeholder></DIV>
<!--End Popup Layer with users info-->

<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True"
PagerStyle-Mode="NextPrev" AllowPaging="True"
AlternatingItemStyle-BackColor="WhiteSmoke" HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center" GridLines="Horizontal"
CssClass="txtArea" BorderColor="LightGray" BorderStyle="Ridge"
BorderWidth="1px" CellPadding="4" Width="70%"
OnPageIndexChanged="DataGrid1_Paged" ShowFooter="True"
AutoGenerateColumns="False">
<Columns>
<asp:HyperLinkColumn HeaderText="" Text="<a href='#'
onMouseOver=MM_showHideLayers('Layer1','','show')
onMouseOut=MM_showHideLayers('Layer1','','hide')>< img
src='../images/user.gif' border='0'></a>"></asp:HyperLinkColumn>
</Columns>
</asp:datagrid>

<CodeBehind>

Sub BindGrid(Optional ByVal alpha As String = "")

Dim strADPath As String
strADPath = "netdomain.usembassy.dk"

Dim de As DirectoryEntry = New DirectoryEntry("LDAP://" & strADPath,
"netadmin", "N37au7h0R")
Dim src As DirectorySearcher

If alpha = "" Then
DataGrid1.AllowPaging = True
src = New
DirectorySearcher("(&(objectCategory=Person)(objec tClass=user))")
Else
DataGrid1.AllowPaging = False
src = New
DirectorySearcher("(&(objectCategory=Person)(objec tClass=user)(sn=" & alpha &
"*))")

End If

src.SearchRoot = de
src.SearchScope = SearchScope.Subtree
For Each res As SearchResult In src.FindAll
Dim dr As DataRow = ds.Tables("contacts").NewRow
dr("&nbsp;") = "<img src='../images/user.gif'>"

If res.Properties.Contains("sn") And
res.Properties.Contains("givenName") And res.Properties.Contains("Initials")
Then
dr("Name") = CStr(res.Properties("givenName")(0)) & ", " &
CStr(res.Properties("sn")(0)) & " " & CStr(res.Properties("Initials")(0))
Else
dr("Name") = ""
End If

If res.Properties.Contains("physicalDeliveryOfficeNam e") Then
dr("Dept.") =
CStr(res.Properties("physicalDeliveryOfficeName")( 0))
Else
dr("Dept.") = ""
End If

If res.Properties.Contains("telephoneNumber") Then
Dim TeleNumber As String =
CStr(res.Properties("telephoneNumber")(0))
dr("Ext") = "#" & Right(TeleNumber, Len(TeleNumber) -
InStr(TeleNumber, "1"))
Else
dr("Ext") = ""
End If

If res.Properties.Contains("mail") Then
dr("Email") = CStr(res.Properties("mail")(0))
Else
dr("Email") = ""
End If

ds.Tables("contacts").Rows.Add(dr)

Next
' Binds Contact data from Active Directory to DataGrid
DataGrid1.DataSource = ds.Tables("contacts")
DataGrid1.DataBind()
End Sub

[Lars Netzel]

You could make it a little easier with the Replace method of javascript..
that's what I use in situations like this if there's not a better way (and
the time is there to do it)

1. In your MM_showHideLayers function also send the object you are on with
"this" paramameter. so it looks like this..

onMouseOver=MM_showHideLayers('Layer1','','show', this);

2. Then in the function you can get the right client name from:

alert(this.id); with will give you something like
"DataGrid1_HyperLinkColumn... " plus an number that will represent the
ItemIndex of your Grid.. so that will tell you what row you are on.. and if
you make your DIV runat server and give it an ID that DIV will have a long
name and also the same ID in the end.... (You might want to enter an ID for
the HyperLinkColumn or actually use a Template Column instead and have just
a normal asp:HyperLink to give if your own ID)

3. Replace the HyperLinkColumnName that you have with the DIV name to create
a string that will be the ID for the DIV on that row and then create an
object reference to that DIV and Boom you will access the right DIV.

------------------------------------------------------------------------------------------------------------------------------
Here's some javascript code I used to show a DIV upon clicking a Plus Symbol
that would "expand" the datagrid Item. The Name of the Image to click was
named "ibtnExpandResource" and my div was simply named "div" as you see from
the first 3 rows of the function.

function OnPlusClick(sender) {
newWord = new String()
newWord = 'div';
divID = sender.id.replace(/ibtnExpandResource/, newWord);

theDiv = document.getElementById(divID)
if ( theDiv.style.display=="none") {
theDiv.style.display="";
sender.src ='../Images/minus.gif';
}else {
theDiv.style.display="none";
sender.src ='../Images/plus.gif';
}
}

Here's my Image Tag:

<asp:Image runat="server" ID="ibtnExpandResource"
ImageUrl="../images/plus.gif" onclick="javascript: OnPlusClick(this);"
style="cursor:hand;"></asp:Image>

And Here's my DIV tag:

<div runat="server" id='div' style="BORDER-RIGHT: black 1px solid;
PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px; BORDER-LEFT: black 1px solid; PADDING-TOP: 5px;
BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: white; display:none;">

----------------------------------------------------------------------------------------------------------------------------------

Pretty Simple right?

Best Regards/
Lars Netzel

"Tim::.." <myatix_at_hotmail.com> wrote in message
news:8D**********************************@microsof t.com...

Hi

I'm trying to create a little application that shows an image of a user
when
you mouseover there details in a datagrid. The datagrid is populated from
an
Active Directory Database and I presume the best way to create the popup
is
by using a layer with javascript hide and show...

I intend to use a database to store the pictures in and the use the users
full name to build a relationship between the database with the images and
the Active Directory...

Can someone please tell me how I change the layer ID in the datagrid and
<div> so that it is not always the same image that is shown???

Or alternatively how do I create a user control with a placement holder in
the layer that refers to the correct image

Or suggest a better way to achieve this...

I would really appritiate any help....

<Inline Code>
<!--Popup Layer with users info-->
<DIV id="Layer1" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP:
#000000
1px solid; Z-INDEX: 1; LEFT: 300px; VISIBILITY: hidden; BORDER-LEFT:
#000000
1px solid; WIDTH: 120px; BORDER-BOTTOM: #000000 1px solid; POSITION:
absolute; TOP: 100px; HEIGHT: 130px; BACKGROUND-COLOR:
#ffffff"><asp:placeholder id="phIMGpopup"
runat="server"></asp:placeholder></DIV>
<!--End Popup Layer with users info-->

<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True"
PagerStyle-Mode="NextPrev" AllowPaging="True"
AlternatingItemStyle-BackColor="WhiteSmoke" HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center" GridLines="Horizontal"
CssClass="txtArea" BorderColor="LightGray" BorderStyle="Ridge"
BorderWidth="1px" CellPadding="4" Width="70%"
OnPageIndexChanged="DataGrid1_Paged" ShowFooter="True"
AutoGenerateColumns="False">
<Columns>
<asp:HyperLinkColumn HeaderText="" Text="<a href='#'
onMouseOver=MM_showHideLayers('Layer1','','show')
onMouseOut=MM_showHideLayers('Layer1','','hide')>< img
src='../images/user.gif' border='0'></a>"></asp:HyperLinkColumn>
</Columns>
</asp:datagrid>

<CodeBehind>

Sub BindGrid(Optional ByVal alpha As String = "")

Dim strADPath As String
strADPath = "netdomain.usembassy.dk"

Dim de As DirectoryEntry = New DirectoryEntry("LDAP://" &
strADPath,
"netadmin", "N37au7h0R")
Dim src As DirectorySearcher

If alpha = "" Then
DataGrid1.AllowPaging = True
src = New
DirectorySearcher("(&(objectCategory=Person)(objec tClass=user))")
Else
DataGrid1.AllowPaging = False
src = New
DirectorySearcher("(&(objectCategory=Person)(objec tClass=user)(sn=" &
alpha &
"*))")

End If

src.SearchRoot = de
src.SearchScope = SearchScope.Subtree
For Each res As SearchResult In src.FindAll
Dim dr As DataRow = ds.Tables("contacts").NewRow
dr("&nbsp;") = "<img src='../images/user.gif'>"

If res.Properties.Contains("sn") And
res.Properties.Contains("givenName") And
res.Properties.Contains("Initials")
Then
dr("Name") = CStr(res.Properties("givenName")(0)) & ", " &
CStr(res.Properties("sn")(0)) & " " & CStr(res.Properties("Initials")(0))
Else
dr("Name") = ""
End If

If res.Properties.Contains("physicalDeliveryOfficeNam e") Then
dr("Dept.") =
CStr(res.Properties("physicalDeliveryOfficeName")( 0))
Else
dr("Dept.") = ""
End If

If res.Properties.Contains("telephoneNumber") Then
Dim TeleNumber As String =
CStr(res.Properties("telephoneNumber")(0))
dr("Ext") = "#" & Right(TeleNumber, Len(TeleNumber) -
InStr(TeleNumber, "1"))
Else
dr("Ext") = ""
End If

If res.Properties.Contains("mail") Then
dr("Email") = CStr(res.Properties("mail")(0))
Else
dr("Email") = ""
End If

ds.Tables("contacts").Rows.Add(dr)

Next
' Binds Contact data from Active Directory to DataGrid
DataGrid1.DataSource = ds.Tables("contacts")
DataGrid1.DataBind()
End Sub

[Tim::..]

Hi Lars,

Thanks alot for the advice I will give it a go...

You make it sound pretty simple...

Tak

"Lars Netzel" wrote:

You could make it a little easier with the Replace method of javascript..
that's what I use in situations like this if there's not a better way (and
the time is there to do it)

1. In your MM_showHideLayers function also send the object you are on with
"this" paramameter. so it looks like this..

onMouseOver=MM_showHideLayers('Layer1','','show', this);

2. Then in the function you can get the right client name from:

alert(this.id); with will give you something like
"DataGrid1_HyperLinkColumn... " plus an number that will represent the
ItemIndex of your Grid.. so that will tell you what row you are on.. and if
you make your DIV runat server and give it an ID that DIV will have a long
name and also the same ID in the end.... (You might want to enter an ID for
the HyperLinkColumn or actually use a Template Column instead and have just
a normal asp:HyperLink to give if your own ID)

3. Replace the HyperLinkColumnName that you have with the DIV name to create
a string that will be the ID for the DIV on that row and then create an
object reference to that DIV and Boom you will access the right DIV.

------------------------------------------------------------------------------------------------------------------------------
Here's some javascript code I used to show a DIV upon clicking a Plus Symbol
that would "expand" the datagrid Item. The Name of the Image to click was
named "ibtnExpandResource" and my div was simply named "div" as you see from
the first 3 rows of the function.

function OnPlusClick(sender) {
newWord = new String()
newWord = 'div';
divID = sender.id.replace(/ibtnExpandResource/, newWord);

theDiv = document.getElementById(divID)
if ( theDiv.style.display=="none") {
theDiv.style.display="";
sender.src ='../Images/minus.gif';
}else {
theDiv.style.display="none";
sender.src ='../Images/plus.gif';
}
}

Here's my Image Tag:

<asp:Image runat="server" ID="ibtnExpandResource"
ImageUrl="../images/plus.gif" onclick="javascript: OnPlusClick(this);"
style="cursor:hand;"></asp:Image>

And Here's my DIV tag:

<div runat="server" id='div' style="BORDER-RIGHT: black 1px solid;
PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px; BORDER-LEFT: black 1px solid; PADDING-TOP: 5px;
BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: white; display:none;">

----------------------------------------------------------------------------------------------------------------------------------

Pretty Simple right?

Best Regards/
Lars Netzel

"Tim::.." <myatix_at_hotmail.com> wrote in message
news:8D**********************************@microsof t.com...

Hi

I'm trying to create a little application that shows an image of a user
when
you mouseover there details in a datagrid. The datagrid is populated from
an
Active Directory Database and I presume the best way to create the popup
is
by using a layer with javascript hide and show...

I intend to use a database to store the pictures in and the use the users
full name to build a relationship between the database with the images and
the Active Directory...

Can someone please tell me how I change the layer ID in the datagrid and
<div> so that it is not always the same image that is shown???

Or alternatively how do I create a user control with a placement holder in
the layer that refers to the correct image

Or suggest a better way to achieve this...

I would really appritiate any help....

<Inline Code>
<!--Popup Layer with users info-->
<DIV id="Layer1" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP:
#000000
1px solid; Z-INDEX: 1; LEFT: 300px; VISIBILITY: hidden; BORDER-LEFT:
#000000
1px solid; WIDTH: 120px; BORDER-BOTTOM: #000000 1px solid; POSITION:
absolute; TOP: 100px; HEIGHT: 130px; BACKGROUND-COLOR:
#ffffff"><asp:placeholder id="phIMGpopup"
runat="server"></asp:placeholder></DIV>
<!--End Popup Layer with users info-->

<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True"
PagerStyle-Mode="NextPrev" AllowPaging="True"
AlternatingItemStyle-BackColor="WhiteSmoke" HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center" GridLines="Horizontal"
CssClass="txtArea" BorderColor="LightGray" BorderStyle="Ridge"
BorderWidth="1px" CellPadding="4" Width="70%"
OnPageIndexChanged="DataGrid1_Paged" ShowFooter="True"
AutoGenerateColumns="False">
<Columns>
<asp:HyperLinkColumn HeaderText="" Text="<a href='#'
onMouseOver=MM_showHideLayers('Layer1','','show')
onMouseOut=MM_showHideLayers('Layer1','','hide')>< img
src='../images/user.gif' border='0'></a>"></asp:HyperLinkColumn>
</Columns>
</asp:datagrid>

<CodeBehind>

Sub BindGrid(Optional ByVal alpha As String = "")

Dim strADPath As String
strADPath = "netdomain.usembassy.dk"

Dim de As DirectoryEntry = New DirectoryEntry("LDAP://" &
strADPath,
"netadmin", "N37au7h0R")
Dim src As DirectorySearcher

If alpha = "" Then
DataGrid1.AllowPaging = True
src = New
DirectorySearcher("(&(objectCategory=Person)(objec tClass=user))")
Else
DataGrid1.AllowPaging = False
src = New
DirectorySearcher("(&(objectCategory=Person)(objec tClass=user)(sn=" &
alpha &
"*))")

End If

src.SearchRoot = de
src.SearchScope = SearchScope.Subtree
For Each res As SearchResult In src.FindAll
Dim dr As DataRow = ds.Tables("contacts").NewRow
dr(" ") = "<img src='../images/user.gif'>"

If res.Properties.Contains("sn") And
res.Properties.Contains("givenName") And
res.Properties.Contains("Initials")
Then
dr("Name") = CStr(res.Properties("givenName")(0)) & ", " &
CStr(res.Properties("sn")(0)) & " " & CStr(res.Properties("Initials")(0))
Else
dr("Name") = ""
End If

If res.Properties.Contains("physicalDeliveryOfficeNam e") Then
dr("Dept.") =
CStr(res.Properties("physicalDeliveryOfficeName")( 0))
Else
dr("Dept.") = ""
End If

If res.Properties.Contains("telephoneNumber") Then
Dim TeleNumber As String =
CStr(res.Properties("telephoneNumber")(0))
dr("Ext") = "#" & Right(TeleNumber, Len(TeleNumber) -
InStr(TeleNumber, "1"))
Else
dr("Ext") = ""
End If

If res.Properties.Contains("mail") Then
dr("Email") = CStr(res.Properties("mail")(0))
Else
dr("Email") = ""
End If

ds.Tables("contacts").Rows.Add(dr)

Next
' Binds Contact data from Active Directory to DataGrid
DataGrid1.DataSource = ds.Tables("contacts")
DataGrid1.DataBind()
End Sub