Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

best for changing colors, alternating

I am building a results page that is implemented by the following code listed below. But I want the background color of the row to change color for every other record, is there something inhenrent that I can you with these templates or what is the most effective way to do this? I would like alternating white and blue records.

<asp:datalist id="dlResults" runat="server" RepeatLayout="Flow">
      <ItemTemplate>
          <tr>
            <td width="40" colspan="10">code for data retrieval</td>
          </tr>
      </ItemTemplate>
</asp:datalist>

Thanks.
0
chicabow
Asked:
chicabow
  • 14
  • 12
1 Solution
 
pauljk1619Commented:
You can use seperate tags...

<ItemTemplate>
</ItemTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>


Or you can use the style method with your current code...
<asp:datalist id="dlResults" runat="server" RepeatLayout="Flow" itemstyle-backcolor="White" itemstyle-forecolor="#000000" alternatingitemstyle-backcolor="Blue" alternatingitemstyle-forecolor="#000000">
0
 
chicabowAuthor Commented:
Can you explain the logic/concept with the first idea separate tags.
0
 
chicabowAuthor Commented:
Also, i copied that exact line into my code and did not see a change.
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.

 
pauljk1619Commented:
maybe you have to put in the color codes for it to work.  I'd have to look up white and Blue...  

itemstyle-backcolor="#778899"
alternatingitemstyle-backcolor="#CCCCC"


The first idea...


<ItemTemplate>
         <tr bgcolor="White">
          <td width="40" colspan="10">code for data retrieval</td>
         </tr>
</ItemTemplate>
<AlternatingItemTemplate>
         <tr bgcolor="Blue">
          <td width="40" colspan="10">code for data retrieval</td>
         </tr>
</AlternatingItemTemplate>
0
 
chicabowAuthor Commented:
I tried putting the color codes before hand as well and still no go. I have 3 'records' returned and there is not alternation. For this idea to work is this AlternatingItemTemplate tag needed?

As for the idea of using AlternatingItemTemplate, isnt this redundant code?
0
 
pauljk1619Commented:
I'm sorry.   You need the AlternatingItemTemplate so it can apply the style.  

<asp:datalist id="dlResults" runat="server" RepeatLayout="Flow" itemstyle-backcolor="White" itemstyle-forecolor="#000000" alternatingitemstyle-backcolor="Blue" alternatingitemstyle-forecolor="#000000">
<ItemTemplate>
         <tr >
          <td width="40" colspan="10">code for data retrieval</td>
         </tr>
</ItemTemplate>
<AlternatingItemTemplate>
         <tr >
          <td width="40" colspan="10">code for data retrieval</td>
         </tr>
</AlternatingItemTemplate>
0
 
pauljk1619Commented:
or to reduce the duplication of code you can try to apply the style templates....

         <ItemStyle BackColor="White">
         </ItemStyle>

         <AlternatingItemStyle BackColor="Blue">
         </AlternatingItemStyle>


<ItemTemplate>
         <tr >
          <td width="40" colspan="10">code for data retrieval</td>
         </tr>
</ItemTemplate>
0
 
pauljk1619Commented:
Thinking about it, I think you still might need the AlternatingItemTemplate....   but it won't hurt to try.
0
 
chicabowAuthor Commented:
As soon as I put in the code below, I saw the blue that I was looking for. But my big concern is the code that I have in the item template is about 60 lines of code, it seems silly that I would have to replicate the same code all over again just to get the switching color affect. Is there something i am missing?
<AlternatingItemTemplate>
just testing
</AlternatingItemTemplate>
0
 
pauljk1619Commented:
You can most likely change the item row in the event where the item is being bound.  Then you can avoid the template method.


private void DataList1_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
            
if(e.Item.ItemType ==  ListItemType.Item)
         e.Item.BackColor = "White"
else if (e.Item.ItemType ==  ListItemType.AlternatingItem)
         e.Item.BackColor = "Blue"
 
}
         
0
 
chicabowAuthor Commented:
What do you mean by avoid the template method? What do I need to change/add to implement this idea, sorry still a bit fuzzy on this.
0
 
pauljk1619Commented:
You need to put the above code in your ItemDataBound event of your DataList.  It will check and what lineItem is being rendered and color it accordingly.  This way you can avoid the two pieces of the template.
0
 
chicabowAuthor Commented:
I would like to try this idea, but need just a little more guidance....so on the aspx page I am adding this  OnItemDataBound="DataList1_ItemDataBound"
and then add the script you pasted above in the code behind. I did these and got the following error

dlResults_ItemDataBound(object, System.Web.UI.WebControls.DataListItemEventArgs)' is inaccessible due to its protection level


Your thoughts?
0
 
pauljk1619Commented:
Just go to the properties box of the Datalist.  Since you are using C#, you can pull up the events list.   Find the ItemDataBound event and double click the empty box.  It will create the event for you.


Or you can put this code in....

private void DataList1_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
         
if(e.Item.ItemType ==  ListItemType.Item)
         e.Item.BackColor = "White"
else if (e.Item.ItemType ==  ListItemType.AlternatingItem)
         e.Item.BackColor = "Blue"
 
}


Change the DataList1_ItemDataBound to some othe name if you'd like...     Pull down the list in the even viewer and select this method.  
0
 
pauljk1619Commented:
If you put this in the InitializeComponent function...

this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);

using your DataGrid name instead of DataGrid1, it will also attach the event to the function I provided.  The value in the parenthesis needs to match the name of the function.
0
 
chicabowAuthor Commented:
I tried adding to the InitializeComponent function below the line this.Load += new System.EventHandler(this.Page_Load); and I am getting this error.

Method 'directory.client.search.dlResults_ItemDataBound(object, System.Web.UI.WebControls.DataListItemEventArgs)' does not match delegate 'void System.Web.UI.WebControls.DataGridItemEventHandler(object, System.Web.UI.WebControls.DataGridItemEventArgs)'

This is what I have in my code.

this.dlResults.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dlResults_ItemDataBound);


Any thoughts?
0
 
pauljk1619Commented:
What's this look like?  

dlResults_ItemDataBound

 
Should be this....

private void dlResults_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
         
if(e.Item.ItemType ==  ListItemType.Item)
         e.Item.BackColor = "White"
else if (e.Item.ItemType ==  ListItemType.AlternatingItem)
         e.Item.BackColor = "Blue"
 
}


You have to ensure that your arguements match that of the Event.  In this case, it's an object and and DataListItemEventArgs.


0
 
chicabowAuthor Commented:
First of all this line does not work....e.Item.BackColor = "White" it generates an error  Cannot implicitly convert type 'string' to 'System.Drawing.Color'.
Below is what I have in the code behind.

            private void dlResults_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
            {
         
                  if(e.Item.ItemType ==  ListItemType.Item)
                        e.Item.BackColor.Equals("white");
                  else if (e.Item.ItemType ==  ListItemType.AlternatingItem)
                        e.Item.BackColor.Equals("blue");
 
            }
      

and in function InitializeComponent is listed below

private void InitializeComponent()
{    
     this.Load += new System.EventHandler(this.Page_Load);
     this.dlResults.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dlResults_ItemDataBound);      
}


In the aspx page this below.

<asp:datalist id="dlResults" runat="server" RepeatLayout="Flow">


The error I get when compiling..

C:\Inetpub\wwwroot\directory\client\search.aspx.cs(239): Method 'directory.client.search.dlResults_ItemDataBound(object, System.Web.UI.WebControls.DataListItemEventArgs)' does not match delegate 'void System.Web.UI.WebControls.DataGridItemEventHandler(object, System.Web.UI.WebControls.DataGridItemEventArgs)'


Please tell me exactly what needs to be changed as I am getting a bit lost here.
Thanks.
0
 
pauljk1619Commented:
//DataListEventHandler...  not DataGridEventHandler.   that should fix your compile error.

this.dlResults.ItemDataBound += new System.Web.UI.WebControls.DataListItemEventHandler(this.dlResults_ItemDataBound);    


//  Okay...  so it's expecting a Color object.   Here they are.

          private void dlResults_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
          {
         
               if(e.Item.ItemType ==  ListItemType.Item)
                    e.Item.BackColor = Color.White;
               else if (e.Item.ItemType ==  ListItemType.AlternatingItem)
                    e.Item.BackColor = Color.Blue;
          }
0
 
chicabowAuthor Commented:
Ok good news and bad news...

I was able to compile - thanks for that....intellisence is good sometimes...

When I run the project and get results back (3) there is no alternating in colors? Still all white...I debuged the code and it did hit the breakpoint and loop through the code as I expected but the colors did not show or change.

Anything else missing?
0
 
pauljk1619Commented:
something is wrong.  I tested on mine and was able to do it....

Even this works....

                  <asp:DataList id="DataList1" runat="server">
                        <AlternatingItemStyle BackColor="Blue"></AlternatingItemStyle>
                        <ItemStyle BackColor="White"></ItemStyle>
                        <ItemTemplate>
                              <asp:Label id="Label19" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.MMSI") %>'>
                              </asp:Label><br>
                              <br>
                              <asp:Label id="Label20" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LMIU_Number") %>'>
                              </asp:Label>                              
                        </ItemTemplate>                        
                  </asp:DataList>

What I just realized is that you were putting in <TR> and <TD> Tags.   I'd like to see that, because it might just be that the table rows are put on top of your colored rows and you are losing the back coloring.   Try getting rid of the Table tags and see if the coloring shows up.
0
 
chicabowAuthor Commented:
my whole code is using <TR> and <TD> tags and must remain that way for design resons, but I commented out all of it for test purposes and you are right...it does get displayed when table tags are removed...again...good news and bad news...


so now what?
0
 
pauljk1619Commented:
Well, that solves that mystery.  

My only suggestions if you are forced to use the TR and TD, you will have to set the TR bgcolor and have two templates, or try creating the table and the data values in the ItemDataBound Event.

I'm assuming you want the table rows because you want to line each List Item up.  In order to do this within the ItemDataBoundEvent, I think you'll have to create a table with fixed widths in your ItemTemplate.   This way in the ItemBoundEvent we can grab the table and change it's background color.
0
 
chicabowAuthor Commented:
Well sounds like we are back to where we starting 'duplication' of code, sounds like I rather take that approach - just because it seems like it would be 'cleaner'?
would you agree?
0
 
pauljk1619Commented:
Because of the use of the table rows, it's probabaly the easiest way to go.  Otherwise, you have the table method and dealing with the fixed widths of columns and using the findControl method to get the table and change it's back ground property method.  

Thinking further about it, another option and maybe the best option is to create your table dynamically off of your dataset or reader and using a placeholder for location.  You could set the colors per row or per cell etc.
It would be something like this....  This adds links to the table, but you can add any controls you'd like.

                  SqlDataReader myDR = myCommand.ExecuteReader();
                  myTable = new Table();
                  if (myDR.HasRows)
                  {
                        myTable.ID = "tblTemplates";
                        myTable.CellPadding = 2;
                        myTable.CellSpacing = 2;
                        myTable.BorderStyle = BorderStyle.Solid;
                        myTable.BorderWidth = 2;

                        int myRow;
                        myRow = myTable.Rows.Add(new TableRow());
                        TableCell tcell = new TableCell();
                        tcell.ColumnSpan = 2;
                        tcell.Text = "Templates";
                        myTable.Rows[myRow].Cells.Add(tcell);

                        int nRow = 0;
                        System.Drawing.Color lastColor = Color.White;
                        while(myDR.Read())
                        {
                              nRow++;

                              myRow = myTable.Rows.Add(new TableRow());
                              if(lastColor.Equals(Color.White))
                                    lastColor = Color.Blue;
                              else
                                    lastColor = Color.White;
                              myTable.Rows[myRow].BackColor = lastColor;
                              System.Web.UI.WebControls.HyperLink myLink = new HyperLink();
                              myLink.Text = myDR["TemplateName"].ToString();
                              myLink.NavigateUrl = "GHsubCrewControl.aspx?Tug=" + this.txtHiddenTugCode.Value.ToString() + "&Template=" + myDR["TugCrewTemplateID"].ToString() +"&Sort=" + this.hiddenSortBack.Value;
                              myTable.Rows[myRow].Cells[myTable.Rows[myRow].Cells.Add(new TableCell())].Controls.Add(myLink);

                              //added by james 10/05/05 1624
                              System.Web.UI.WebControls.LinkButton myDeleteLink = new LinkButton();
                              myDeleteLink.Text = "[Delete]";
                              myDeleteLink.ID = "lnkDelete" + nRow;
                              myDeleteLink.CommandName = myRow.ToString();
                              myDeleteLink.CommandArgument = myDR["TugCrewTemplateID"].ToString();
                              myDeleteLink.Command += new CommandEventHandler(TemplateDeleteLB_OnClick);
                              myTable.Rows[myRow].Cells[myTable.Rows[myRow].Cells.Add(new TableCell())].Controls.Add(myDeleteLink);
                              //end added by james
                        }
                  }
                  this.holdTemplates.Controls.Add(myTable);
                  myDR.Close();                                                            
0
 
chicabowAuthor Commented:
Thanks for the effort, but I think I am going to just go with the alternate template concept.
0

Featured Post

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.

  • 14
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now