Add Remove and Sort Items between two Listboxs using Jquery

Recently, I got a requirement that add remove and sort items between two listboxs like below.

You can select items from left box, and move to right box, and vice versa. When you move items back to left from right. It can sort the items. Jquery is a excellent library to manipulate the element on the page. The code is simple and neat.

Reference: Link

SharePoint Web Part and JavaScript–Add Client Event

I have written a post about how to add script to the SharePoint Web Part. Here I am trying to add a client event to a button or checkbox.

1. Add the the script to web part as my previous post.

2.In this case, I want to a click event for a button. You do it like below:

You already implemented a showinformation function and added it  to your web part, and used the ClientID of the control as a parameter. You can see that I put the initialization in the OnPreRender() function, I haven’t tried to put in other functions, you can have a try by yourself.

These are what you need do.

Add/Hide Menu Item in the ECB from SharePoint Items

You add a new custom action to items the Edit Control Block (ECB) menu by using the Features. However, you can not hide a item from the ECB by using the features. But you can use the JavaScript to add or a new item to the ECB.

There is file named core.js in the<%Program files %>\common files\Microsoft shared\web server extensions\12\Template\layouts\1033 which is responsible for rendering.

Add a new item
1.Add a content editor web part to the page.(If you want all the lists and document libraries have the same feature, you can add the script to your master page. )

2.Add the script to the web part(The code snippet came from here)

function Custom_AddDocLibMenuItems(m, ctx) 

{ 

    var strDisplayText = Your display text 

    var strAction = Your action 

    var strImagePath = Your image path   

    // Add our new menu item 

     CAMOpt(m, strDisplayText, strAction, strImagePath);   

    // add a separator to the menu 

     CAMSep(m);  

    // false means that the standard menu items should also be rendered 

    return false; 

}

Hide a item

If you just want to hide menu item in a single list/library, add a content editor like above.

There is a function named AddDocLibMenuItems in the core.js that is used to render the ECB. If can find there are some functions calling in the AddDocLibMenuItems like below

AddCheckinCheckoutMenuItem — Add Check in/out menu item
AddVersionsMenuItem — Add version check menu item
AddSendSubMenu — Add send to menu item

So, if you want to hide the item from ECB, the easiest way is to comment the corresponding function in the AddDocLibMenuItems. But you should not midofy the core.js in the server directly, which would impact the whole farm. If you check the AddDocLibMenuItems, you will find that it would check if the Custom_AddDocLibMenuItems exist. So you can add your Custom_AddDocLibMenuItems function in the content editor, and return true.(Returning true would prevent from calling the default AddDocLibMenuItems).

The only thing you need do is to create a Custom_AddDocLibMenuItems function in the content editor web part, except for this part. If you include this part, it would throw a stack overflow exception. Because it cause a infinite recursive calling.

if (typeof(Custom_AddDocLibMenuItems) !="undefined") 

{ 

    if (Custom_AddDocLibMenuItems(m, ctx)) 

    return; 

}

In my example, I want to hide the menu item–Edit in Microsoft InfoPath. So,I delete two CAMOpt functions in the code. You can find these two lines below.
if (ctx.isWebEditorPreview==0 && ctx.listBaseType==1)
        {
            if (ctx.listTemplate==109 && itemTable.getAttribute("IsImage")=="1")
            {
                strDisplayText=L_EditInOIS_Text;
                strAction="EditSingleImage('"+currentItemID+"')";
                strImagePath=ctx.imagesPath+"oisweb.gif";
                menuOption=CAMOpt(m, strDisplayText, strAction, strImagePath, null, 240);
                menuOption.id="ID_EditInOIS";
            }
            else
            {
                setDocType();
                if (currentItemAppName !="" && currentItemOpenControl !="")
                {
              strDisplayText="";
              if (currentItemAppName !=" ")
                        strDisplayText=StBuildParam(L_EditIn_Text, currentItemAppName);
                    else
            {
                  var   objEditor=StsOpenEnsureEx(currentItemOpenControl+".3");
                      if (objEditor !=null )
                    strDisplayText=L_EditInApplication_Text;
                        }
            if (strDisplayText !="")
            {
                strAction="editDocumentWithProgID2('"+currentItemFileUrl+"', '"+currentItemProgId+"', '"
+currentItemOpenControl+"', '"+bIsCheckout+"', '"+ctx.HttpRoot+"', '"+currentItemCheckedoutToLocal+"')";
                            strImagePath=ctx.imagesPath+currentItemIcon;
                            menuOption=CAMOpt(m, strDisplayText, strAction, strImagePath, null, 240);
                            menuOption.id="ID_EditIn_"+currentItemAppName;
            }
                }
            }
        }

SharePoint Web Part and JavaScript--Add script to web part

ASP.NET controls are not limited to the server controls, you also can insert JavaScript in the ASPX page, just like we do in the HTML file. In order to improve user experiment in richer interface, JavaScript is your indispensable tool.In the Web 2.0 age, good user experiment is essential to your site. Users don’t like refreshing the pages again and again.You also can use the ASP.NET AJAX if you are on the MS side, but you also has other choices, like your own script or other three party library. In ASP.NET,
there is a ClientScript object in Page class, it manage the script on the page. We can use it to manage our scripts too.
Add a block of script
string ScriptKey = "myScript";
string EmbeddedScript ="<script language=javascript>function fun(){alert('hello world'); }</script> ";
if(!Page.IsClientScriptBlockRegistered(ScriptKey ))
    Page.RegisterClientScriptBlock(ScriptKey ,EmbeddedScript );
Link a external file
You also can link a external file to your web part. Linking a external file to the web part is very similar to embed a block of code to web part. First, you need put your file under the 12 hive folder, like layout. The only think you need notice is the location of your file. If you do not what doe the location look like in a SharePoint ASPX page, you can just open a page , right click, view source, find the default script’s location.
string ScriptKey = "myScript";
string EmbeddedScript ="<script language='javascript' src='your file'></script> ";
if(!Page.IsClientScriptBlockRegistered(ScriptKey ))
     Page.RegisterClientScriptBlock(ScriptKey ,EmbeddedScript );

Embed a file to DLL file
Sometimes, if you want to prevent your resources, such as images,css,Javascript, from being touched. You can embed them into a DLL. A ASP.NET provides the special URL of “WebResource.axd” to provide these files.
At first, you need add your script file to your project, then change the the Build Action like below:

Next, open the AssemblyInfo.cs file (usually appears under the ‘properties’ folder). In here we need to add a reference to the file and tell the compiler what it’s MIME type is. You can check the exactly location using the Reflector.

[assembly: WebResource("***.MyScript.js", "text/javascript")]
hen you add the script file like below.
string scriptUrl=this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "Location of your file"));
this.Page.ClientScript.RegisterClientScriptInclude("MyScript", scriptUrl)
The only issue that need to be mentioned about embedding the file to the DLL is the performance. Getting the file from the file system should be faster than exacting from the DLL file.