ApexCo
asked on
Datatable and implementing an office map
I'm trying to implement a solution for an office map type application. My overall goal is to have the map load up as an image, use an image map to define a region for each office and then when they mouseover the office have it pop up the information on who sits there.
Right now I'm trying to define the datatable and then figure out how I can get the info from each region and use that to grab the data from the datatable. I will be using the 'OfficeNumber' to grab the information for each record. Currently, I have this code for the datatable.
Dim strCon As String
strCon = "Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=dwstage;Data Source=pfcdb"
Dim strSql As String
strSql = "SELECT DISTINCT VHRID, Firstname + ' ' + Lastname AS Name, Location, Email, Title as EmpTitle, OfficeNumber, Notary, '(' + LEFT (OfficePhone, 3) + ') ' + SUBSTRING(OfficePhone, 4, 3) + '-' + RIGHT (OfficePhone, 4) AS OfficePhone, ShowPhoto, ShowHome, ShowCell, ShowBDay FROM MasterEmployeeStage WHERE LEFT(OfficeNumber,2) = '24' " 'here is our SQL string
Dim MysqlConnection As SqlConnection
MysqlConnection = New SqlConnection(strCon)
MysqlConnection.Open()
Dim dataadapter As SqlDataAdapter
dataadapter = New SqlDataAdapter(strSql, MysqlConnection)
Dim mydatatable As DataTable
mydatatable = New DataTable
dataadapter.Fill(mydatatab le)
I am planning on using a formview to show the information, but I'm not sure how to implement the officenumber on the mouseover. Here is what I have laid out for the formview right now.
<asp:FormView ID="FormViewOffice" runat="server" BackColor="#F3F5F3">
<ItemTemplate>
<table>
<tr>
<td style="width: 150px; height: 130px" valign="top">
<asp:Label ID="Label13" runat="server" Visible="false" Text='<%# ShowPhotoCheck(Eval("ShowP hoto")) %>'></asp:Label>
<asp:Image ID="Image1" runat="server" Height="142px" BorderColor="#cccccc" BorderWidth="3px" ImageAlign="Middle" ImageUrl='<%# checkfile(Eval("VHRID")) %>'
Width="140px" /></td>
<td style="width: 240px; height: 130px; font-family: Verdana; font-size: 10px;" valign="top">
<strong>Name</strong>:
<asp:Label ID="NameLabel" runat="server" Text='<%# Bind("Name") %>'></asp:Label><br />
<asp:Image ID="Image4" runat="server" Height="1px" ImageUrl="images/spacer_in vis.gif" /><br />
<strong>Title</strong>:
<asp:Label ID="TitleLabel" runat="server" Font-Italic="True" Text='<%# Bind("EmpTitle") %>'></asp:Label><br />
<asp:Image ID="Image2" runat="server" Height="1px" ImageUrl="images/spacer_in vis.gif" /><br />
<strong>Location</strong>:
<asp:Label ID="LocationLabel" runat="server" Text='<%# Bind("Location") %>'></asp:Label><br />
<asp:Image ID="Image3" runat="server" Height="1px" ImageUrl="images/spacer_in vis.gif" /><br />
<strong>Email</strong>: <a href='mailto:<%# Eval("Email") %>'><%# Eval("Email") %></a><br />
<asp:Image ID="Image6" runat="server" Height="1px" ImageUrl="images/spacer_in vis.gif" /><br />
<strong>Office Phone</strong>:
<asp:Label ID="OfficePhoneLabel" runat="server" Text='<%# Bind("OfficePhone") %>'></asp:Label><br />
<asp:Image ID="Image7" runat="server" Height="1px" ImageUrl="images/spacer_in vis.gif" /><br />
<strong>Office Number</strong>:
<asp:Label ID="OfficeNumberLabel" runat="server" Text='<%# Bind("OfficeNumber") %>'></asp:Label><br />
<asp:Image ID="Image10" runat="server" Height="1px" ImageUrl="images/spacer_in vis.gif" /><br />
<strong>Notary</strong>:
<asp:Label ID="NotaryLabel" runat="server" Text='<%# NotaryCheck(Eval("Notary") ) %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
Will this approach work? If so, how do I setup the mouseover to link to the proper record here?
Thanks very much for your time.
Right now I'm trying to define the datatable and then figure out how I can get the info from each region and use that to grab the data from the datatable. I will be using the 'OfficeNumber' to grab the information for each record. Currently, I have this code for the datatable.
Dim strCon As String
strCon = "Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=dwstage;Data Source=pfcdb"
Dim strSql As String
strSql = "SELECT DISTINCT VHRID, Firstname + ' ' + Lastname AS Name, Location, Email, Title as EmpTitle, OfficeNumber, Notary, '(' + LEFT (OfficePhone, 3) + ') ' + SUBSTRING(OfficePhone, 4, 3) + '-' + RIGHT (OfficePhone, 4) AS OfficePhone, ShowPhoto, ShowHome, ShowCell, ShowBDay FROM MasterEmployeeStage WHERE LEFT(OfficeNumber,2) = '24' " 'here is our SQL string
Dim MysqlConnection As SqlConnection
MysqlConnection = New SqlConnection(strCon)
MysqlConnection.Open()
Dim dataadapter As SqlDataAdapter
dataadapter = New SqlDataAdapter(strSql, MysqlConnection)
Dim mydatatable As DataTable
mydatatable = New DataTable
dataadapter.Fill(mydatatab
I am planning on using a formview to show the information, but I'm not sure how to implement the officenumber on the mouseover. Here is what I have laid out for the formview right now.
<asp:FormView ID="FormViewOffice" runat="server" BackColor="#F3F5F3">
<ItemTemplate>
<table>
<tr>
<td style="width: 150px; height: 130px" valign="top">
<asp:Label ID="Label13" runat="server" Visible="false" Text='<%# ShowPhotoCheck(Eval("ShowP
<asp:Image ID="Image1" runat="server" Height="142px" BorderColor="#cccccc" BorderWidth="3px" ImageAlign="Middle" ImageUrl='<%# checkfile(Eval("VHRID")) %>'
Width="140px" /></td>
<td style="width: 240px; height: 130px; font-family: Verdana; font-size: 10px;" valign="top">
<strong>Name</strong>:
<asp:Label ID="NameLabel" runat="server" Text='<%# Bind("Name") %>'></asp:Label><br />
<asp:Image ID="Image4" runat="server" Height="1px" ImageUrl="images/spacer_in
<strong>Title</strong>:
<asp:Label ID="TitleLabel" runat="server" Font-Italic="True" Text='<%# Bind("EmpTitle") %>'></asp:Label><br />
<asp:Image ID="Image2" runat="server" Height="1px" ImageUrl="images/spacer_in
<strong>Location</strong>:
<asp:Label ID="LocationLabel" runat="server" Text='<%# Bind("Location") %>'></asp:Label><br />
<asp:Image ID="Image3" runat="server" Height="1px" ImageUrl="images/spacer_in
<strong>Email</strong>: <a href='mailto:<%# Eval("Email") %>'><%# Eval("Email") %></a><br />
<asp:Image ID="Image6" runat="server" Height="1px" ImageUrl="images/spacer_in
<strong>Office Phone</strong>:
<asp:Label ID="OfficePhoneLabel" runat="server" Text='<%# Bind("OfficePhone") %>'></asp:Label><br />
<asp:Image ID="Image7" runat="server" Height="1px" ImageUrl="images/spacer_in
<strong>Office Number</strong>:
<asp:Label ID="OfficeNumberLabel" runat="server" Text='<%# Bind("OfficeNumber") %>'></asp:Label><br />
<asp:Image ID="Image10" runat="server" Height="1px" ImageUrl="images/spacer_in
<strong>Notary</strong>:
<asp:Label ID="NotaryLabel" runat="server" Text='<%# NotaryCheck(Eval("Notary")
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
Will this approach work? If so, how do I setup the mouseover to link to the proper record here?
Thanks very much for your time.
Your approach should work Ok as far as the mouseover events, you will have to deal with that on the client side not the server.
ASKER
Any pointers on pulling the data for each mouseover? I'm pretty lost on how to pull that off.
ASKER
Actually, I think I have the mouseover stuff setup. On the gridview, how would I pass the data to those fields?
Since I already have the datatable populated, what is the method to pass the that record that corresponds to that ID on the imagemap? For instance, office 2465.
Thanks.
Since I already have the datatable populated, what is the method to pass the that record that corresponds to that ID on the imagemap? For instance, office 2465.
Thanks.
you lost me in the last comment man
the code you posted doesnt include any image maps controls, you only have images laidout inside the formview and that is fine.
will the users click on those images on the formview and get redirected to another page?
if thats the case then you should use ImageButton Control instead of the images
the code you posted doesnt include any image maps controls, you only have images laidout inside the formview and that is fine.
will the users click on those images on the formview and get redirected to another page?
if thats the case then you should use ImageButton Control instead of the images
ASKER
Sorry, I had since updated the project with the image map. Here is a portion of the map for the floor I'm using as my test:
<img src="images/24thFloorMap.j pg" visible="false" width="900" height="695" border="0" usemap="#Map" alt="" id="24_map" />
<map name="Map" id="Map">
<area shape="rect" coords="96,93,148,214" href="#" alt="" id="2465" />
<area shape="rect" coords="148,95,187,176" href="#" alt="" id="2466" />
<area shape="rect" coords="188,93,251,175" href="#" alt="" id="2468" />
<area shape="rect" coords="250,94,315,174" href="#" alt="" id="2470"/>
<area shape="rect" coords="314,94,360,168" href="#" alt="" id="2472" />
<area shape="rect" coords="362,95,425,170" href="#" alt="" id="2476"/>
<area shape="rect" coords="425,95,468,170" href="#" alt="" id="2402"/>
<area shape="rect" coords="466,93,513,170" href="#" alt="" id="2404"/>
<area shape="rect" coords="511,94,577,170" href="#" alt="" id="2408" />
<area shape="rect" coords="577,94,621,175" href="#" alt="" id="2409" />
<area shape="rect" coords="622,94,685,176" href="#" alt="" id="2412" />
<area shape="rect" coords="686,94,749,175" href="#" alt="" id="2414" />
<area shape="rect" coords="748,94,790,174" href="#" alt="" id="2416" />
</map>
I've also changed the way I'm creating the datatable:
Dim OfficeNumber As String = Request.QueryString("Offic eNumber")
Dim strSQL As String = "SELECT DISTINCT VHRID, Firstname + ' ' + Lastname AS Name, Location, Email, Title as EmpTitle, OfficeNumber, '(' + LEFT (OfficePhone, 3) + ') ' + SUBSTRING(OfficePhone, 4, 3) + '-' + RIGHT (OfficePhone, 4) AS OfficePhone, ShowPhoto FROM MasterEmployeeStage WHERE LEFT(OfficeNumber,2) = '24' " 'here is our SQL string
Dim connectionString As String = "Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=dwstage;Data Source=pfcdb"
Dim da As New SqlDataAdapter(strSQL, connectionString)
Dim dt As New DataTable
da.Fill(dt)
'Build our datatable from all items in tblSearchTerms that match the passed RecID
If dt.Rows.Count > 0 Then
For i As Integer = 0 To dt.Rows.Count - 1
Name = dt.Rows(i).ItemArray(1).To String()
Location = dt.Rows(i).ItemArray(2).To String()
Email = dt.Rows(i).ItemArray(3).To String()
EmpTitle = dt.Rows(i).ItemArray(4).To String()
OfficeNumber = dt.Rows(i).ItemArray(5).To String()
OfficePhone = dt.Rows(i).ItemArray(6).To String()
ShowPhoto = dt.Rows(i).ItemArray(7).To String() ' this is the party id
Next
End If
I came across the Flyout tool at obout.com and it's pretty nice. But I'm still stuck on a way to pull back the data for a particular area on the image map. I would like to do a query against my datatable by using the OfficeNumber, which is the ID of each area in the image map.
Thanks.
<img src="images/24thFloorMap.j
<map name="Map" id="Map">
<area shape="rect" coords="96,93,148,214" href="#" alt="" id="2465" />
<area shape="rect" coords="148,95,187,176" href="#" alt="" id="2466" />
<area shape="rect" coords="188,93,251,175" href="#" alt="" id="2468" />
<area shape="rect" coords="250,94,315,174" href="#" alt="" id="2470"/>
<area shape="rect" coords="314,94,360,168" href="#" alt="" id="2472" />
<area shape="rect" coords="362,95,425,170" href="#" alt="" id="2476"/>
<area shape="rect" coords="425,95,468,170" href="#" alt="" id="2402"/>
<area shape="rect" coords="466,93,513,170" href="#" alt="" id="2404"/>
<area shape="rect" coords="511,94,577,170" href="#" alt="" id="2408" />
<area shape="rect" coords="577,94,621,175" href="#" alt="" id="2409" />
<area shape="rect" coords="622,94,685,176" href="#" alt="" id="2412" />
<area shape="rect" coords="686,94,749,175" href="#" alt="" id="2414" />
<area shape="rect" coords="748,94,790,174" href="#" alt="" id="2416" />
</map>
I've also changed the way I'm creating the datatable:
Dim OfficeNumber As String = Request.QueryString("Offic
Dim strSQL As String = "SELECT DISTINCT VHRID, Firstname + ' ' + Lastname AS Name, Location, Email, Title as EmpTitle, OfficeNumber, '(' + LEFT (OfficePhone, 3) + ') ' + SUBSTRING(OfficePhone, 4, 3) + '-' + RIGHT (OfficePhone, 4) AS OfficePhone, ShowPhoto FROM MasterEmployeeStage WHERE LEFT(OfficeNumber,2) = '24' " 'here is our SQL string
Dim connectionString As String = "Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=dwstage;Data Source=pfcdb"
Dim da As New SqlDataAdapter(strSQL, connectionString)
Dim dt As New DataTable
da.Fill(dt)
'Build our datatable from all items in tblSearchTerms that match the passed RecID
If dt.Rows.Count > 0 Then
For i As Integer = 0 To dt.Rows.Count - 1
Name = dt.Rows(i).ItemArray(1).To
Location = dt.Rows(i).ItemArray(2).To
Email = dt.Rows(i).ItemArray(3).To
EmpTitle = dt.Rows(i).ItemArray(4).To
OfficeNumber = dt.Rows(i).ItemArray(5).To
OfficePhone = dt.Rows(i).ItemArray(6).To
ShowPhoto = dt.Rows(i).ItemArray(7).To
Next
End If
I came across the Flyout tool at obout.com and it's pretty nice. But I'm still stuck on a way to pull back the data for a particular area on the image map. I would like to do a query against my datatable by using the OfficeNumber, which is the ID of each area in the image map.
Thanks.
ASKER
I just had another though, but it's somewhat different so I'll need to address it in a different question.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.