in

Dot Net Mafia

Group site for developer blogs dealing with (usually) .NET, SharePoint 2013, SharePoint 2010, Office 365, SharePoint Online, and other Microsoft products, as well as some discussion of general programming related concepts.

Kyle Kelin on .Net

Why Not Make Your SharePoint 2010 Menus Sortable?

One big improvement in SP2010 is in the rendered markup. You will see fewer tables and more lists and div elements.When I saw this I immediately thought of what this would allow with jQuery. The Ribbon control and menus in SP2010 are rendered as unordered lists. This allows us to apply interactions to them from the jQuery UI framework. In this post I am going to walk you through an example. In the example we are going to apply the sortable interaction to the SharePoint menu. After deploying our Web Part , the user can then reorder the menu items. In the screen shots below I am moving the Browse menu item to the right of the Page menu item. Now in this example I don’t save the result so the page refresh would reset the users sorting but you could easily write some JavaScript code that saved the order to a SharePoint list.

image

image

image

Step 1 – Create a new Visual Web Part project in VS2010. There are already many articles on this subject so I will allow you to just go ahead and Google this if you need to.

Step 2 – Download and reference jQuery and JQuery UI.
  There are a number of ways to do this. I chose to simply download the files and drop them in the layouts folder of the 14 hive. You can also directly link to them on Google. Here are my references:

<script type="text/javascript" src="_layouts/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/ui.core.js"></script>
<script type="text/javascript" src="_layouts/ui.sortable.js"></script>

Step 3 – The rest of the code in the Visual WebPart

<script type="text/javascript">
    $(document).ready(function () {
        $(".ms-cui-tts").sortable(); ;

    });
</script>

This is all the code that is required! The class of the UL element that wraps the menu we are trying to make sortable is ms-cui-tts. To keep this example simple I used a Visual Web Part but it would be better to add the above JavaScript block to the master page so that all pages had the same functionality.

Comments

No Comments

Leave a Comment

(required)  
(optional)
(required)  
Add

About KyleKelin

Kyle Kelin has been implementing software in the Microsoft space for the past 6 years mainly as a consultant. His interests are SharePoint, .NET, JQuery, and Silverlight.
2015 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems