How can i bind an array into a comma seperated list in jqgrid by using custom formatting

Question

The below is is the method to display the team member grid.

 function CreateRecruiterGrid() {
    var searchKeyWord = $("#txtAdKeyWords").val();
    var foreName = $("#txtForeName").val();
    var surName = $("#txtSurname").val();
    var email = $("#txtEmail").val();
    var orgId = $("#ddlRoles").val();
    var vUrl = '@Url.Action("List","Team")';
    var vColumnHeaderNames = ["RecruiterId", "EmailVerified", "FORE NAME", "SUR NAME", "EMAIL", "ROLES", "ACTIONS"];
    jQuery(function ($) {
        var gridSelector = "#grid-table";
        var pagerSelector = "#grid-pager";
        jQuery(gridSelector).jqGrid({
            url: vUrl,
            datatype: 'json',
            type: 'GET',
            height: "auto",
            colNames: vColumnHeaderNames,
            colModel: [
                { name: 'RecruiterId', index: 'RecruiterId', key: true, hidden: true },
                { name: 'EmailVerified', index: 'EmailVerified', hidden: true },
                { name: 'Forename', index: 'Forename', width: 180, align: "left" },
                { name: 'Surname', index: 'Surname', width: 200, align: "left" },
                { name: 'Email', index: 'Email', width: 200, align: "left" },
                { name: 'Role', index: 'Role', width: 200, align: "center" },
                { name: 'Action', index: 'Action', width: 140, align: 'center', editable: false, sortable: false, search: false }
            ],
            viewrecords: true,
            viewpages: true,
            gridComplete: function () {
                var ids = $('#grid-table').jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var recId = ids[i];
                    var rowData = $('#grid-table').jqGrid('getRowData', recId);
                    var rowHtml = "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'>";
                    rowHtml += "<a onclick='deleteTeamMember(" + recId + ")' style='cursor:pointer;'>Delete</a>";
                    $('#grid-table').jqGrid('setRowData', ids[i], { Action: rowHtml });
                };
            },
            jsonReader: {
                root: 'RecruiterData',
                id: 'RecruiterId',
                records: 'Records',
                rows: 'PageSize',
                page: 'PageIndex',
                total: 'TotalPages',
                repeatitems: false
            },
            rowNum: 100,
            rowList: [2, 10, 50, 100],
            pager: pagerSelector,
            altRows: true,
            multiselect: true,
            multiboxonly: true,
            loadonce: false,
            beforeRequest: function () {
                var p = this.p, pd = p.postData;
                p.url = '@Url.Action("List", "XpressJobsTeam")'
                    + '?pageNumber=' + pd.page
                    + '&recordsPerPage=' + pd.rows
                    + '&keyWord=' + searchKeyWord
                    + '&sortVal='
                    + '&forename=' + foreName
                    + '&surname=' + surName
                    + '&email=' + email
                    + '&orgId=' + orgId;
                p.postData = {};
                $("#load_grid-table").text("Retrieving Team Members...");
            },
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    styleCheckbox(table);
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
                $("#recruiterGridContainer div").each(function () {
                    if (!$(this).hasClass("ui-pg-div") && !$(this).hasClass("loading")) {
                        if ($(this).hasClass("ui-jqgrid-hbox")) {
                            $(this).attr('style', 'width:100%;padding-right:0;');
                        }
                        else {
                            $(this).attr('style', 'width:100%;');
                        }
                    }
                });
                $("#recruiterGridContainer table").each(function () {
                    if (!$(this).hasClass("navtable")) {
                        if ($(this).hasClass("ui-pg-table")) {
                            $("#grid-pager_left").attr('style', 'width:35%');
                            $(this).attr('style', 'width:100%;margin-top:5px;');
                        } else {
                            $(this).attr('style', 'width:100%');
                        }
                    }
                });
            },
            caption: "team Members",
            autowidth: true
        });

Currently the grid is showing up with wmpty values for the roles column.

The details of the roles of each person is receiving to the controller in my implemented method.But its not displayed in the grid.The Roles are received as an array.(As one member can have one or more roles).

As I understand the issue is with data binding.I want to know how can I bind the roles array in the Jquery method above. I have tried several ways but no success.

I am new to Jquery and any help is appreciated.

I refereed http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter and changed the line below

{ name: 'Role', index: 'Role', width: 200, align: "center", formatter:currencyFmatter },

and I am stucked at implementing the function.What I have tried is as below.Buut it doesnt showup the roles

 function roleFormatter(cellvalue, options, rowObject) {
        let selectedRoles = "";
        for (var role in cellvalue)
        {
            selectedRoles += role.RecruiterRole;
        }
        return selectedRoles;
    }

I want to display the roles of a person under roles column by comma seperated I am new to Jquery and any help is appreciated.

Answer 1

If your cellvalue is array then your formatter can look like this

function roleFormatter(cellvalue, options, rowObject) {
     return cellvalue.join(", ");
}