[Solved] RadGrid inheritance problems

[Mink]

Hi,

I have been trying to extend the Telerik RadGrid.
Right now my extended grids do nothing more than configure the grid and add a couple of columns, but in the future I might want to add more functionality.
But the grid doesn't show properly and doesn't function either if I use my extended grid. There is no GridClientSelectColumn, sorting doesn't work, the whole pager item is gone, when I try to resize I get this error message: "MS Jscript runtime error: 'this.HeaderRow.cells[...].ScrollWidth' is null or not an object.", the size of the columns isn't right and I'm missing the 'name' column (next to the GridClientSelectColumn it should also show columns for the guid, name, username, email and role) and when double clicking a row the corresponding javascript doesn't get the proper guid for that row anymore.
All of this did work when I just put a RadGrid in my aspx page and then configured everything on that grid.
I would upload a screenshot that clearly shows some of the problems if I knew how to do this.

This is what I did:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Web.UI;
using System.Web.UI.WebControls;
using CMS.Process;
using System.IO;
using System.Drawing;

namespace CMS.WebControls.Grid
{
    public class BasicCmsGrid : Telerik.Web.UI.RadGrid
    {
        public BasicCmsGrid() : base() { }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            this.GridLines = GridLines.None;
            this.AutoGenerateColumns = false;
            this.AllowMultiRowSelection = true;
            this.AllowFilteringByColumn = false;
            this.AllowSorting = true;
            this.AllowPaging = true;
            this.PageSize = 7;
            this.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
            this.PagerStyle.AlwaysVisible = true;

            this.MasterTableView.RowIndicatorColumn.HeaderStyle.Width = Unit.Pixel(5);
            this.MasterTableView.ExpandCollapseColumn.HeaderStyle.Width = Unit.Pixel(15);
            this.MasterTableView.AllowMultiColumnSorting = false;

            GridClientSelectColumn selectColumn = new GridClientSelectColumn();
            this.MasterTableView.Columns.Add(selectColumn);
            selectColumn.HeaderStyle.Width = Unit.Pixel(15);
            selectColumn.UniqueName = "CheckBoxcolumn";

            this.ClientSettings.AllowColumnsReorder = true;
            this.ClientSettings.ReorderColumnsOnClient = true;

            this.ClientSettings.Resizing.AllowColumnResize = true;
            this.ClientSettings.Resizing.EnableRealTimeResize = true;
            this.ClientSettings.Resizing.ClipCellContentOnResize = true;
            this.ClientSettings.Resizing.ResizeGridOnColumnResize = false;

            this.ClientSettings.Scrolling.SaveScrollPosition = true;
            this.ClientSettings.Scrolling.UseStaticHeaders = true;
            this.ClientSettings.Scrolling.AllowScroll = true;

            this.ClientSettings.Selecting.AllowRowSelect = true;

            this.ClientSettings.ClientEvents.OnRowSelecting = "CancelNonInputSelect";
            this.ClientSettings.ClientEvents.OnRowDeselecting = "CancelNonInputSelect";
            this.Page.ClientScript.RegisterClientScriptInclude("BasicCmsGridScript", Path.Combine(ConfigMan.Settings.BaseHref, "js/GridScripts/BasicCmsGridScript.js"));

            ((CMS.Util.Page)this.Page).RegisterCssStyle(".rgAdvPart{ display:none;}");//hiding the page size selection controls
        }

        public override GridTableView CreateTableView()
        {
            return new BasicCmsGridTableView(this);
        }

        public override GridTableView MasterTableView
        {
            get
            {
                return base.MasterTableView;
            }
        }
    }

    public class BasicCmsGridTableView : GridTableView
    {
        public BasicCmsGridTableView() : base() { }

        public BasicCmsGridTableView(RadGrid owner) : base(owner) { }

        public BasicCmsGridTableView(RadGrid owner, bool isTrackingViewState) : base(owner, isTrackingViewState) { }

        protected override GridTableView CreateTableView(RadGrid owner, bool isTrackingViewState)
        {
            return new BasicCmsGridTableView(owner, isTrackingViewState);
        }
    }
}

The CancelNonInputSelect JS function lets you (de)select a row only by (un)checking the checkbox in the GridClientSelectColumn and not by clicking anywhere else on a row. This still works properly.
If any contructor and such is redundant for my purposes please let me know. I have been looking around for more information and just tried anything I came across.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using CMS.Process;

namespace CMS.WebControls.Grid
{
    public class CmsUsersGrid : BasicCmsGrid
    {
        public CmsUsersGrid() : base() { }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            this.MasterTableView.NoMasterRecordsText = "Geen gebruikers om te tonen.";

            GridBoundColumn guidColumn = new GridBoundColumn();
            this.MasterTableView.Columns.Add(guidColumn);
            guidColumn.DataField = "Guid";
            guidColumn.DataType = typeof(System.Guid);
            guidColumn.UniqueName = "Guid";
            guidColumn.Visible = false;
            guidColumn.ReadOnly = true;

            GridBoundColumn nameColumn = new GridBoundColumn();
            this.MasterTableView.Columns.Add(nameColumn);
            nameColumn.DataField = "Name";
            nameColumn.HeaderText = "Naam";
            nameColumn.SortExpression = "Name";
            nameColumn.UniqueName = "Name";
            nameColumn.HeaderStyle.Width = Unit.Pixel(105);

            GridBoundColumn usernameColumn = new GridBoundColumn();
            this.MasterTableView.Columns.Add(usernameColumn);
            usernameColumn.DataField = "Username";
            usernameColumn.HeaderText = "Gebruikersnaam";
            usernameColumn.SortExpression = "Username";
            usernameColumn.UniqueName = "Username";
            usernameColumn.HeaderStyle.Width = Unit.Pixel(105);

            GridBoundColumn emailColumn = new GridBoundColumn();
            this.MasterTableView.Columns.Add(emailColumn);
            emailColumn.DataField = "Email";
            emailColumn.HeaderText = "Emailadres";
            emailColumn.SortExpression = "Email";
            emailColumn.UniqueName = "Email";
            emailColumn.HeaderStyle.Width = Unit.Pixel(105);

            GridBoundColumn roleColumn = new GridBoundColumn();
            this.MasterTableView.Columns.Add(roleColumn);
            roleColumn.DataField = "Role";
            roleColumn.HeaderText = "Rol";
            roleColumn.SortExpression = "Role";
            roleColumn.UniqueName = "Role";
            roleColumn.HeaderStyle.Width = Unit.Pixel(105);

            this.MasterTableView.ClientDataKeyNames = new String[] { "Guid" };

            this.ClientSettings.ClientEvents.OnRowDblClick = "RowDblClick";
            this.Page.ClientScript.RegisterClientScriptInclude("UsersGridAdditionalScript", Path.Combine(ConfigMan.Settings.BaseHref, "js/GridScripts/UsersGridAdditionalScript.js"));
        }

        public override GridTableView CreateTableView()
        {
            return new CmsUsersGridTableView(this);
        }

        public override GridTableView MasterTableView
        {
            get
            {
                return base.MasterTableView;
            }
        }
    }

    public class CmsUsersGridTableView : GridTableView
    {
        public CmsUsersGridTableView() : base() { }

        public CmsUsersGridTableView(RadGrid owner) : base(owner) { }

        public CmsUsersGridTableView(RadGrid owner, bool isTrackingViewState) : base(owner, isTrackingViewState) { }

        protected override GridTableView CreateTableView(RadGrid owner, bool isTrackingViewState)
        {
            return new CmsUsersGridTableView(owner, isTrackingViewState);
        }
    }
}

Some texts are in Dutch.
The RowDblClick JS sends you to the details page of the corresponding user, or at least it is supposed to.
Again there might be redundant constructors and methods here.

And this is where I try to use the CmsUsersGrid:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Gebruikers_List.aspx.cs" Inherits="CMS.Views.Beheer.Gebruikers.Gebruikers_List" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<%@ Register Assembly="CMS" Namespace="CMS.WebControls.Grid" TagPrefix="CmsGrids" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head runat="server">
    <title>Gebruikers overzicht</title>
    <link rel="stylesheet" type="text/css" href="../../../Layout/stylesheet.css" />
</head>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
       <asp:UpdatePanel ID="upUsersList" runat="server">
       <ContentTemplate>
           <CmsGrids:CmsUsersGrid ID="rgUsersGrid" runat="server" onneeddatasource="rgUsersGrid_NeedDataSource" />
       </ContentTemplate>
       </asp:UpdatePanel>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using CMS.Business;

using Telerik.Web.UI;
using System.Data;
using CMS.Process;
using CMS.Util;

namespace CMS.Views.Beheer.Gebruikers
{
    /// <summary>
    ///     shows a list of all users
    /// </summary>
    public partial class Gebruikers_List : CMS.Util.Page
    {
        private IOrderedEnumerable<CMSUser> _users = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            RetrieveObjects();

            if (!IsPostBack)
            {
                InitForm();
            }
        }

        private void RetrieveObjects()
        {
            //get all users, ordered by name
            _users = CMSUser.RetrieveAll().ToList().OrderBy(u => u.ToString());
        }

        private void InitForm()
        {
            //GridConfigor.ConfigAsUsersGrid(rgUsersGrid, this);
        }

        protected void rgUsersGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            DataTable table = new DataTable("xxx");
            table.Columns.Add("Guid");
            table.Columns.Add("Name");
            table.Columns.Add("UserName");
            table.Columns.Add("Email");
            table.Columns.Add("Role");
            foreach (CMSUser user in _users)
            {
                table.Rows.Add(user.usr_GUID, user.ToString(), user.usr_username, user.usr_email, (UserRole)user.usr_role);
            }

            rgUsersGrid.DataSource = table;
        }
    }
}

Please help me out with this one.

Regards,

Mink

[Rosen]

Hello Mink,

Can you please move the properties instantiation form load event to init event and let us know if this helps?

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

[Mink]

I assume you mean to change 'protected override void OnLoad(EventArgs e)' in 'protected override void OnInit(EventArgs e)' in my BasicCmsGrid and CmsUsersGrid classes?
That doesn't help. I now get a HttpException with the message "Multiple controls with the same ID 'CheckBoxcolumnSelectCheckBox' were found. FindControl requires that controls have unique IDs.". Note that I add a GridClientSelectColumn named "CheckBoxcolumn" to the MasterTableView in the BasicCmsGrid class.
Any ideas?

[Rosen]

Hi Mink,

I have attached a modified version of the code you have pasted. Can you please take a look maybe I'm missing something obvious?

Greetings,
Rosen
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.

[Mink]

Thanks! It works!

I've been on a hollyday so that's why I haven't tried it earlier and let you know it works. That's also the reason I don't remember why I couldn't get it to work before because you example seems to simply implement the sugestion made earlier to change Onload to OnInit. I did try it but somehow it didn't work for me then.

Meanwhile the code has changed so that the columns are no longer defined in de OnLoad, but are defined by the data source and in the OnColumnCreated event it is decided whether or not to show the column depending on a settings file. So I completely left the Onload for the CmsUsersGrid out and I only have an OnInit in the CmsUsersGrid as well.

Again, thanks for your help.

Regards,

Mink