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

How to remove vertical line after an image Column and right align that column to next Colomn (just 1 space in between 2 columns)..

5 Answers 304 Views

Grid

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

gc_0620 asked on 25 Feb 2010, 02:00 AM

radgrid.jpg

Folks,

Environment: RadControls for ASP.NET AJAX Q3 2009 / VS 2008 SP1/IE7/WINXP SP 2.

I have a simple grid with 3 columns. I would like to remove the vertical line after the GridEditCommandColumn (UniqueName="EditCommandColumn") and right align that column to next column (GridBoundColumn, UniqueName="ProductName") in this example.

Possible to make just 1 space between UniqueName="EditCommandColumn" and UniqueName="ProductName"?

Below is my RadGrid and attached is the Print screen from the browser.

Thanks

GC_0620

    
            <telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True" Skin = "Office2007" 
        
            AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True" AllowPaging="True" 
        
            AutoGenerateColumns="False" DataSourceID="SessionDataSource1" OnItemUpdated="RadGrid1_ItemUpdated" 
        
            OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted" OnDataBound="RadGrid1_DataBound">  
        
            <PagerStyle Mode="NextPrevAndNumeric" /> 
        
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="ProductID" 
        
            DataSourceID="SessionDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">  
        
            <Columns> 
        
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">  
        
            <ItemStyle CssClass="MyImageButton" /> 
        
            </telerik:GridEditCommandColumn> 
        
            <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" 
        
            UniqueName="ProductName" ColumnEditorID="GridTextBoxColumnEditor1">  
        
            </telerik:GridBoundColumn> 

            <telerik:GridDropDownColumn DataField="CategoryID" DataSourceID="SqlDataSource1" 
        
            HeaderText="Category" ListTextField="CategoryName" ListValueField="CategoryID" 
        
            UniqueName="CategoryID" ColumnEditorID="GridDropDownColumnEditor1">  
        
            </telerik:GridDropDownColumn> 
        
            </Columns> 
        
            <EditFormSettings ColumnNumber="2" CaptionDataField="ProductName" CaptionFormatString="Edit properties of Product {0}">  
        
            <FormTableItemStyle Wrap="False"></FormTableItemStyle> 
        
            <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle> 
        
            <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White" 
        
            Width="100%" /> 
        
            <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" /> 
        
            <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle> 
        
            <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record" 
        
            UniqueName="EditCommandColumn1" CancelText="Cancel edit">  
        
            </EditColumn> 
        
            <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle> 
        
            </EditFormSettings> 
        
            </MasterTableView> 
        
            <ClientSettings> 
        
            <ClientEvents OnRowDblClick="RowDblClick" /> 
        
            </ClientSettings> 
        
            </telerik:RadGrid>

5 Answers, 1 is accepted

answered on 26 Feb 2010, 02:06 PM

Hello Ghulam,

Here is a simple example showing how to achieve the desired appearance.

<%@ 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 = 2;

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">

.NoBorder

{

border-left-width:0 !important;

}

</style>

</head>

<body>

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

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

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="800px"

Skin="Office2007"

AutoGenerateColumns="false"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderStyle-Width="20px" />

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

HeaderStyle-CssClass="rgHeader NoBorder" ItemStyle-CssClass="NoBorder" />

<telerik:GridBoundColumn HeaderText="Column 2" DataField="Column2" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

All the best,
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.

Accepted

answered on 03 Mar 2010, 09:33 AM

Hi Ghulam,

Please use the RadGrid ItemCreated event the set the NoBorder CSS class to the corresponding fitler cell programmatically:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridFilteringItem)

{

(e.Item as GridFilteringItem)["Column1"].CssClass = "NoBorder";

}

"Column1" in the above code is the column's UniqueName.

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

Best wishes,
Dimo
the Telerik team