Saturday, September 23, 2017

jQuery Chosen Plugin in SharePoint

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.

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:
--------------------

1 comment:

  1. Hi there, thank you for your post! I was wondering whether this is possible for Look Up fields?
    Thank you :)

    JC

    ReplyDelete