This is a migrated thread and some comments may be shown as answers.

Styling Question with Image Column

1 Answer 19 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Brian Azzi asked on 23 Mar 2010, 12:07 AM

Ok... all you style guru's out there, help me out. ;)

Here is my scenario... I'm writing a "file browser" type grid that will peruse various file sources. I have an image column and then a name column. This works fine... BUT, I can't get the image (in column 0) to lineup with the text in column 1. They should be flush or close to each other...

So I guess what I need is to remove the padding from cell 0 right and cell 1 left.... is this something reasonable to do?

Here are my column definitions (bound via client side load):

                    <Columns>         
                                <telerik:GridImageColumn DataImageUrlFields="Icon" DataImageUrlFormatString="images/{0}" HeaderText="" HeaderStyle-Width="32" Resizable="false" />         
                                <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="false" />         
                                <telerik:GridBoundColumn DataField="SizeDisplay" UniqueName="SizeDisplay" HeaderText="Size" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ItemStyle-Wrap="false" />         
                                <telerik:GridBoundColumn DataField="Type" UniqueName="Type" HeaderText="Type" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="false" />         
                                <telerik:GridBoundColumn DataField="DateModified" UniqueName="DateModified" HeaderText="Date Modified" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="false" />         
                                <telerik:GridBoundColumn DataField="IsFolder" UniqueName="IsFolder" Visible="false" />         
                                <telerik:GridBoundColumn DataField="Size" UniqueName="Size" Visible="false" />         
                                <telerik:GridBoundColumn DataField="FullPath" UniqueName="IsFolder" Visible="false" />         
                            </Columns>          

Something of note... I think a template column would be great (and have an image control next to a label), but since I am loading data on the client, it doesn't seem to work... bleh.

-Brian

1 Answer, 1 is accepted

answered on 24 Mar 2010, 12:28 PM

Hello Brian,

If you use a GridTemplateColumn with client-side binding, you can set the ImageUrl in the RowDataBound client event:

http://www.telerik.com/help/aspnet-ajax/onrowdatabound.html

The same question is discussed in this forum thread:

http://www.telerik.com/community/forums/aspnet/grid/can-i-use-css-properties-to-radgrid-like-div-tag.aspx#1097114

If you prefer to remove paddings (which is a valid approach as well), here is how to do it. You may also want to remove the vertical border between the image and the file name (depends on the RadGrid skin).

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 4;

int rowsNum = 5;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.RadGrid .rgMasterTable .NoLeft

{

padding-left:0;

border-left-width:0;

}

.RadGrid .rgMasterTable .NoRight

{

padding-right:0;

text-align:right;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="800px"

AutoGenerateColumns="false"

Skin="Office2007"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Column1" HeaderText="Column 1" />

<telerik:GridBoundColumn DataField="Column2" HeaderText="No Right Padding">

<HeaderStyle CssClass="rgHeader NoRight" />

<ItemStyle CssClass="NoRight" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column3" HeaderText="No Left Padding">

<HeaderStyle CssClass="rgHeader NoLeft" />

<ItemStyle CssClass="NoLeft" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column4" HeaderText="Column 4" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Sincerely yours,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.