0

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

2
  • Can you post your relevant .NET code? Would make it a lot easier for us to help.
    – Sig Weber
    May 18, 2013 at 15:10
  • Definitely. Will update the question in 2 hours. On the road and battery is running out.
    – haknick
    May 18, 2013 at 18:13

4 Answers 4

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.

1
  • Ahh, I'm dumb. That would echo: <div id="ctl00_PlaceHolderMain_g_5b7d2737_0733_441e_bbd5_08672344c6a6"> <div class='foo'> <div>Testing </div> <div>Testing again </div> </div></div> Which is exactly what I need. Thanks, this is perfect. Totally missed the obvious.
    – haknick
    May 20, 2013 at 3:44
1

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

1
  • 1
    I am very aware I can do it with JavaScript, but there is no reason for the client to be doing work on the DOM that the server should have been doing already. Moreover the JS change on the DOM would affect how my page renders and this is the lazy way out. So let me be clear. How do you do this in SHAREPOINT. Thanks for trying to help
    – haknick
    May 18, 2013 at 14:19
0

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");

1
  • 1
    Same answer as above applies on this answer as well. In addition, the placeholder ID would obviously be dynamic as the web-part would be used in different contexts
    – haknick
    May 18, 2013 at 14:25
0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.