Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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

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

4 Answers 4

up vote 1 down vote accepted

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.

share|improve this answer
    
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 '13 at 3:44

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

share|improve this answer
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 '13 at 14:19

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

share|improve this answer
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 '13 at 14:25

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);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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