SharePoint 2010: Get Selected Items from List View in Visual Web Part

While working in SharePoint 2010, we had a requirement to get all the selected items from List View [XSLTListView] to my Visual Web Part to do some functioning on them… Now we thought to use default selection checkbox and get all items by SP.ListOperation.Selection.getSelectedItems, here is the code used in Visual Web Part to get all selected items:

function setSelectedItemsOld() {
    try {
    var ctx = SP.ClientContext.get_current();
    var items = SP.ListOperation.Selection.getSelectedItems(ctx);
    //alert(items);
    var myItems = '';
    var i;

    for (i in items) {
    myItems += '|' + items[i].id;
    }

    document.getElementById("<%= hdnItemsToSend.ClientID %>").value = myItems;
    }
    catch (e) {
    alert('Exception Occured' + e.Message);
    }
}

where “hdnItemsToSend” is the HiddenField’s ID… So item id’s separated by ‘|’ were stored inside the Hidden field.

But the problem was whenever user clicks outside the List View, all the selection is gone! We had a Visual Web Part before the List View where we were taking some input and after that List View for selecting Items need to be forwarded! Sometimes user just makes selection in Items and then go back to enter details, which results in No Selection… The default selection assumes to work with Ribbon Controls, unfortunately we wanted them to use with Visual Web Part…

A workaround was to insert own Selection checkbox with each item, using Calculated Field to generate HTML inside the XSLTListView using Christophe’s Path to SharePoint JavaScript: HTML Calculated Column, so created a Calculated Column in list with formula as:

=CONCATENATE("<div><input type=’checkbox’ name=’chkSelect’ id=’", customIdColumn, "’ /></div>")

We have to put the Christophe’s: HTML Calculated Column JavaScript at the bottom of our XSLTListView, maybe in a Content Editor Web Part… And once you have your custom checkbox ready, you can see on checking items from it and clicking somewhere else now, doesn’t remove the selections!

Now you can access the selections from your Visual Web Part like [JavaScript below is inside Visual Web Part]:

<script type="text/javascript">

function setSelectedItems() {
		try {
			var items = "";
			var selectedItems = document.getElementsByName("chkSelect");

			for (var index = 0; index < selectedItems.length; index++) {
				if (selectedItems[index].checked) {
					items += selectedItems[index].id + "|";
				}
			}

			if (items.length > 0) {
				document.getElementById("<%= hdnItemsToSend.ClientID %>").value = items;
				return true;
			}
			else {
				document.getElementById("<%= lblErrorShow.ClientID %>").innerText = "Please select items to proceed!";
			}
		}
		catch (ex) {
		}
		return false;
    }

</script>

Oh, and I forgot to tell where will you call setSelectedItems JavaScript function from, it was a custom button in Visual Web Part which was clicked to process the items, which looked like:

<asp:Button ID="btnSubmit" runat="server" OnClientClick="setSelectedItems" 
     OnClick="btnSubmit_Click" Text="Submit" />

If the JavaScript function will return true only then the btnSubmit_Click event will be called, this is simply from ASP.NET area! And, you can access the items from code behind on btnSubmit_click by splitting the id’s from hidden field… I hope this helps someone!

Tagged: calculated field, custom selection, list view, selected items, sharepoint 2010, SP.ListOperation.Selection.getSelectedItems, visual web part, xslt list view, xsltlistview