Thursday, 7 August 2014

XsltListViewWebPart add Checkbox

Create SharePoint App
Open Solution explorer
Under pages
Add new Item
Select Page
Give new page name
Now add below Code, It will get list data from "MyList"
You will see checkbox. Select checkbox.
When you click  Button, you will get item id..
You can do your actions on item...
<%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">
$(function () {
$("#btnFindID").click(function () {
//Below code will work, if check box title is ID..mean your ID column data will be available as a Title property of checkbox.
$.each($(".ms-listviewtable").find("tr"),
function (i, e0) {
$.each($(this).find(".s4-itm-cbx"),
function (k, e1) {
if (e1.checked == true) {
console.log(e1.title);
//You will get all selected Items ID
}
});
});
//If check box title is not having ID, then you have to read ID value from ID column
//Read ID based on Checkbox- Start
$.each($(".listViews").find("div"),
function (i, e0) {
if ($(this).css('display') == "inline-block") { //If you have multiple divs with .listViews class, then you can addition check based on style.
$.each($(this).find("tr.ms-itmhover"), function (i, opt1) {
$(this).find('td:nth-child(1)').each(function () {
var chk = $(this).find('input[type=checkbox]')[0];
if (chk.checked == true) {
$(opt1).find('td:nth-child(2)').each(function () {
console.log($(this).text());
});
}
});
});
}
});
//Read ID based on Checkbox-End
});
});
</script>
</asp:content>
<asp:content contentplaceholderid="PlaceHolderMain" runat="server">
<div class="listViews" id="dvMyList" style="display:inline-block">
<input class="btn" id="btnFindID" value="Archive" type="button" />
<WebPartPages:XsltListViewWebPart runat="server" IsIncluded="True"
FrameType="None"
NoDefaultStyle="TRUE" ViewFlag="8" Title="Latest news"
PageType="PAGE_NORMALVIEW" ListUrl="Lists/MyList"
Default="FALSE" DisplayName="Server journal" __markuptype="vsattributemarkup"
ID="lvwbArchive"
ViewContentTypeId="0x" WebPart="true" Height="" Width="">
<XmlDefinition>
<View Name="MySubmissions"
MobileView="TRUE" Type="HTML" DisplayName="All items"
Url="/Lists/MyList/AllItems.aspx" Level="1" BaseViewID="1"
ContentTypeID="0x">
<Query> <OrderBy><FieldRef Name="ID" Ascending="FALSE"/></OrderBy>
<Where>
<Neq><FieldRef Name="isTrue"/><Value Type="Text">Yes</Value></Neq>
</Where>
</Query>
<ViewFields>
<FieldRef Name="ID"/>
<FieldRef Name="Attachments"/>
<FieldRef Name="Title"/>
<FieldRef Name="Author"/>
<FieldRef Name="Created"/>
<FieldRef Name="isTrue"/>
</ViewFields>
<Toolbar Type="Standard"/>
</View>
</XmlDefinition>
</WebPartPages:XsltListViewWebPart>
</div>
</asp:content>
view raw gistfile1.html hosted with ❤ by GitHub