datalist background image for each cell

Discussion in 'ASP .Net' started by phil2phil, Dec 4, 2006.

  1. phil2phil

    phil2phil Guest

    Hi,
    Right now I have a datalist, that renders the following html:

    <tr>
    <td class="daycss" align="Left" valign="Top"
    style="background-color:#EEEEEE;height:20px;">
    <div style="PADDING-LEFT:26px;
    PADDING-TOP:1px">Monday</div> </td>
    </tr>
    <tr>
    <td class="daycss" align="Left" valign="Top"
    style="background-color:#EEEEEE;height:20px;">
    <div style="PADDING-LEFT:26px;
    PADDING-TOP:1px">Tuesday</div> </td>
    </tr>
    <tr>
    <td class="daycss" align="Left" valign="Top"
    style="background-color:#EEEEEE;height:20px;">
    <div style="PADDING-LEFT:26px;
    PADDING-TOP:1px">Wednesday</div> </td>
    </tr>

    We now need to have each cell use a background image, but they need to
    vary, so Monday's background image will not be the same as Tues. The
    images sizes will be the same, but the image displayed will vary. Is
    there anyway to do this? I can remove the ItemStyle-CssClass="daycss"
    property I've set in the datalist, but how do I get it to set a
    different image for each cell?

    Thanks.
    phil2phil, Dec 4, 2006
    #1
    1. Advertising

  2. Prepare css classes for every image. Handle the datalist's PreRender event.
    In the event, loop through the datalist items and set the CssClass property
    for every item to the required css class depending on the item's day of
    week.

    --
    Eliyahu Goldin,
    Software Developer & Consultant
    Microsoft MVP [ASP.NET]


    "phil2phil" <> wrote in message
    news:...
    > Hi,
    > Right now I have a datalist, that renders the following html:
    >
    > <tr>
    > <td class="daycss" align="Left" valign="Top"
    > style="background-color:#EEEEEE;height:20px;">
    > <div style="PADDING-LEFT:26px;
    > PADDING-TOP:1px">Monday</div> </td>
    > </tr>
    > <tr>
    > <td class="daycss" align="Left" valign="Top"
    > style="background-color:#EEEEEE;height:20px;">
    > <div style="PADDING-LEFT:26px;
    > PADDING-TOP:1px">Tuesday</div> </td>
    > </tr>
    > <tr>
    > <td class="daycss" align="Left" valign="Top"
    > style="background-color:#EEEEEE;height:20px;">
    > <div style="PADDING-LEFT:26px;
    > PADDING-TOP:1px">Wednesday</div> </td>
    > </tr>
    >
    > We now need to have each cell use a background image, but they need to
    > vary, so Monday's background image will not be the same as Tues. The
    > images sizes will be the same, but the image displayed will vary. Is
    > there anyway to do this? I can remove the ItemStyle-CssClass="daycss"
    > property I've set in the datalist, but how do I get it to set a
    > different image for each cell?
    >
    > Thanks.
    >
    Eliyahu Goldin, Dec 4, 2006
    #2
    1. Advertising

  3. phil2phil

    phil2phil Guest

    Hi,
    Thanks for the response, could you show me how to loop through the
    datalist items and set the CssClass, a quick sample?

    Thanks again.

    Eliyahu Goldin wrote:
    > Prepare css classes for every image. Handle the datalist's PreRender event.
    > In the event, loop through the datalist items and set the CssClass property
    > for every item to the required css class depending on the item's day of
    > week.
    >
    > --
    > Eliyahu Goldin,
    > Software Developer & Consultant
    > Microsoft MVP [ASP.NET]
    >
    >
    > "phil2phil" <> wrote in message
    > news:...
    > > Hi,
    > > Right now I have a datalist, that renders the following html:
    > >
    > > <tr>
    > > <td class="daycss" align="Left" valign="Top"
    > > style="background-color:#EEEEEE;height:20px;">
    > > <div style="PADDING-LEFT:26px;
    > > PADDING-TOP:1px">Monday</div> </td>
    > > </tr>
    > > <tr>
    > > <td class="daycss" align="Left" valign="Top"
    > > style="background-color:#EEEEEE;height:20px;">
    > > <div style="PADDING-LEFT:26px;
    > > PADDING-TOP:1px">Tuesday</div> </td>
    > > </tr>
    > > <tr>
    > > <td class="daycss" align="Left" valign="Top"
    > > style="background-color:#EEEEEE;height:20px;">
    > > <div style="PADDING-LEFT:26px;
    > > PADDING-TOP:1px">Wednesday</div> </td>
    > > </tr>
    > >
    > > We now need to have each cell use a background image, but they need to
    > > vary, so Monday's background image will not be the same as Tues. The
    > > images sizes will be the same, but the image displayed will vary. Is
    > > there anyway to do this? I can remove the ItemStyle-CssClass="daycss"
    > > property I've set in the datalist, but how do I get it to set a
    > > different image for each cell?
    > >
    > > Thanks.
    > >
    phil2phil, Dec 4, 2006
    #3
  4. something like

    foreach (DataListItem item in myDataList.Items)
    {
    item.CssClass = getItemClass(item);
    }

    string getItemClass (DataListItem item)
    {
    // get the day for the item
    ...
    // get the class for the day
    ...
    }
    --
    Eliyahu Goldin,
    Software Developer & Consultant
    Microsoft MVP [ASP.NET]

    "phil2phil" <> wrote in message
    news:...
    > Hi,
    > Thanks for the response, could you show me how to loop through the
    > datalist items and set the CssClass, a quick sample?
    >
    > Thanks again.
    >
    > Eliyahu Goldin wrote:
    > > Prepare css classes for every image. Handle the datalist's PreRender

    event.
    > > In the event, loop through the datalist items and set the CssClass

    property
    > > for every item to the required css class depending on the item's day of
    > > week.
    > >
    > > --
    > > Eliyahu Goldin,
    > > Software Developer & Consultant
    > > Microsoft MVP [ASP.NET]
    > >
    > >
    > > "phil2phil" <> wrote in message
    > > news:...
    > > > Hi,
    > > > Right now I have a datalist, that renders the following html:
    > > >
    > > > <tr>
    > > > <td class="daycss" align="Left" valign="Top"
    > > > style="background-color:#EEEEEE;height:20px;">
    > > > <div style="PADDING-LEFT:26px;
    > > > PADDING-TOP:1px">Monday</div> </td>
    > > > </tr>
    > > > <tr>
    > > > <td class="daycss" align="Left" valign="Top"
    > > > style="background-color:#EEEEEE;height:20px;">
    > > > <div style="PADDING-LEFT:26px;
    > > > PADDING-TOP:1px">Tuesday</div> </td>
    > > > </tr>
    > > > <tr>
    > > > <td class="daycss" align="Left" valign="Top"
    > > > style="background-color:#EEEEEE;height:20px;">
    > > > <div style="PADDING-LEFT:26px;
    > > > PADDING-TOP:1px">Wednesday</div> </td>
    > > > </tr>
    > > >
    > > > We now need to have each cell use a background image, but they need to
    > > > vary, so Monday's background image will not be the same as Tues. The
    > > > images sizes will be the same, but the image displayed will vary. Is
    > > > there anyway to do this? I can remove the ItemStyle-CssClass="daycss"
    > > > property I've set in the datalist, but how do I get it to set a
    > > > different image for each cell?
    > > >
    > > > Thanks.
    > > >

    >
    Eliyahu Goldin, Dec 4, 2006
    #4
  5. phil2phil

    phil2phil Guest

    Thanks again!

    Eliyahu Goldin wrote:
    > something like
    >
    > foreach (DataListItem item in myDataList.Items)
    > {
    > item.CssClass = getItemClass(item);
    > }
    >
    > string getItemClass (DataListItem item)
    > {
    > // get the day for the item
    > ...
    > // get the class for the day
    > ...
    > }
    > --
    > Eliyahu Goldin,
    > Software Developer & Consultant
    > Microsoft MVP [ASP.NET]
    >
    > "phil2phil" <> wrote in message
    > news:...
    > > Hi,
    > > Thanks for the response, could you show me how to loop through the
    > > datalist items and set the CssClass, a quick sample?
    > >
    > > Thanks again.
    > >
    > > Eliyahu Goldin wrote:
    > > > Prepare css classes for every image. Handle the datalist's PreRender

    > event.
    > > > In the event, loop through the datalist items and set the CssClass

    > property
    > > > for every item to the required css class depending on the item's day of
    > > > week.
    > > >
    > > > --
    > > > Eliyahu Goldin,
    > > > Software Developer & Consultant
    > > > Microsoft MVP [ASP.NET]
    > > >
    > > >
    > > > "phil2phil" <> wrote in message
    > > > news:...
    > > > > Hi,
    > > > > Right now I have a datalist, that renders the following html:
    > > > >
    > > > > <tr>
    > > > > <td class="daycss" align="Left" valign="Top"
    > > > > style="background-color:#EEEEEE;height:20px;">
    > > > > <div style="PADDING-LEFT:26px;
    > > > > PADDING-TOP:1px">Monday</div> </td>
    > > > > </tr>
    > > > > <tr>
    > > > > <td class="daycss" align="Left" valign="Top"
    > > > > style="background-color:#EEEEEE;height:20px;">
    > > > > <div style="PADDING-LEFT:26px;
    > > > > PADDING-TOP:1px">Tuesday</div> </td>
    > > > > </tr>
    > > > > <tr>
    > > > > <td class="daycss" align="Left" valign="Top"
    > > > > style="background-color:#EEEEEE;height:20px;">
    > > > > <div style="PADDING-LEFT:26px;
    > > > > PADDING-TOP:1px">Wednesday</div> </td>
    > > > > </tr>
    > > > >
    > > > > We now need to have each cell use a background image, but they need to
    > > > > vary, so Monday's background image will not be the same as Tues. The
    > > > > images sizes will be the same, but the image displayed will vary. Is
    > > > > there anyway to do this? I can remove the ItemStyle-CssClass="daycss"
    > > > > property I've set in the datalist, but how do I get it to set a
    > > > > different image for each cell?
    > > > >
    > > > > Thanks.
    > > > >

    > >
    phil2phil, Dec 4, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bogosian
    Replies:
    4
    Views:
    623
    Chris Jackson
    Jan 7, 2004
  2. Nevyn Twyll
    Replies:
    8
    Views:
    1,869
  3. John Blair
    Replies:
    1
    Views:
    409
    Eliyahu Goldin
    Aug 3, 2005
  4. Joe Butler
    Replies:
    15
    Views:
    9,441
    Barefoot Kid
    Oct 22, 2003
  5. RJ
    Replies:
    1
    Views:
    241
    Eliyahu Goldin
    Feb 17, 2005
Loading...

Share This Page