DataGrid and JavaScript GURU...

**Lars Netzel** · Nov 19 '05, 04:20 PM

Re: DataGrid and JavaScript GURU...

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_showHideLaye rs function also send the object you are on with
"this" paramameter. so it looks like this..

onMouseOver=MM_ showHideLayers( 'Layer1','','sh ow', this);

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

alert(this.id); with will give you something like
"DataGrid1_Hype rLinkColumn... " 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 HyperLinkColumn Name 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 "ibtnExpandReso urce" and my div was simply named "div" as you see from
the first 3 rows of the function.

function OnPlusClick(sen der) {
newWord = new String()
newWord = 'div';
divID = sender.id.repla ce(/ibtnExpandResou rce/, newWord);

theDiv = document.getEle mentById(divID)
if ( theDiv.style.di splay=="none") {
theDiv.style.di splay="";
sender.src ='../Images/minus.gif';
}else {
theDiv.style.di splay="none";
sender.src ='../Images/plus.gif';
}
}

Here's my Image Tag:

<asp:Image runat="server" ID="ibtnExpandR esource"
ImageUrl="../images/plus.gif" onclick="Javasc ript: OnPlusClick(thi s);"
style="cursor:h and;"></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_hotm ail.com> wrote in message
news:8DE8857D-8AA1-46B7-A1ED-83CE43DE6BE1@mi crosoft.com...[color=blue]
> 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>
> 
> <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:p laceholder id="phIMGpopup "
> runat="server"> </asp:placeholder ></DIV>
> 
>
> <asp:datagrid id="DataGrid1" runat="server" AllowSorting="T rue"
> PagerStyle-Mode="NextPrev" AllowPaging="Tr ue"
> AlternatingItem Style-BackColor="Whit eSmoke" HeaderStyle-Font-Bold="True"
> HeaderStyle-HorizontalAlign ="Center" GridLines="Hori zontal"
> CssClass="txtAr ea" BorderColor="Li ghtGray" BorderStyle="Ri dge"
> BorderWidth="1p x" CellPadding="4" Width="70%"
> OnPageIndexChan ged="DataGrid1_ Paged" ShowFooter="Tru e"
> AutoGenerateCol umns="False">
> <Columns>
> <asp:HyperLinkC olumn HeaderText="" Text="<a href='#'
> onMouseOver=MM_ showHideLayers( 'Layer1','','sh ow')
> onMouseOut=MM_s howHideLayers(' Layer1','','hid e')><img
> src='../images/user.gif' border='0'></a>"></asp:HyperLinkCo lumn>
> </Columns>
> </asp:datagrid>
>
>
>
> <CodeBehind>
>
> Sub BindGrid(Option al ByVal alpha As String = "")
>
> Dim strADPath As String
> strADPath = "netdomain.usem bassy.dk"
>
> Dim de As DirectoryEntry = New DirectoryEntry( "LDAP://" &
> strADPath,
> "netadmin", "N37au7h0R" )
> Dim src As DirectorySearch er
>
> If alpha = "" Then
> DataGrid1.Allow Paging = True
> src = New
> DirectorySearch er("(&(objectCa tegory=Person)( objectClass=use r))")
> Else
> DataGrid1.Allow Paging = False
> src = New
> DirectorySearch er("(&(objectCa tegory=Person)( objectClass=use r)(sn=" &
> alpha &
> "*))")
>
> End If
>
> src.SearchRoot = de
> src.SearchScope = SearchScope.Sub tree
> For Each res As SearchResult In src.FindAll
>
>
> Dim dr As DataRow = ds.Tables("cont acts").NewRow
> dr(" ") = "<img src='../images/user.gif'>"
>
> If res.Properties. Contains("sn") And
> res.Properties. Contains("given Name") And
> res.Properties. Contains("Initi als")
> Then
> dr("Name") = CStr(res.Proper ties("givenName ")(0)) & ", " &
> CStr(res.Proper ties("sn")(0)) & " " & CStr(res.Proper ties("Initials" )(0))
> Else
> dr("Name") = ""
> End If
>
> If res.Properties. Contains("physi calDeliveryOffi ceName") Then
> dr("Dept.") =
> CStr(res.Proper ties("physicalD eliveryOfficeNa me")(0))
> Else
> dr("Dept.") = ""
> End If
>
> If res.Properties. Contains("telep honeNumber") Then
> Dim TeleNumber As String =
> CStr(res.Proper ties("telephone Number")(0))
> dr("Ext") = "#" & Right(TeleNumbe r, Len(TeleNumber) -
> InStr(TeleNumbe r, "1"))
> Else
> dr("Ext") = ""
> End If
>
> If res.Properties. Contains("mail" ) Then
> dr("Email") = CStr(res.Proper ties("mail")(0) )
> Else
> dr("Email") = ""
> End If
>
> ds.Tables("cont acts").Rows.Add (dr)
>
> Next
> ' Binds Contact data from Active Directory to DataGrid
> DataGrid1.DataS ource = ds.Tables("cont acts")
> DataGrid1.DataB ind()
> End Sub
>[/color]

**Tim::..** · Nov 19 '05, 04:20 PM

Re: DataGrid and JavaScript GURU...

Hi Lars,

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

You make it sound pretty simple...

Tak

"Lars Netzel" wrote:
[color=blue]
> 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_showHideLaye rs function also send the object you are on with
> "this" paramameter. so it looks like this..
>
> onMouseOver=MM_ showHideLayers( 'Layer1','','sh ow', this);
>
> 2. Then in the function you can get the right client name from:
>
> alert(this.id); with will give you something like
> "DataGrid1_Hype rLinkColumn... " 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 HyperLinkColumn Name 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 "ibtnExpandReso urce" and my div was simply named "div" as you see from
> the first 3 rows of the function.
>
> function OnPlusClick(sen der) {
> newWord = new String()
> newWord = 'div';
> divID = sender.id.repla ce(/ibtnExpandResou rce/, newWord);
>
> theDiv = document.getEle mentById(divID)
> if ( theDiv.style.di splay=="none") {
> theDiv.style.di splay="";
> sender.src ='../Images/minus.gif';
> }else {
> theDiv.style.di splay="none";
> sender.src ='../Images/plus.gif';
> }
> }
>
> Here's my Image Tag:
>
> <asp:Image runat="server" ID="ibtnExpandR esource"
> ImageUrl="../images/plus.gif" onclick="Javasc ript: OnPlusClick(thi s);"
> style="cursor:h and;"></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_hotm ail.com> wrote in message
> news:8DE8857D-8AA1-46B7-A1ED-83CE43DE6BE1@mi crosoft.com...[color=green]
> > 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>
> > 
> > <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:p laceholder id="phIMGpopup "
> > runat="server"> </asp:placeholder ></DIV>
> > 
> >
> > <asp:datagrid id="DataGrid1" runat="server" AllowSorting="T rue"
> > PagerStyle-Mode="NextPrev" AllowPaging="Tr ue"
> > AlternatingItem Style-BackColor="Whit eSmoke" HeaderStyle-Font-Bold="True"
> > HeaderStyle-HorizontalAlign ="Center" GridLines="Hori zontal"
> > CssClass="txtAr ea" BorderColor="Li ghtGray" BorderStyle="Ri dge"
> > BorderWidth="1p x" CellPadding="4" Width="70%"
> > OnPageIndexChan ged="DataGrid1_ Paged" ShowFooter="Tru e"
> > AutoGenerateCol umns="False">
> > <Columns>
> > <asp:HyperLinkC olumn HeaderText="" Text="<a href='#'
> > onMouseOver=MM_ showHideLayers( 'Layer1','','sh ow')
> > onMouseOut=MM_s howHideLayers(' Layer1','','hid e')><img
> > src='../images/user.gif' border='0'></a>"></asp:HyperLinkCo lumn>
> > </Columns>
> > </asp:datagrid>
> >
> >
> >
> > <CodeBehind>
> >
> > Sub BindGrid(Option al ByVal alpha As String = "")
> >
> > Dim strADPath As String
> > strADPath = "netdomain.usem bassy.dk"
> >
> > Dim de As DirectoryEntry = New DirectoryEntry( "LDAP://" &
> > strADPath,
> > "netadmin", "N37au7h0R" )
> > Dim src As DirectorySearch er
> >
> > If alpha = "" Then
> > DataGrid1.Allow Paging = True
> > src = New
> > DirectorySearch er("(&(objectCa tegory=Person)( objectClass=use r))")
> > Else
> > DataGrid1.Allow Paging = False
> > src = New
> > DirectorySearch er("(&(objectCa tegory=Person)( objectClass=use r)(sn=" &
> > alpha &
> > "*))")
> >
> > End If
> >
> > src.SearchRoot = de
> > src.SearchScope = SearchScope.Sub tree
> > For Each res As SearchResult In src.FindAll
> >
> >
> > Dim dr As DataRow = ds.Tables("cont acts").NewRow
> > dr(" ") = "<img src='../images/user.gif'>"
> >
> > If res.Properties. Contains("sn") And
> > res.Properties. Contains("given Name") And
> > res.Properties. Contains("Initi als")
> > Then
> > dr("Name") = CStr(res.Proper ties("givenName ")(0)) & ", " &
> > CStr(res.Proper ties("sn")(0)) & " " & CStr(res.Proper ties("Initials" )(0))
> > Else
> > dr("Name") = ""
> > End If
> >
> > If res.Properties. Contains("physi calDeliveryOffi ceName") Then
> > dr("Dept.") =
> > CStr(res.Proper ties("physicalD eliveryOfficeNa me")(0))
> > Else
> > dr("Dept.") = ""
> > End If
> >
> > If res.Properties. Contains("telep honeNumber") Then
> > Dim TeleNumber As String =
> > CStr(res.Proper ties("telephone Number")(0))
> > dr("Ext") = "#" & Right(TeleNumbe r, Len(TeleNumber) -
> > InStr(TeleNumbe r, "1"))
> > Else
> > dr("Ext") = ""
> > End If
> >
> > If res.Properties. Contains("mail" ) Then
> > dr("Email") = CStr(res.Proper ties("mail")(0) )
> > Else
> > dr("Email") = ""
> > End If
> >
> > ds.Tables("cont acts").Rows.Add (dr)
> >
> > Next
> > ' Binds Contact data from Active Directory to DataGrid
> > DataGrid1.DataS ource = ds.Tables("cont acts")
> > DataGrid1.DataB ind()
> > End Sub
> >[/color]
>
>
>[/color]

DataGrid and JavaScript GURU...

DataGrid and JavaScript GURU...

Comment

Comment