Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

Selectable rows in SharePoint using jQuery UI

Posted by zieglers on November 22, 2010

Here is a quick tip. If you’d like to make rows in document libraries selectable, jQuery UI Selectable is the perfect fit for this.

*Select multiple rows

* Urls of selected documents will be shown.

All you have to do is refer to jQuery UI js, and select your DOM elements to make them selectable and apply your logic.

In this demo, i’ll simply display urls for selected documents. Go ahead and add a CEWP in your document library page. Then select listviewtable as follows. Your function should look like this:

<script>
$(function() {

//make listviewtable selectable
    $(“.ms-listviewtable“).selectable({

      filter: “tr“,  

      stop: function() {
         // display urls of selected documents
         var result = $( “#select-result” ).empty();
         $( “.ui-selected”, this ).each(function() {

             var index = $( ‘a’, this ).attr( ‘href’ );
             result.append( “<br/>” + ( index ) );

         }); // end – each

      } //end – stop

    }); // end – selectable

}

</script>

<span id=”select-result”></span>

So, above code is making all rows in listview table selectable and once you select one or multiple rows, urls are displayed. That part is done in stop function of selectable above.

Now, you selected multiple rows and you have IDs, URLs, …etc. for them, you can simply use that information as an input to your own logic.

zieglers

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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: