Solved

Formatting ASP.NET ListView

Posted on 2010-08-22
21
471 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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 500 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

732 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