Unnecessary spacing between two images in the same column of datagrid

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

hrm - 29 May 2004 10:13 GMT

Hi,

I am placing two images in the same column of the datagrid as shown by
the code given below. When I view this page in the browser, there is
about 3 pixels of space between the images displayed (I am not
expecting any spacing between these images). I want both the images to
be displayed immediately one after the other without any spacing
between them. How can I avoid this spacing? I tried to set the
ItemStyle-Width property on the <asp:TemplateColumn> to the combined
width of the two images (in pixels ) and also set the
ItemStyle-Wrap="false".. ethese parameters still do not get rid of the
space between the two images in the column.

Any pointers will be greatly appreciated.

Thanks in adv,
hrm.

----
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="RndWeb.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>WebForm1</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 8px; POSITION:
absolute; TOP: 8px" cellSpacing="0"
                cellPadding="0" width="100%" border="0">
                <TR>
                    <TD></TD>
                </TR>
                <TR>
                    <TD>
                        <asp:datagrid id="dgRnd" runat="server" BorderWidth="1px"
CellPadding="0" Width="100%" GridLines="Horizontal"
                            BorderColor="DarkGray" CellSpacing="0" CssClass="BodyTxt"
AutoGenerateColumns="False">
                            <ItemStyle Wrap="false" BorderWidth="0px"
BorderStyle="None"></ItemStyle>
                            <HeaderStyle CssClass="DatagridHeader"
BackColor="DarkGray"></HeaderStyle>
                            <Columns>
                                <asp:TemplateColumn ItemStyle-Width="42"
ItemStyle-BackColor="#ffff33" ItemStyle-BorderColor="#ff0099"
                                    ItemStyle-Wrap="false" HeaderText="Name of resource">
                                    <HeaderTemplate>
                                        <b>            Resource
                                            Name</b>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:Image BackColor=#ff3333 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "TabSpaceImage") %>' Runat=server
ID="Image1"/>
                                        <asp:Image BackColor=#66cc66 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "NodeStateImage") %>' Runat=server
ID="Image2"/>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                            </Columns>
                        </asp:datagrid>
                    </TD>
                </TR>
                <TR>
                    <TD></TD>
                </TR>
            </TABLE>
        </form>
    </body>
</HTML>
----------------------

Reply to this Message

Eliyahu Goldin - 30 May 2004 09:13 GMT

Make a table with one row and two cells. Put the left image in the left cell
and the right image in the right cell. Set align=right for the left cell and
align=left for the right cell. Set appropriate borders, paddings and margins
to 0.

Eliyahu

> Hi,
>
[quoted text clipped - 50 lines]
> ItemStyle-Wrap="false" HeaderText="Name of resource">
> <HeaderTemplate>

<b>            R
esource

> Name</b>
> </HeaderTemplate>
[quoted text clipped - 19 lines]
> </HTML>
> ----------------------

Reply to this Message

ram mohan - 30 May 2004 12:04 GMT

Hi,

Thanks for the reply.. but this does not seem to answer my question.

I am not interested in using 'Table' since I want to use some features
(which make coding less!) of the DataGrid. If I want to use a table the
following code works perfectly by placing two images in the same cell
without any gap between them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
            <tr>
                <td><img src="file:///X:\Design Time\Working\Source\Web
Editor\QRDotNetWebEditor\images\AccessVersion\minus_icon.gif"
                        border="0"><img src="file:///X:\Design Time\Working\Source\Web
Editor\QRDotNetWebEditor\images\AccessVersion\spacer.gif"
                        border="0"><img src="file:///X:\Design Time\Working\Source\Web
Editor\QRDotNetWebEditor\images\AccessVersion\minus_icon.gif"
                        border="0"></td>
            </tr>
        </table>
    </body>
</html>

HOWEVER, how do I achieve the same effect by using DataGrid..ie., place
two images in one cell of the datagrid without any spacing between them.

Thanks in adv,
hrm.

Reply to this Message

Eliyahu Goldin - 30 May 2004 13:59 GMT

Ram,

I meant puting a table inside the datagrid column:

<ItemTemplate>
<table><tr><td align="right" style="border:0;padding:0">
<asp:Image BackColor=#ff3333 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "TabSpaceImage") %>' Runat=server
ID="Image1"/>
</td><td align="left" style="border:0;padding:0">
<asp:Image BackColor=#66cc66 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "NodeStateImage") %>' Runat=server
ID="Image2"/>
</td></tr></table>
</ItemTemplate>

Eliyahu

> Hi,
>
[quoted text clipped - 30 lines]
> Thanks in adv,
> hrm.

Reply to this Message

hrm - 30 May 2004 14:01 GMT

Hi Eliyahu,

great! it works.. I actually have to place many images side by side..by
recursive use of this solution (ie., placing more tables in two tds of
outer tabls and giving these 2 tds the suitable properties..) I am able
to place any number of items side by side within one cell of the
DataGrid..

thanks again,
hrm.

Reply to this Message

Unnecessary spacing between two images in the same column of datagrid

Free Magazines