Home > SharePoint Advancements > Adjusting SharePoint List Columns using JQuery

Adjusting SharePoint List Columns using JQuery

Sometimes there might be a case where you need to manually adjust the column width of a SharePoint list but you do not have access to SharePoint Designer (SPD) to accomplish this.  This option cannot be performed OTB in MOSS 2007.  So either SPD is needed or a little knowledge of JQuery would work here.
 
If you do have access to SPD this can easily be accomplished.
 
1.  Open up SPD
2.  Go to File -> Open Site and enter or browse to the portal site that has the list.
3.  Open up the list view you want to modify (located on the leftside navigation in SPD).  You might have to expand the list folder to see all available list views.
4.  The list view will open up in the right panel.  If the view is not already set to “Split” or “Design” click on the corresponding tabs at the bottom of the panel.
5.  Once the view is open you should see your list as if you were viewing it on your SharePoint site.
6.  Click on the list view webpart in the design panel.  This will highlight the listview webpart
7.  Right click the listview webpart and select ‘Convert to XSLT Data View”
8.  The design panel will re-render.
8.  This will convert the webpart to XSLT which will allow you to modify the columns, rows as you please.
9.  As you can see there are now grid lines for all the rows and columns.
10.  If you move your mouse over the gridlines you will see a double sided horizontal arrow.   Just click and move left or right to resize the column width.
11.  Resize to your liking.
12.  Save your listview.
13.  View in SharePoint
 
 
If you do not have SPD this can be done with a few lines of JQuery placed inside a (Content Editor Web Part) CEWP on the listview site.
 
1.  Browse to your listview site in SharePoint.  Make sure you are in the view you want to modify.
2.  Edit your site and click on ‘Add A Web Part’
3.  Scroll down until you see the CEWP webpart
4.  Add the webpart to your site.
5.  Once the webpart is added, move the CEWP webpart below your listview.
6.  Open up the CEWP by clicking on Edit->Modify Shared Web Part
7.  Once the CEWP editor is open, click on “Source Editor”
8.  Paste the following code into the Source Editor section.
 
<!–ADJUST TABLE COLUMN WIDTH–>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js“></script>
<script>
$(function(){
$(“tr.ms-viewheadertr th:contains(‘Title’)”, “#MSO_ContentTable”).css(“width”, “50px”);
$(“tr.ms-viewheadertr th:contains(‘Assigned To’)”, “#MSO_ContentTable”).css(“width”, “300px”);
});
</script>
 
9.  Here is where you can specify the names of your columns and the width of each column
10.  Make your adjustments, and click save
11.  Close out of the CEWP editor
12.  View your site.  Your columns should now be adjusted to the width you specified in the CEWP.
 
*Thing I noticed is alot of the smaller width sizes ie. widths smaller than 100px sometimes don’t work.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: