Problem using skin in SharePoint

[Alexander]

I have been working on a SharePoint application page that has a RadGrid on it, I've finally managed to get it displaying more or less how i want it, but the cell alignment seems a little odd, and when I try to add a skin it gives me an error saying that the skin wasn't found or something like that. I've attached the aspx and codebehind file, and also a screen of how it is displaying now, I would appreciate any help.

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/_layouts/application.master" CodeBehind="~/Pages/VersionHistory.aspx.cs"
         Inherits="BlackBlade.ListActions.DocumentSectionManager.Monitor.VersionHistory, BlackBlade.ListActions.DocumentSectionManager.Monitor,Version=1.0.0.0,Culture=neutral,PublicKeyToken=932c3000eeb6dd9c"
    %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2008.3.1125.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="cc1" %>

<asp:Content ID="Main" runat="server" contentplaceholderid="PlaceHolderMain" >

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadGrid ID="RadGrid1" CssClass=RadGrid runat="server" OnColumnCreated="RadGrid1_ColumnCreated"
            OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound">
            <MasterTableView CssClass=rgClipCells HierarchyDefaultExpanded="true" HierarchyLoadMode="Client" AllowSorting="true"
                DataKeyNames="GUID, ParentGUID" Width="100%">
                <SelfHierarchySettings ParentKeyName="ParentGUID" KeyName="GUID" />
            </MasterTableView>
            <ClientSettings AllowExpandCollapse="true" />
        </telerik:RadGrid>

        <!-- content end -->

</asp:Content>

<asp:Content ID="PageTitle" runat="server"
             contentplaceholderid="PlaceHolderPageTitle" >
   Version History
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" runat="server"
             contentplaceholderid="PlaceHolderPageTitleInTitleArea" >
   BlackBlade Version History
</asp:Content>

using System;
using Telerik.Web.UI;
using Microsoft.SharePoint;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.Reflection;
using System.Collections.Generic;
using Microsoft.SharePoint.WebControls;
using System.Data;

namespace BlackBlade.ListActions.DocumentSectionManager.Monitor
{
    public partial class VersionHistory : LayoutsPageBase
    {
        private DataTable dataTable = new DataTable();
        protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
            if (e.Column is GridExpandColumn)
            {
                e.Column.Visible = false;
            }
            else if (e.Column is GridBoundColumn)
            {
                e.Column.HeaderStyle.Width = Unit.Pixel(100);
            }
        }

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

                string strItemId = this.Request["ItemID"];
                string strListId = this.Request["ListID"];

                SPWeb site = this.Web;
                SPList list = site.Lists[new Guid(strListId)];
                SPListItem item = list.GetItemById(Convert.ToInt32(strItemId));

                ColumnSetup();

                VersionCollectionTree tree = new VersionCollectionTree(item);
                PopulateData(tree.headers[0], "root");
                RadGrid1.DataSource = dataTable;

                RadGrid1.MasterTableView.FilterExpression = "ParentGUID = 'root'";
            }
            catch
            {
            }
        }



        protected override void  OnPreRenderComplete(EventArgs e)
        {
            base.OnPreRenderComplete(e);
            HideExpandColumnRecursive(RadGrid1.MasterTableView);

            RadGrid1.MasterTableView.GetColumn("GUID").Visible = false;
            RadGrid1.MasterTableView.GetColumn("ParentGUID").Visible = false;


        }

        public void HideExpandColumnRecursive(GridTableView tableView)
        {
            GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView);
            foreach (GridNestedViewItem nestedViewItem in nestedViewItems)
            {
                foreach (GridTableView nestedView in nestedViewItem.NestedTableViews)
                {
                    nestedView.Style["border"] = "0";
                    nestedView.GetColumn("GUID").Visible = false;
                    nestedView.GetColumn("ParentGUID").Visible = false;

                    Button MyExpandCollapseButton = (Button)nestedView.ParentItem.FindControl("MyExpandCollapseButton");
                    if (nestedView.Items.Count == 0)
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style["visibility"] = "hidden";
                        }
                        nestedViewItem.Visible = false;
                    }
                    else
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style.Remove("visibility");
                        }
                    }

                    if (nestedView.HasDetailTables)
                    {
                        HideExpandColumnRecursive(nestedView);
                    }
                }
            }
        }

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            CreateExpandCollapseButton(e.Item, "Title");

            if (e.Item is GridHeaderItem && e.Item.OwnerTableView != RadGrid1.MasterTableView)
            {
                e.Item.Style["display"] = "none";
            }

            if (e.Item is GridNestedViewItem)
            {
                e.Item.Cells[0].Visible = false;
            }
        }

        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            CreateExpandCollapseButton(e.Item, "Title");
        }

        public void CreateExpandCollapseButton(GridItem item, string columnUniqueName)
        {
            if (item is GridDataItem)
            {
                if (item.FindControl("MyExpandCollapseButton") == null)
                {
                    Button button = new Button();
                    button.Click += new EventHandler(button_Click);
                    button.CommandName = "ExpandCollapse";
                    button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand";
                    button.ID = "MyExpandCollapseButton";

                    if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client)
                    {
                        string script = String.Format(@"$find(""{0}"")._toggleExpand(this, event); return false;", item.Parent.Parent.ClientID);

                        button.OnClientClick = script;
                    }

                    int level = item.ItemIndexHierarchical.Split(':').Length;
                    if (level > 1)
                    {
                        button.Style["margin-left"] = level * 10 + "px";
                    }

                    TableCell cell = ((GridDataItem)item)[columnUniqueName];
                    cell.Controls.Add(button);
                    cell.Controls.Add(new LiteralControl(" "));
                    cell.Controls.Add(new LiteralControl(((GridDataItem)item)[columnUniqueName].Text.ToString()));
                }
            }
        }

        void button_Click(object sender, EventArgs e)
        {
            ((Button)sender).CssClass = (((Button)sender).CssClass == "rgExpand") ? "rgCollapse" : "rgExpand";
        }

        private void ColumnSetup()
        {
            dataTable.Columns.Add("Title", typeof(string));
            dataTable.Columns.Add("Version");
            dataTable.Columns.Add("Modified");
            dataTable.Columns.Add("User");
            dataTable.Columns.Add("Size");
            dataTable.Columns.Add("Comment");
            dataTable.Columns.Add("GUID", typeof(string));
            dataTable.Columns.Add("ParentGUID", typeof(string));
        }

        private void PopulateData(VersionCollectionTree.Node node, string parentGUID)
        {
            DataRow row = dataTable.NewRow();

            string GUID = node.versionCollection.latest.file.UniqueId.ToString();

            row["GUID"] = GUID;
            row["ParentGUID"] = parentGUID;
            row["Title"] = node.versionCollection.latest.file.Name;
            row["Version"] = node.versionCollection.latest.versionLabel;
            row["Modified"] = node.versionCollection.latest.created;
            row["User"] = node.versionCollection.latest.user.Name;
            row["Size"] = node.versionCollection.latest.size;
            row["Comment"] = node.versionCollection.latest.comment;
            dataTable.Rows.Add(row);

            if (node.hasChildren)
            {
                foreach (VersionCollectionTree.Node child in node.children)
                {
                    PopulateData(child, GUID);
                }
            }
        }
    }
}

Thanks,
Alex

[Dimo]

Hello Alex,

Please add the following CSS rule to your page:

.RadGrid_Default td{padding:0} 

Default is the RadGrid skin that you are currently using.


>> when I try to add a skin it gives me an error saying that the skin wasn't found or something like that

You should either set a skin from the list of embedded skins, or set EnableEmbeddedSkins="false" and supply a custom skin including the CSS code.

http://www.telerik.com/help/aspnet-ajax/controlling-appearance-overview.html

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

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

Greetings,
Dimo
the Telerik team