Unnecessary spacing between two images in the same column of datagrid

Discussion in 'ASP .Net Datagrid Control' started by hrm, May 29, 2004.

  1. hrm

    hrm Guest

    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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>
    ----------------------
     
    hrm, May 29, 2004
    #1
    1. Advertisements

  2. 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
     
    Eliyahu Goldin, May 30, 2004
    #2
    1. Advertisements

  3. hrm

    ram mohan Guest

    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.
     
    ram mohan, May 30, 2004
    #3
  4. 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
     
    Eliyahu Goldin, May 30, 2004
    #4
  5. hrm

    hrm Guest

    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.
     
    hrm, May 30, 2004
    #5
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.