Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Formatting ASP.NET ListView

Posted on 2010-08-22
21
Medium Priority
?
486 Views
Last Modified: 2012-05-10
Hi Experts, I was wondering how can I make my data presented in a ASP.NET Listview control look more proffesional. I know asp.net came with different pre-build templates, but since I modified many setting both in my Layout Template, and my Item template , I cannot get to choose this option.. I want this to be shown kind of in a table cell with background and border each result, I dont speake too much well english but hopefully you can see what I am looking for, this is my list view code.,,, I need to either create a tabular style in this code or meabe something on the stylesheet.

thanks
<asp:ListView ID="ListView1" runat="server" DataSourceID="AccessDataSource2"  >

         <EmptyDataTemplate>
         <span></span>
        </EmptyDataTemplate>
    <GroupTemplate>
            <tr ID="itemPlaceholderContainer" runat="server">
                <td ID="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
        <br />
        <table runat = "server" class ="middle_box_content" ></table>
            <span style="background-color: #E0FFFF;color: #333333;">
      <b>
            <asp:Label ID="Last_NameLabel" runat="server" Text='<%# Eval("Last Name") %>' />
            ,
             <asp:Label ID="First_NameLabel" runat="server" 
             Text='<%# Eval("First Name") %>' />
             <br />
               <asp:Label ID="Prof_DesigantionLabel" runat="server" 
             Text='<%# Eval("Prof Designation") %>' /></b>
             </b>
             <br />
            <asp:Label ID="SpecialtyLabel" runat="server" Text='<%# Eval("Specialty") %>' />
            <asp:Label ID="Specialty_2Label" runat="server" 
            Text='<%# Eval("[Specialty2]") %>' />
            <br />
            <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
            <br />
            <asp:Label ID="Address2Label" runat="server" Text='<%# Eval("Address2") %>' />
            <br />
            <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            ,
            <asp:Label ID="StateLabel" runat="server" Text='<%# Eval("State") %>' />
            ,
            <asp:Label ID="ZipLabel" runat="server" Text='<%# Eval("Zip") %>' />
            <br />
            <asp:Label ID="PhoneLabel" runat="server" Text='<%# Eval("Phone") %>' />
            <br />
            <asp:Label ID="FaxLabel" runat="server" Text='<%# Eval("Fax") %>' />
            <br />
<br />
</span>
</table>
        </ItemTemplate>


        <AlternatingItemTemplate>
        
            <span style="background-color: #FFFFFF;color: #284775;">
                  <b>
            <asp:Label ID="Last_NameLabel" runat="server" Text='<%# Eval("Last Name") %>' />
            ,
             <asp:Label ID="First_NameLabel" runat="server" 
             Text='<%# Eval("First Name") %>' />
             <br />
               <asp:Label ID="Prof_DesigantionLabel" runat="server" 
             Text='<%# Eval("Prof Designation") %>' /></b>
             </b>
             <br />
            <asp:Label ID="SpecialtyLabel" runat="server" Text='<%# Eval("Specialty") %>' />
            <br />
            <asp:Label ID="Specialty_2Label" runat="server" 
            Text='<%# Eval("[Specialty2]") %>' />
            <br />
            <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
            <br />
            <asp:Label ID="Address2Label" runat="server" Text='<%# Eval("Address2") %>' />
            <br />
            <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            ,
            <asp:Label ID="StateLabel" runat="server" Text='<%# Eval("State") %>' />
            ,
            <asp:Label ID="ZipLabel" runat="server" Text='<%# Eval("Zip") %>' />
            <br />
            <asp:Label ID="PhoneLabel" runat="server" Text='<%# Eval("Phone") %>' />
            <br />
            <asp:Label ID="FaxLabel" runat="server" Text='<%# Eval("Fax") %>' />
            <br />
<br />
</span>
</span>
        </AlternatingItemTemplate>
   <LayoutTemplate>
            <table id="Table1" runat="server">
                <tr id="Tr1" runat="server">
                    <td id="Td1" runat="server">
                        <table ID="groupPlaceholderContainer" runat="server" border="1" 
                            style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                            <tr ID="groupPlaceholder" runat="server">
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr id="Tr2" runat="server">
                    <td id="Td2" runat="server" 
                        style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
                        <asp:DataPager ID="DataPager1" runat="server" PageSize="12">
                            <Fields>
                                <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                    ShowLastPageButton="True" />
                            </Fields>
                        </asp:DataPager>
                    </td>
                </tr>
            </table>
        </LayoutTemplate>
        
    </asp:ListView>

Open in new window

0
Comment
Question by:TonyReba
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 10
21 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 33500900
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33501033
well I am trying to undertand how do I format the listview,  did you look my code?
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33501043
I want to have each doctor info in a cell with borders? any clue in my code how woudl I do this?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 35

Expert Comment

by:YZlat
ID: 33501145
in your ItemTemplate add the following to each <td>:

style="border: solid 1px black"

in order to put black border around each cell
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33501231
I am not sure I can completely understand what's going on with your ListView untill I run your code. Do you have sample access database for your application?

I suggest you try this:

<GroupTemplate>
            <tr ID="itemPlaceholderContainer" runat="server">
                <td ID="itemPlaceholder" runat="server" style="border: solid 1px black">

                </td>
            </tr>
        </GroupTemplate>
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33501246
I dont have any td in my item template, do I create them manually? do I do the same on the Alternating?
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33501403
not it does not show them, this how it should looks:

http://rgvppo.com/ProviderSearch.aspx



ProvidersSample.accdb
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33501518
Actually, based on your design, the easies thing you can do is add to each label tag the following BorderStyle=Solid BorderWidth=1px

so that the label looks like this:

  <asp:Label ID="Prof_DesigantionLabel" runat="server" BorderStyle="Solid" BorderWidth="1px"
             Text='<%# Eval("Prof Designation") %>' />
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33501604
did you see the site ?
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33501701
another way is by changing your ItemTemplate to look like this:

 <ItemTemplate>
        <br />
        <table id="Table1" runat = "server" class ="middle_box_content" ></table>
            <span style="background-color: #E0FFFF;color: #333333;">
      <b>
      <table>
      <tr>
      <td style="border: solid 1px red">
     
            <asp:Label ID="Last_NameLabel" runat="server" Text='<%# Eval("Last Name") %>' />
            ,
             <asp:Label ID="First_NameLabel" runat="server"
             Text='<%# Eval("First Name") %>' />
             </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
               <asp:Label ID="Prof_DesigantionLabel" runat="server"
             Text='<%# Eval("Prof Designation") %>' /></b>
             </b>
             </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="SpecialtyLabel" runat="server" Text='<%# Eval("Specialty") %>' />
            <asp:Label ID="Specialty_2Label" runat="server"
            Text='<%# Eval("[Specialty2]") %>' />
            </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
            </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="Address2Label" runat="server" Text='<%# Eval("Address2") %>' />
            </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            ,
            <asp:Label ID="StateLabel" runat="server" Text='<%# Eval("State") %>' />
            ,
            <asp:Label ID="ZipLabel" runat="server" Text='<%# Eval("Zip") %>' />
            </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="PhoneLabel" runat="server" Text='<%# Eval("Phone") %>' />
            </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="FaxLabel" runat="server" Text='<%# Eval("Fax") %>' />
            </td>
            </tr>
            </table>
<br />
</span>
</table>
        </ItemTemplate>
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33501844
Looks pretty good, however I wan to do this at the the tr level , colum with all data, not each cell, as in example
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33502049
then just do the same to <tr> instead of <td>
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33502124
actually you canonot do that for table row, just table cell
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33502172
Iam kind of confussed I guess I am not underatding how the list view is rendered
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33502207
is there a particular reason why do you want to do this at a row level and not at a cell level?
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33502331
to separate each physician info on my search engine..

I am moocking :

http://rgvppo.com/ProviderSearch.aspx 

do a search
0
 
LVL 35

Expert Comment

by:YZlat
ID: 33502370
oh, so you want rach block of data to look just like the one on that page?
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33502381
yes ..
:(
0
 
LVL 35

Accepted Solution

by:
YZlat earned 2000 total points
ID: 33502443
in that case try:
 <ItemTemplate>
        <br />
        <table id="Table1" runat = "server" class ="middle_box_content" ></table>
            <span style="background-color: #E0FFFF;color: #333333;">
      <b>
      <table>
      <tr>
      <td style="border: solid 1px red">
     
            <asp:Label ID="Last_NameLabel" runat="server" Text='<%# Eval("Last Name") %>' />
            ,
             <asp:Label ID="First_NameLabel" runat="server"
             Text='<%# Eval("First Name") %>' />
             
               <asp:Label ID="Prof_DesigantionLabel" runat="server"
             Text='<%# Eval("Prof Designation") %>' /></b>
             </b>
             </td>
             </tr>
             <tr>
             <td style="border: solid 1px red">
            <asp:Label ID="SpecialtyLabel" runat="server" Text='<%# Eval("Specialty") %>' />
            <asp:Label ID="Specialty_2Label" runat="server"
            Text='<%# Eval("[Specialty2]") %>' />
            <br/>
            <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
            <br/>
            <asp:Label ID="Address2Label" runat="server" Text='<%# Eval("Address2") %>' />
           <br/>
            <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
            ,
            <asp:Label ID="StateLabel" runat="server" Text='<%# Eval("State") %>' />
            ,
            <asp:Label ID="ZipLabel" runat="server" Text='<%# Eval("Zip") %>' />
           <br/>
            <asp:Label ID="PhoneLabel" runat="server" Text='<%# Eval("Phone") %>' />
            <br/>
            <asp:Label ID="FaxLabel" runat="server" Text='<%# Eval("Fax") %>' />
            </td>
            </tr>
            </table>
<br />
</span>
</table>
        </ItemTemplate>
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33502537
Thanks that helped
0
 
LVL 9

Author Closing Comment

by:TonyReba
ID: 33502542
ty
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

596 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question