jQuery Chosen Plugin in SharePoint
Step1: Create a custom list.
Step2: Create a choice column and select check boxes allow multiple selection.
Step3: Create NewForm1.aspx using Designer and make it default form.
Step1: Create a custom list.
Step2: Create a choice column and select check boxes allow multiple selection.
Step3: Create NewForm1.aspx using Designer and make it default form.
Setp4: Edit and add below code and save NewForm1.aspx
Code:
Replace below code in NewForm1.aspx
Old code:
--------------------
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Choice</nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Choice" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Choice')}" />
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Choice" ControlMode="New" />
</td>
</tr>
Updated code:
--------------------
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Choice</nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<table>
<tr>
<td>
<div id="divChoice"></div>
</td>
</tr>
<tr>
<td id="tdChoice">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Choice" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Choice')}" />
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Choice" ControlMode="New" />
</td>
</tr>
</table>
</td>
</tr>
Replace below code also.
Old code:
--------------------
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
<sharepoint:delegatecontrol runat="server" controlid="FormCustomRedirectControl" allowmultiplecontrols="true" />
<sharepoint:uiversionedcontent uiversion="4" runat="server">
<contenttemplate>
<sharepoint:cssregistration name="forms.css" runat="server" />
</contenttemplate>
</sharepoint:uiversionedcontent>
</asp:content>
Updated code:
--------------------
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
<sharepoint:delegatecontrol runat="server" controlid="FormCustomRedirectControl" allowmultiplecontrols="true" />
<sharepoint:uiversionedcontent uiversion="4" runat="server">
<contenttemplate>
<sharepoint:cssregistration name="forms.css" runat="server" />
</contenttemplate>
</sharepoint:uiversionedcontent>
<!--<link
rel="stylesheet"
href="/sites/dev/SiteAssets/Chosen/chosen.min.css"/>
<script type="text/javascript"
src="/sites/dev/SiteAssets/Chosen/jquery.min.js"></script>
<script type="text/javascript"
src="/sites/dev/SiteAssets/Chosen/chosen.jquery.min.js"></script>
<script type="text/javascript"
src="/sites/dev/SiteAssets/Chosen/chosen.proto.min.js"></script>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.proto.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
buildChosen();
$("#selectChoice").chosen().change(function () {
var selectedItemsChoice = $(this).val();
$("#tdChoice td").each(function (index) {
$(this).find(':checkbox').prop('checked', false);
for (var i = 0, len =
selectedItemsChoice.length; i < len; i++) {
if ($(this).text().trim() ==
selectedItemsChoice[i].trim()) {
$(this).find(':checkbox').prop('checked', true);
}
}
});
});
$("#tdChoice").hide();
});
function buildChosen() {
htmlChoice = '<select
class="Choice" multiple="multiple"
id="selectChoice">';
$("#tdChoice
td").each(function (index) {
if ($(this).find(':checkbox').prop('checked')) {
htmlChoice += "<option value='" + $(this).text() + "'
selected='selected'>" + $(this).text() + "</option>";
} else {
htmlChoice += "<option value='" + $(this).text() + "'>" + $(this).text() + "</option>";
}
});
$('#divChoice').html(htmlChoice);
$('#selectChoice').chosen({ width: "400px" });
}
</script>
</asp:content>
Step5:
Test the application. Click on Create new item from ribbon in list.
before update code:
--------------------
After update code:
--------------------
Hi there, thank you for your post! I was wondering whether this is possible for Look Up fields?
ReplyDeleteThank you :)
JC