Fully customized CommandItemTemplate, changing Caption position and style

6 posts, 0 answers
  1. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 10 Nov 2010 Link to this post

    Hello.
    I've created my own CommandItemTemplate and put some custom buttons there, but I still want the caption of mastertableview to be placed in the same TD as buttons, with custom CSS style. How to manage this? Right only I indicate Caption property - radgrid adds additional TR above my command item template with caption centered :(

    p.s. How to add custom attribute to MasterTableView? I've inherited from GridTableView. But seems like the same approach with public properties and saving in ControlState that worked out for RadGrid does not work here - setter for new property is not called :(

    [ToolboxData("<{0}:DSGridTableView runat=server></{0}:DSGridTableView>")]
    public class DSGridTableView : GridTableView
    {
        public DSGridTableView()
        {
        }
        public DSGridTableView(RadGrid owner)
            : base(owner)
        {
        }
        //public new string Caption
        //{
        //    get
        //    {
        //        return string.Empty;
        //    }
        //}
        [DefaultValueAttribute("")]
        [PersistenceMode(PersistenceMode.Attribute)]
        public string Title
        {
            get
            {
                return (ControlState["Title"] == null ? string.Empty : (string)ControlState["Title"]);
            }
            set
            {
                ControlState["Title"] = value;
            }
        }
        [DefaultValueAttribute("")]
        [PersistenceMode(PersistenceMode.Attribute)]
        public string TitleCssClass
        {
            get
            {
                return (ControlState["TitleCssClass"] == null ? string.Empty : (string)ControlState["TitleCssClass"]);
            }
            set
            {
                ControlState["TitleCssClass"] = value;
            }
        }
    }
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Nov 2010 Link to this post

    Hello Alexander,

    The caption's HTML rendering and position is determined by the browser and it is always at the top of the <table>. So there is no way to switch the places of the caption and the CommandItemTemplate, unless you actually move the contents of the CommandItemTemplate outside RadGrid.

    As for the custom GridTableView - you have created a custom TableView class, but the RadGrid is not using it, that's why the property setters are not called. You can try using a custom RadGrid control and change the type of its MasterTableView property.

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 11 Nov 2010 Link to this post

    Hi! I already tried to override MasterTableView in my grid, but when I did it - the grid completely disappeared from my page. What I did wrong?
        public partial class DSGridView : RadGrid
        {
    public override GridTableView MasterTableView
    {
    get
    {
    return new DSGridTableView(this);
    }
    }
    	....
    
        }
    
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 15 Nov 2010 Link to this post

    Hello Alexander,

    Actually you need to override the CreateTableView method, sorry:

    http://www.telerik.com/help/aspnet-ajax/grdinheritance.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
  6. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 16 Nov 2010 Link to this post

    Hi, i already tried this and then my custom 'subgrid' appears under DetailTables. But I don't use DetailTables, I want to use MasterTableView only. But that one I cannot override...
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Nov 2010 Link to this post

    Hi Alexander,

    The following works. Please compare with your implementation.

    ASPX

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Namespace="MyNamespace" TagPrefix="mytelerik" %>
     
    <script runat="server">
     
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 3;
        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"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        OnNeedDataSource="RadGrid_NeedDataSource">
         
    </telerik:RadGrid>
     
    <br /><br />
     
    <mytelerik:MyRadGrid
        ID="RadGrid2"
        runat="server"
        OnNeedDataSource="RadGrid_NeedDataSource">
     
    </mytelerik:MyRadGrid>
     
    </form>
    </body>
    </html>


    CS in App_Code

    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace MyNamespace
    {
        public partial class MyRadGrid : RadGrid
        {
            public MyRadGrid()
            {
                this.Width = Unit.Pixel(500);
            }
     
            public override GridTableView CreateTableView()
            {
                return new MyGridTableView(this);
            }
        }
     
        public class MyGridTableView : GridTableView
        {
            public MyGridTableView()
            {
                this.Width = Unit.Pixel(400);
            }
     
            public MyGridTableView(RadGrid owner)
                : base(owner)
            {
                this.Width = Unit.Pixel(400);
            }
        }
    }


    Sincerely yours,
    Dimo
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017