Solved

Formatting ASP.NET ListView

Posted on 2010-08-22
21
469 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
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.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

809 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