Solved

Formatting ASP.NET ListView

Posted on 2010-08-22
21
466 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Angular JS form 8 25
Urgent Help with HTML CSS Positioning 9 20
Hidden Field Value 10 34
Adjust the position 3 7
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now