0

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!

0

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.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.