CODEWITHSUNDEEP
javascriptrazorasp.net-coredatatables
CBreeze
CBreeze

Reputation: 2973

How to conditionally draw DataTables columns in Razor pages

Currently we are doing this to draw the columns for a server side DataTable for 2 different users, we were able to hide the column headers using razor code to only draw them when the user is an admin or group admin. However when it comes to drawing the data we are having an issue with the following:

function getTableColumns() {
            var allowedToDelete = @(User.IsInRole("SysAdmin") || GroupManager.IsUserGroupAdmin(Model.GroupId, User.FindFirst(ClaimTypes.NameIdentifier).Value) ? "true" : "false");

            if (allowedToDelete) {
                return [{ "defaultContent": "" },
                { "data": "deadlineDate", "name": "DeadlineDate" },
                { "data": "priority", "name": "Priority" },
                { "data": "jobNumber", "name": "JobNumber" },
                { "data": "project", "name": "Project" },
                { "data": "description", "name": "Description" },
                { "data": "reference", "name": "Reference" },
                { "data": "subReference", "name": "SubReference" },
                { "data": "employee", "name": "Employee" },
                { "data": "allocatedTo", "name": "AllocatedTo" },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Archive Item' class='fa fa-archive table-icon-view' onclick='archiveJob(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Delete' class='fa fa-trash table-icon-delete' onclick='showDeleteModal(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                { "data": "issueDate" },
                { "data": "startDate" },
                { "data": "createdBy" },
                { "data": "createdDate" },
                { "data": "notes" }];
            } else {
                return [{ "defaultContent": "" },
                { "data": "deadlineDate", "name": "DeadlineDate" },
                { "data": "priority", "name": "Priority" },
                { "data": "jobNumber", "name": "JobNumber" },
                { "data": "project", "name": "Project" },
                { "data": "description", "name": "Description" },
                { "data": "reference", "name": "Reference" },
                { "data": "subReference", "name": "SubReference" },
                { "data": "employee", "name": "Employee" },
                { "data": "allocatedTo", "name": "AllocatedTo" },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                { "data": "issueDate" },
                { "data": "startDate" },
                { "data": "createdBy" },
                { "data": "createdDate" },
                { "data": "notes" }];
            }
        }

Is there a way to optimise this so that we don't have to repeat the code just to hide 2 icon links?

Upvotes: 1

Views: 514

Answers (2)

SpruceMoose
SpruceMoose

Reputation: 10320

You could use the columns.visible option to display/hide the column accordingly.

Additionally, it might be worth looking at Reusable renderers to avoid some of the repetition with the rendering functions.

Creating such a rendering function may look like this:

$.fn.dataTable.render.icon = function ( title, icon, func) {
    return function ( data, type, row ) {
        return "<i title ='" + title + "' class='fa " + icon + "' onclick='" + func + "(\""
            + row.groupId + "\",\"" + row.id + "\")'></i>";
    }
};

You could then use this as follows:

{
    //Column visibility
    visible: allowedToDelete,
    //Reusable renderer
    render: $.fn.dataTable.render.icon('Archive Item', 'fa-archive table-icon-view', 'archiveJob')
},
{
    visible: allowedToDelete,
    render: $.fn.dataTable.render.icon('Edit', 'fa-pencil table-icon-edit', 'editJob')
},
{
    visible: allowedToDelete,
    render: $.fn.dataTable.render.icon('Delete', 'fa-trash table-icon-delete', 'showDeleteModal')
},

Upvotes: 1

Levi Rocha
Levi Rocha

Reputation: 88

You could have the default array be defined in a variable, and push the 2 icon links into it inside the if, before returning:

function getTableColumns() {
        var allowedToDelete = @(User.IsInRole("SysAdmin") || GroupManager.IsUserGroupAdmin(Model.GroupId, User.FindFirst(ClaimTypes.NameIdentifier).Value) ? "true" : "false");

        var dataArray = [{ "defaultContent": "" },
            { "data": "deadlineDate", "name": "DeadlineDate" },
            { "data": "priority", "name": "Priority" },
            { "data": "jobNumber", "name": "JobNumber" },
            { "data": "project", "name": "Project" },
            { "data": "description", "name": "Description" },
            { "data": "reference", "name": "Reference" },
            { "data": "subReference", "name": "SubReference" },
            { "data": "employee", "name": "Employee" },
            { "data": "allocatedTo", "name": "AllocatedTo" },
            {
                "render": function (data, type, full, meta) {
                    return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                        + full.groupId + "\",\"" + full.id + "\")'></i>";
                }
            },
            { "data": "issueDate" },
            { "data": "startDate" },
            { "data": "createdBy" },
            { "data": "createdDate" },
            { "data": "notes" }];

        if (allowedToDelete) {
            return dataArray.Concat([{
                "render": function (data, type, full, meta) {
                    return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                        + full.groupId + "\",\"" + full.id + "\")'></i>";
                }
            },
            {
                "render": function (data, type, full, meta) {
                    return "<i title ='Delete' class='fa fa-trash table-icon-delete' onclick='showDeleteModal(\""
                        + full.groupId + "\",\"" + full.id + "\")'></i>";
                }
            }]).ToArray();
        } else {
            return dataArray;
        }
    }

Upvotes: 1

Related Questions