Use JS Link to Override Multi-Selector Field Rendering

Question

I am working in SharePoint 2016 on-premise. I have a Lookup column that allows multiple values. It renders as the usual SharePoint multi-selector. I'd like to switch the rendering so it appears as a series of checkboxes, same as a Choice column when multiple values are allowed. Has anyone done this with JSLink?

Thanks in advance!

Answer 1

An alternate to this could be a multi select dropdown querying the looked up list instead of having a lookup column.

You could refer below code to bind dropdown (multiselect) from the list:

function bindDropDownlist(ListName, ddlID, Column, ColumnID) {

        //initialize select2() dropdown 
        $("#ddlIssueType").select2();
        $("#ddlStoreNo").select2();
        $("#ddlPerformingDepartment").select2();
        $("#ddlProject").select2();
        $("#ddlCriticality").select2();



        var context = new SP.ClientContext();
        var web = context.get_web(); //Get the Web
        var list = web.get_lists().getByTitle(ListName); //Get the List
        var camlquery = "";
        var spQuery = new SP.CamlQuery();
        spQuery.set_viewXml(camlquery);
        var items = list.getItems(spQuery);
        context.load(list); //Retrieves the properties of a client object from the server.
        context.load(items);
        context.executeQueryAsync(
        Function.createDelegate(this, function () {
            var enumerator = items.getEnumerator();
                if(ListName=="ProjectList")
                {             
                    $("#" + ddlID).append($("<option></option>").val('0').html('00-N/A'));
                }
                else if(ListName=="Department")
                {   
                     $("#ddlPerformingDepartment").append($("<option></option>").val('0').html(pDepartment));    
                    //$("#txtpDepartmentNew").val(pDepartment);
                }
                else
                {             
                    $("#" + ddlID).append($("<option></option>").val('0').html('Select'));
                }
            while (enumerator.moveNext()) {
                var currentListItem = enumerator.get_current();
                if(ListName=="Store")
                { 
                    var ColumnList = Column.split(',');
                    $("#" + ddlID).append($("<option></option>").val(currentListItem.get_item(ColumnID)).html(currentListItem.get_item(ColumnList[0]) + '-' + currentListItem.get_item(ColumnList[1])));


                }
                else if(ListName=="ProjectList")
                { 
                    var ColumnList = Column.split(',');
                    $("#" + ddlID).append($("<option></option>").val(currentListItem.get_item(ColumnID)).html(currentListItem.get_item(ColumnList[0]) + '-' + currentListItem.get_item(ColumnList[1])));
                }
                else
                {
                    $("#" + ddlID).append($("<option></option>").val(currentListItem.get_item(ColumnID)).html(currentListItem.get_item(Column)));       
                }
            }


        }),
        Function.createDelegate(this, function () {
            console.log("Error:" + arguments[1].get_message())
        })
        );
    }

Note

• Please include select2 js and css libraries reference.