Inline Editing Options in SharePoint Designer
When you create a list view dataview web part in SharePoint 2010 you have the option of enabling inline editing. Once enabled users can edit and create list items without leaving the page. This is nice but by default SharePoint Designer does not style the interface the same way as it is when done in a standard list view. See the example below.
This is not difficult to fix, here is how I did it.
Here is what the standard inline editing interface looks like
When you use a data view web part it looks like this by default
Now this interface may look fine to you but I wanted it to look more like the standard interface. To get it looking better requires adding some code to the data view using SharePoint desiger.
To do this I open the page in SPD and put it in split view. Then click where it says ‘edit’ in the design vew portion of the page. This will help you find the portion of the code that needs to be modified.
This is the code that makes up the inline editing interface
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">save</a>
<a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">cancel</a>
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">save</a>
<a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">cancel</a>
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">edit</a>
Each of the links for editing, saving and cancelling is made up of code like this. We just need to change the code to display an icon instead of just text. In the code above you will notice there are mutiple instances of the save and cancel links so make sure you update all of them.
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">save</a>
For the edit link find this code
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">edit</a>
Replace with this code. What we have changed is replacing the ‘edit’ text with an image from the 14 hive. Remeber to include an alt attribute on the image and also add border=0 so the image does not show a border.
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}"><img alt="edit" src="/_layouts/images/edititem.gif" border="0" /></a>
The process for the save button is the same. Find this code (it will be in two places, replace both)
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">save</a>
Replace with this
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}"><img alt="Save" src="/_layouts/images/saveitem.gif" border="0" /></a>
The cancel button is a bit different because it uses a sprite for its image, no not the soft drink. You can learn more about sprites here.
Find this code
<a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">cancel</a>
Replace it with this code (it will be in two places, replace both)
<span class="s4-clust" style="height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden;"><a style="height: 16px; width: 16px; display: inline-block;" href="javascript: {ddwrt:GenFireServerEvent('__cancel')}"><img style="left: -0px !important; top: -138px !important; position: absolute;" alt="cancel" src="/_layouts/images/fgimg.png" border="0" /></a></span>
Here is the result, the icons are stacked because the data view code includes a table cell around each one.
To fix this we just need to remove some of the table cells so the save and cancel buttons can be next to each other. Find this code
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}"><img alt="Save" src="/_layouts/images/saveitem.gif" border="0" /></a>
<span class="s4-clust" style="height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden;">
<a style="height: 16px; width: 16px; display: inline-block;" href="javascript: {ddwrt:GenFireServerEvent('__cancel')}"><img style="left: -0px !important; top: -138px !important; position: absolute;" alt="cancel" src="/_layouts/images/fgimg.png" border="0" /></a>
</span>
Replace it with this code (lines)
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}"><img alt="Save" src="/_layouts/images/saveitem.gif" border="0" /> </a>
<span class="s4-clust" style="height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden;">
<a style="height: 16px; width: 16px; display: inline-block;" href="javascript: {ddwrt:GenFireServerEvent('__cancel')}"><img style="left: -0px !important; top: -138px !important; position: absolute;" alt="cancel" src="/_layouts/images/fgimg.png" border="0" /></a>
</span>
Here is the final code to make the interface match what is available on normal web parts. If you have any questions leave a comment
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}"><img alt="Save" src="/_layouts/images/saveitem.gif" border="0" /></a>
<span class="s4-clust" style="height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden; padding: 0px 2px;">
<a style="height: 16px; width: 16px; display: inline-block;" href="javascript: {ddwrt:GenFireServerEvent('__cancel')}"><img style="left: -0px !important; top: -138px !important; position: absolute;" alt="cancel" src="/_layouts/images/fgimg.png" border="0" /></a>
</span>
<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}"><img alt="Save" src="/_layouts/images/saveitem.gif" border="0" /> </a>
<span class="s4-clust" style="height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden;">
<a style="height: 16px; width: 16px; display: inline-block;" href="javascript: {ddwrt:GenFireServerEvent('__cancel')}"><img style="left: -0px !important; top: -138px !important; position: absolute;" alt="cancel" src="/_layouts/images/fgimg.png" border="0" /></a>
</span>