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

[Solved] Display a field vertically

1 Answer 129 Views

Grid

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

Stavros asked on 25 Jun 2009, 09:53 AM

I have a grid in my web site with a GridTemplateColumn inside and I am using <ItemTemplate> to layout a custom appearance.
Here's the ItemTemplate contents :

    
            <asp:Image ID="Image1" Style="float: left;" Width="171px" Height="167px"   
        
                                                ImageUrl='<%# "ImageFromDB.ashx?ID=" + Eval("KeyID") %>' runat="server"   
        
                                                AlternativeText="Stock Image" />  
        
                                            <div>  
        
                                                <span style="font-weight: bold; font-family: Arial Black;">Description:</span>  
        
                                                <%# Eval("Description") %>  
        
                                                <br />  
        
                                                <br />  
        
                                                <span style="font-weight: bold;">Manufacturer:</span>  
        
                                                <%# Eval("Manufacturer") %>  
        
                                                <br />  
        
                                                <br />  
        
                                                <span style="font-weight: bold;">Code:</span>  
        
                                                <%# Eval("Code") %>  
        
                                            </div>

I want to enter two dynamically created divs to the left of the template that will appear vertically with a Field Description inside.
How can I do that?
Thank you very much!

1 Answer, 1 is accepted

answered on 30 Jun 2009, 10:40 AM

Hello Stavros,

There are several different ways to define your layout, but generally, you should use ItemCreated to insert additional controls to the template RadGrid cells:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    DataRow dr; 
        
                    int colsNum = 3; 
        
                    int rowsNum = 2; 
        
                    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; 
        
                } 
        
                protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
        
                { 
        
                    if (e.Item is GridDataItem) 
        
                    { 
        
                        string col3value = (string)DataBinder.Eval(e.Item.DataItem, "Column3"); 
        
                        (e.Item as GridDataItem)["TemplateColumn"].Controls.AddAt(0, new LiteralControl(String.Format(@"<div class=""fll"">left:<br /><br />{0}</div>", col3value))); 
        
                    } 
        
                } 
        
            </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 for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            .fll,.flr{width:100px;height:100px;border:1px solid red} 
        
            .fll{float:left} 
        
            .flr{float:right} 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                Width="250px" 
        
                AutoGenerateColumns="false" 
        
                OnNeedDataSource="RadGrid1_NeedDataSource" 
        
                OnItemCreated="RadGrid1_ItemCreated"> 
        
                <MasterTableView> 
        
                    <Columns> 
        
                        <telerik:GridTemplateColumn HeaderText="Template Column" UniqueName="TemplateColumn"> 
        
                            <ItemTemplate> 
        
                                <div class="flr"> 
        
                                    right: 
        
                                    <br /><br /> 
        
                                    <%# Eval("Column1") %> 
        
                                    <br /><br /> 
        
                                    <%# Eval("Column2") %> 
        
                                </div> 
        
                            </ItemTemplate> 
        
                        </telerik:GridTemplateColumn> 
        
                    </Columns> 
        
                </MasterTableView> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.