Link to home
Start Free TrialLog in
Avatar of ApexCo
ApexCoFlag for United States of America

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(mydatatable)

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("ShowPhoto")) %>'></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_invis.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_invis.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_invis.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_invis.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_invis.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_invis.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.
Avatar of Sammy
Sammy
Flag of Canada image

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.
Avatar of ApexCo

ASKER

Any pointers on pulling the data for each mouseover? I'm pretty lost on how to pull that off.
Avatar of ApexCo

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.
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
Avatar of ApexCo

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.jpg" 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("OfficeNumber")

        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).ToString()
                Location = dt.Rows(i).ItemArray(2).ToString()
                Email = dt.Rows(i).ItemArray(3).ToString()
                EmpTitle = dt.Rows(i).ItemArray(4).ToString()
                OfficeNumber = dt.Rows(i).ItemArray(5).ToString()
                OfficePhone = dt.Rows(i).ItemArray(6).ToString()
                ShowPhoto = dt.Rows(i).ItemArray(7).ToString()      ' 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.
Avatar of ApexCo

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
Avatar of Sammy
Sammy
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial