Solved

Formatting ASP.NET ListView

Posted on 2010-08-22
21
472 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
Independent Software Vendors: 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!

 
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

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
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…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

717 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