Monday, June 16, 2008

Breaking long column names in moss

The scenario:
Recently I came across the requirement in which one of our lists has a very big name of the column.
So our look and feel is messed.

The Requirement:
Now what my requirement is I need to break this column name in two lines in “NEW” and “Edit” Mode.
Example- Name of the column is “this is very long name of the column and i want to splilt it“

The Challenge.
Now I have to find the way to break it!!!

First I tried to change the name from “this is very long name of the column and i want to splilt it”
To “this is very long name of<br>the column and i want to spilt it”

But failed. Because while rendering it replaces < to “& lt;” and > to “& gt;”

Now
What I had observer is that while checking in view source the name of the column is rendered in between <nobr> </nobr> tag.
So I there is no chance to break it with my first idea.

The Solution.
I found a strange way to resolve this.
What you have to is that do it with java script.

In java script while loading the page you have to find that label and change it with a BR tag manually.

I will tell you how to do it.
First you have to call java script in this page.
You can do that by
Creating a custom control using .aspx here is the way.
Or create a web part and put it on the list page.(Check This)
Note: for Creating a webpart with user control .ascx (go to this site)

In that .ascx of web part or custom control, you need to find all elements for <nobr>
And find the original text.
And replace this text means inner html of of<nobr> with new text which include <br>
So while rendering it breaks up even if it was on <nobr>.
Using simple JavaScript in SharePoint check this article

Here the sample java script.

// this is default SharePoint function
//it will call after page is loaded.
_spBodyOnLoadFunctionNames.push("split");


//this function finds all <nobr> tag
//then check our original text and
//replace new text which contains <br>
function split()
{
var oP = document.getElementsByTagName('nobr');//the collection of <p> tags
for(var i=0;i<oP.length;i++)
{
//alert(oP[i].innerHTML);
if(oP[i].innerHTML == "this is very long name of the column and i want to splilt it")
{
oP[i].innerHTML = "this is very long name of<br>the column and i want to splilt it"
}
}
}

No comments:




Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com