Conditionally hide individual column and header

braden87

Within my view I am checking to see if the user has certain roles attached to their username. Roles like, edit, remove which return a true or false through an HTML helper class. If it returns true then it should render the column with a button on it and a header. If it's false it shouldn't render either. I can only get it to not render the actual column but the header remains and I get the infamous Uncaught TypeError: Cannot read property 'style' of undefined.

So my question is, how can I hide the column and header of that individual column?

var edit =  Html.UserHasClaim("Log/EditLog");
var remove =  Html.UserHasClaim("Log/RemoveLog");

<table id="LogTable" class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Sample Type</th>
            <th>Lot Number</th>
            <th>Program</th>
            <th>QC</th>
            <th>Comments</th>
            <th class="date-col">Date Assigned</th>
            <th class="date-col">Checked In Date</th>
            <th class="no-sort">Discarded </th>
            <th class="no-sort" >Edit</th>
            <th class="no-sort" >Remove</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
        $(document).ready(function () {
            $(LogTable).DataTable({
                serverSide: true,
                ajax: {
                    url: "/Log/GetAllLogData",
                    type: "POST",
                    dataType: "json"
                },
                columns: [
                    { "data": "Id", "name": "Id" },
                    { "data": "SampleType", "name": "SampleType" },
                    { "data": "Value", "name": "Value" },
                    { "data": "Program", "name": "Program" },
                    { "data": "QC", "name": "QC" },
                    { "data": "Comments", "name": "Comments" },
                    { "data": "DateAssigned", name: "Date Assigned", type: 'datetime', format: 'MM/dd/yyyy' },
                    { "data": "CheckedInDate", "name": "CheckedInDate" },
                    { "data": "Discarded", "name": "Discarded", "render": function (data, type, row) {
                        if (data === true) {
                            return '<i class="glyphicon glyphicon-ok"></i>';
                        }
                        else {
                            return '';
                        }
                    }
                    },
                    {"render": function (data, type, full, meta) {
                        var logId = full.Id;
                        buttonId = "button_" + full.Id;
                        return'<form action="/Log/LogModal?Id=' + logId + '" data-ajax="true" 
data-ajax-failure="displayFailure" 
data-ajax-loading="#tableLoader" 
data-ajax-mode="replace"
 data-ajax-success="showModal(LogModal)" 
data-ajax-update="#LogContent" id="form_' + buttonId + '" 
method="post" autocomplete="off">@Html.AntiForgeryToken()
<button class="link-button text-info" type="submit"> 
<span class="glyphicon glyphicon-pencil"></span>
</button>
</form>'     
                    }
                    },
                    {
                        "render": function (data, type, full, meta) {
                           
                        var logId = full.Id;
                        buttonId = "button_" + full.Id;
                        return '<form action="/Log/RemoveLog?Id=' + logId + '" data-ajax="true" 
data-ajax-confirm="Deletion of ID ' + logId + ' is permanent. Continue?" 
data-ajax-failure="displayFailure" 
data-ajax-loading="#tableLoader" 
data-ajax-mode="replace"
data-ajax-update="#LogsContent" id="form_' + buttonId + '"
method="post" autocomplete="off">@Html.AntiForgeryToken()
<button class="link-button text-danger" type="submit">
<span class="glyphicon glyphicon-trash"></span>
</button>
</form>'
                }
                }
                ],
              
                processing: true,
                dom: "ftir",
                scrollY: 600,
                scroller: { displayBuffer: 50 },
                order: [[0, 'desc']],
                pageLength: 1000,
                columnDefs: [{
                    targets: 'no-sort',
                    orderable: false
                }]
            });
        });
    </script>

colin

Hi @braden87 ,

You could use initComplete, and call column().visible() to hide the column.

One problem would be that if the user is tech savvy, they could still post the command to the server to implement the edit or deletion, so it would be best to have some server-side validation too. Editor provides examples for this.

Cheers,

Colin

braden87

I added this to the javascript ...

initComplete: function(settings, json){
                    var edit = '@edit';
                    var remove = '@remove';

                    if(edit === 'False'){
                        table.column( 9 ).visible(false);
                    }
                    if(remove === 'False'){
                        table.column( 10 ).visible(false);
                    }
                }

It actually removes those columns entirely from the DOM. Thankfully I work with people that aren't very tech savvy.