Add css class to WebPart placeholder div

Question

I have a simple webpart that all it does is go through a list of items and uses a repeater to display the html.

The webpart itself however wraps the generated repeater elements with a div like this:

<div id="ctl00_PlaceHolderMain_g_5b7d2737_0733_441e_bbd5_08672344c6a6"> 
    <div>Testing </div>
    <div>Testing again </div>
</div>

Where 'Testing' and 'Testing again' are the 2 elements generated inside of of the repeater/ItemTemplate and the outer I assume is the webpart placeholder div.

This is a public site on which the front end is done from a different team and the webpart is placed manually in the page.

Is there a way to remove the outer div or failing that, apply add a css class to it so that it becomes

<div class = 'row' id="ctl00_PlaceHolderMain_g_5b7d2737_0733_441e_bbd5_08672344c6a6">

UPDATE

Here is the .ascx file:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PeopleWebPart.ascx.cs" Inherits="PeopleWebPart.PeopleWebPart.PeopleWebPart" %>


<asp:Repeater id="pwpRepeater" runat="server" >
    <ItemTemplate>
        <div><%# Eval("Title") %> </div>
    </ItemTemplate>
</asp:Repeater>

And here's the .ascx.cs file:

using System;
using System.ComponentModel;
using System.Web.UI.WebControls.WebParts;
using System.Linq;
using System.Collections.Generic;
using Microsoft.SharePoint;

namespace ProjectsWebPart.ProjectsWebPart {
    [ToolboxItemAttribute(false)]
    public partial class ProjectsWebPart : WebPart {
        public ProjectsWebPart() {}

        protected override void OnInit(EventArgs e) {
            base.OnInit(e);
            InitializeControl();
        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!Page.IsPostBack) {
                SPWeb web = SPContext.Current.Web;
                SPList sourceList = SPContext.Current.Web.Lists.TryGetList("Project List");

                SPQuery qry = new SPQuery();
                qry.ViewFieldsOnly = true;
                qry.ViewFields = "<FieldRef Name='Title' /><FieldRef Name='Author' />";
                qry.RowLimit = 20;

                pwpRepeater.DataSource = sourceList.GetItems(qry).GetDataTable();
                pwpRepeater.DataBind();

            }
        }
    }
}

As I said before, this really is a very simple web-part.

So again, how do I do the ask above NOT USING Javascript but in Sharepoint ?

Thanks

Answer 1

As far as I can see, the

<div id="ctl00_PlaceHolderMain_g_5b7d2737_0733_441e_bbd5_08672344c6a6"> 

is rendered by the SharePoint WebPart and AFAIK cannot be suppressed. However, you can tweak the repeater to include a surrounding DIV with a CSS classname of your choice like this:

<asp:Repeater id="pwpRepeater" runat="server">
  <HeaderTemplate>
    <div class="putYourCssClassNameHere">
  </HeaderTemplate>
  <ItemTemplate>
    <div><%# Eval("Title") %> </div>
  </ItemTemplate>
  <FooterTemplate>
    </div>
  </FooterTemplate>
</asp:Repeater>

Hope that helps.

Answer 2

You have more than one solution. In this case jQuery might be the right answer.

Answer 3

Yes you can remove the outer div and also can add a css class to it, you can preform those changes using javascript or jquery on your master page.

To remove the outer dive you can do something like

var content = $("#ctl00_PlaceHolderMain_g_5b7d2737_0733_441e_bbd5_08672344c6a6").html();

The line above will get you all the html inside of the main div

To add a specific class to the div you can do something like

$("#ctl00_PlaceHolderMain_g_5b7d2737_0733_441e_bbd5_08672344c6a6").addClass("NewClass");

Answer 4

You can use the same approach, but you will have to do a loop over all the elements on the page.

I'm assuming that the ctl00_PlaceHolderMain is static.

You can try something like:

document.findElementWithIdLike = function(prefix) {
return findChildWithIdLike(document.body, prefix);
};

window.findChildWithIdLike = function(node, prefix) {
if (node && node.id && node.id.indexOf(prefix) == 0) {
    //match found
    return node;
}

//no match, check child nodes
for (var index = 0; index < node.childNodes.length; index++) {
    var child = node.childNodes[index];
    var childResult = findChildWithIdLike(child, prefix);
    if (childResult) {
        return childResult;
    }
}
};

alert(document.findElementWithIdLike("ctl00_PlaceHolderMain").id);