How to override SharePoint field rendering in EditForm?

Question

Hello,

I have a list with a choice field, which is multiple choice - meaning many checkboxes.

I'd like to render it such that it will be surrounded by a frame, for example a DIV tag with a border.

(The frame should be in the HTML document)

How can I edit the Control Templates / FLDTYPES.XML / Create a control / any thing, to achieve this?

Thanks!

Answer 1

It sounds like you're on the right track thinking about control templates. I think you'd find some success just looking on the web for creating a custom SharePoint field type. You probably want to inherit your field type from SPFieldMultiChoice, and your control's ascx file would contain your div and its styling.

For custom field types, you typically need to create:

• A field type class
• A control class to represent the rendered control for your field type
• An ascx file to contain the html scaffolding for your rendered control

This article seems a good starting point: http://www.c-sharpcorner.com/Blogs/BlogDetail.aspx?BlogId=1207

The SharePoint SDK entries on custom field types are also good enough to use as a starting point.

Answer 2

You might also consider the SharePoint duct tape approach - javascript/jQuery in a content editor web part (CEWP)

This post shows you the overall method of how to get it onto a new/edit form :-

• http://blog.pentalogic.net/2009/09/setting-default-duration-for-new-calender-events/

There are lots of articles about SharePoint and jQuery that would give you ideas about how you could take this further to add a border around the checkboxes, a few links :-

• End User SharePoint - jQuery for everyone

• Path to SharePoint

Disclaimer - This approach is often touted as 'no-code' when the reality is that its more about letting you quickly 'the job done' (often because it bypasses Administrators, change control etc) and should probably been seen for the hack it is. Powerful but use appropriately! Maybe one thing to consider is that if this stops working (service pack, upgrade to 2010, tempalte changes etc) then what is the downside - I would doubt a missing border is that critical?

See jQuery - the SharePoint bad aid for a discussion.

Answer 3

As stated by Ryan, using jQuery to do surround the control with a div is the cleanest way to go. It just requires a ContentEditorWebPart (CEWP) to be added to the site and the jQuery library uploaded to say a doc lib or, by using SharePoint Designer, any folder) include a reference to the jQuery library by adding a script like so to the page through the CEWP:

<script type="text/javascript" src="pathtojquerylibrary/jquery.js"> <script>

Then you would need to write some javascript code, also in the CEWP to select the control you want, add a div to the piece of html's parent you selected using jquery, then cut / paste the selected html into the new div.

it would look something like this (this code is not complete and certainly not tested):

$('query').parent().append('<div></div>').append($('query').html()); 
// where 'query' is the jquery selector for the control you want