locked
Is there any best way to hide the column of js datatable according to the user access right to view the column RRS feed

  • Question

  • User-1355965324 posted

    Hi 

    In my code given below I am hiding  the column using the column position  . Some  column should be hidden for some users according to the user right . It is working fine now But I am looking for some expert advise ,  to find is there any best option to hide the column by avoiding the hard coding the column number  Please can you advise me with suggested code it would be very appreciated. I am hiding the column using column number in javascript section .

    <tr id="@i">
                                                        <td>@slNo<input asp-for="@Model.attendanceLogList[i].LogID" type="hidden" /><input asp-for="@Model.attendanceLogList[i].IsProtected" type="hidden" /></td>
                                                        <td>@Model.attendanceLogList[i].EmployeeName<input asp-for="@Model.attendanceLogList[i].EmployeeID" type="hidden" /><input asp-for="@Model.attendanceLogList[i].EmployeeName" type="hidden" /></td>
                                                        <td>@Model.attendanceLogList[i].InTime<input asp-for="@Model.attendanceLogList[i].DepotNo" type="hidden" /><input asp-for="@Model.attendanceLogList[i].InTime" type="hidden" /></td>
                                                        <td>@Model.attendanceLogList[i].OutTime<input asp-for="@Model.attendanceLogList[i].DepartmentID" type="hidden" /><input asp-for="@Model.attendanceLogList[i].OutTime" type="hidden" /></td>
                                                        <td>@Model.attendanceLogList[i].BreakTime<input asp-for="@Model.attendanceLogList[i].BreakTime" type="hidden" /></td>
                                                        <td><input asp-for="@Model.attendanceLogList[i].NetHrs" type="text" class="borderless-text" /></td>
                                                        @*
                                                            <td><input asp-for="@Model.attendanceLogList[i].ClockIn" type="text" class="borderless-text" /></td>
                                                            <td><input asp-for="@Model.attendanceLogList[i].ClockOut" type="text" class="borderless-text" /></td>
                                                        *@
                                                        @*@if (@ViewBag.IsClockinColumnVisible == 1)
                                                            {
                                                            <td>@Model.attendanceLogList[i].ClockedIn<input asp-for="@Model.attendanceLogList[i].ClockedIn" type="hidden" /></td>
                                                            <td>@Model.attendanceLogList[i].ClockedOut<input asp-for="@Model.attendanceLogList[i].ClockedOut" type="hidden" /></td>
    
                                                            }
                                                            else
                                                            {
                                                            <td class="hidden">@Model.attendanceLogList[i].ClockedIn<input asp-for="@Model.attendanceLogList[i].ClockedIn" type="hidden" /></td>
                                                            <td class="hidden">@Model.attendanceLogList[i].ClockedOut<input asp-for="@Model.attendanceLogList[i].ClockedOut" type="hidden" /></td>
    
                                                            }*@
    
                                                        <td>@Model.attendanceLogList[i].ClockedIn<input asp-for="@Model.attendanceLogList[i].ClockedIn" type="hidden" /></td>
                                                        <td>@Model.attendanceLogList[i].ClockedOut<input asp-for="@Model.attendanceLogList[i].ClockedOut" type="hidden" /></td>
                                                        @if (@Model.attendanceLogList[i].IsClockedIn)
                                                        {
                                                            <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="IsClockedIn" /> </td>
    
                                                        }
                                                        else
                                                        {
                                                            <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="IsClockedIn" /> </td>
    
                                                        }
                                                        @if (@Model.attendanceLogList[i].IsClockedOut)
                                                        {
                                                            <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="IsClockedOut" /> </td>
    
                                                        }
                                                        else
                                                        {
                                                            <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="IsClockedOut" /> </td>
    
                                                        }
    
                                                        <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsNormalAttendance" data-tag="NormalHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsNormalAttendance" /> </td>
                                                        <td><a href="#" data-pk="NormalHrs">@Model.attendanceLogList[i].NormalHrs</a><input asp-for="@Model.attendanceLogList[i].NormalHrs" type="hidden" class="bros" /></td>
                                                        <td><input asp-for="@Model.attendanceLogList[i].IsFlexibleDayOff" type="hidden" /><input type="checkbox" value="true" disabled asp-for="@Model.attendanceLogList[i].IsDayOffMarked" data-tag="DayOffHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsDayOffMarked" /> </td>
                                                        <td><div class="disabled">@Model.attendanceLogList[i].DayOffHrs</div><input asp-for="@Model.attendanceLogList[i].DayOffHrs" type="hidden" class="bros" /></td>
                                                        <td class="hidden"><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsFuneralDayOff" data-tag="FuneralHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsFuneralDayOff" /> </td>
                                                        <td class="hidden"><a href="#" data-pk="FuneralHrs">@Model.attendanceLogList[i].FuneralHrs</a><input asp-for="@Model.attendanceLogList[i].FuneralHrs" type="hidden" class="bros" /></td>
                                                        <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsSickMarked" data-tag="SickHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsSickMarked" /></td>
                                                        <td><a href="#" data-pk="SickHrs">@Model.attendanceLogList[i].SickHrs</a><input asp-for="@Model.attendanceLogList[i].SickHrs" type="hidden" class="bros" /></td>
                                                        <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" data-tag="HolidayHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" /> </td>
                                                        <td><a href="#" data-pk="HolidayHrs">@Model.attendanceLogList[i].HolidayHrs</a><input asp-for="@Model.attendanceLogList[i].HolidayHrs" type="hidden" class="bros" /></td>
                                                        <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsMaternityLeave" data-tag="MaternityHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsMaternityLeave" /> </td>
                                                        <td><a href="#" data-pk="MaternityHrs">@Model.attendanceLogList[i].MaternityHrs</a><input asp-for="@Model.attendanceLogList[i].MaternityHrs" type="hidden" class="bros" /></td>
                                                        <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsTimeOff" data-tag="TimeOffHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsTimeOff" /> </td>
                                                        <td><a href="#" data-pk="TimeOffHrs">@Model.attendanceLogList[i].TimeOffHrs</a><input asp-for="@Model.attendanceLogList[i].TimeOffHrs" type="hidden" class="bros" /></td>
                                                        <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsDeductionMarked" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsDeductionMarked" /> </td>
                                                        @*@if (@ViewBag.IsExtraTimeVisible == 1)
                                                            {
                                                            <td><a href="#" data-pk="ExtraTimeHrs">@Model.attendanceLogList[i].ExtraTimeHrs</a><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" type="hidden" class="bros" /></td>
    
    
                                                            }
                                                            else
                                                            {
                                                            <td class="hidden"><a href="#" data-pk="ExtraTimeHrs">@Model.attendanceLogList[i].ExtraTimeHrs</a><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" type="hidden" class="bros" /></td>
    
                                                            }*@
    
    
    
                                                        <td><a href="#" data-pk="ExtraTimeHrs">@Model.attendanceLogList[i].ExtraTimeHrs</a><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" type="hidden" class="bros" /></td>
                                                        <td class="text"><a href="#" data-pk="Remark">@Model.attendanceLogList[i].Remark</a><input asp-for="@Model.attendanceLogList[i].Remark" type="hidden" /></td>
                                                    </tr>
    
    
    <script type="text/javascript">
        $(document).ready(function () {
     if ('@ViewBag.IsClockinColumnVisible' == 0) {
            table.column(6).visible(false);
            table.column(7).visible(false);
            clockdeduct = 2;
        }
        if ('@ViewBag.isClockInTickedVisible' == 0) {
            table.column(8).visible(false);
            table.column(9).visible(false);
            //clockdeduct = clockdeduct + 1;
            //table.column(9 - clockdeduct).visible(false);
    
        }
         if ('@ViewBag.IsExtraTimeVisible' == 0)
           {
              table.column(25).visible(false);
        }
    }
    </script>
    

    With Many Thanks

    Pol

    Thursday, October 17, 2019 6:15 AM

Answers

  • User665608656 posted

    Hi polachan,

    Can we use classname for this datatable because the data is not coming from json file

    Yes, you can add a classname with the same name to the <th> tag of the corresponding column, and then hide the column in the same way.

     <thead class="thead-light">
                                        <tr>
                                            <th>
                                                Date
                                            </th>
                                            <th>
                                                Depot Name
                                            </th>
                                            <th>
                                                Employee Name
                                            </th>
    					
        					 <th class=”ClockedIn”>Clocked In</th>
                                             <th class=”ClockedOut”> Clocked Out </th>
    					 
                                            <th>
                                                N. Attendance
                                            </th>
                                            <th>
                                                Day Off
                                            </th>
    
                                            <th>
                                                Sick
                                            </th>
                                            <th>
                                                Holiday
                                            </th>
                                            <th>
                                                Maternity
                                            </th>
                                            <th>
                                                Time Off
                                            </th>
                                            <th>
                                                Time Off Hrs
                                            </th>
                                            <th>
                                                Deducted
                                            </th>
                                            <th>
                                                Emp Hrs
                                            </th>
    					
    					<th class="ExtraHrs">
    				         Extra Hrs
                                            </th>
    					
                                            
                                            <th>
                                                Remark
                                            </th>
                                            <th>
                                                SortDate
                                            </th>
                                        </tr>
                                    </thead>
     if(!isClockinVisibile )
            {
             table.column('.ClockedIn').visible(false); 
              table.column('.ClockedOut').visible(false); 
            }
            if(!isExtraHrsVisible) 
            { 
             table.column('.ExtraHrs').visible(false);
            }

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 18, 2019 1:50 AM

All replies

  • User665608656 posted

    Hi polachan,

    After many tests and repeated queries, I found that the cases of hidden columns given by the official website of jQuery datatable are all hidden in the way of index, so there is no better way to achieve your needs.

    In your previous post, I suggest that you use classname to control the hiding of columns. You can add the same classname as column name for each column, so that you can find the corresponding columns to hide or display.

    Here is the reply in your previous post: https://forums.asp.net/post/6281420.aspx

    Best Regards,

    YongQing

    Thursday, October 17, 2019 9:53 AM
  • User-1355965324 posted

    Can we use classname for this datatable because the data is not coming from json file

    <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="IsClockedOut" /> </td>

    Thursday, October 17, 2019 10:04 AM
  • User665608656 posted

    Hi polachan,

    Can we use classname for this datatable because the data is not coming from json file

    Yes, you can add a classname with the same name to the <th> tag of the corresponding column, and then hide the column in the same way.

     <thead class="thead-light">
                                        <tr>
                                            <th>
                                                Date
                                            </th>
                                            <th>
                                                Depot Name
                                            </th>
                                            <th>
                                                Employee Name
                                            </th>
    					
        					 <th class=”ClockedIn”>Clocked In</th>
                                             <th class=”ClockedOut”> Clocked Out </th>
    					 
                                            <th>
                                                N. Attendance
                                            </th>
                                            <th>
                                                Day Off
                                            </th>
    
                                            <th>
                                                Sick
                                            </th>
                                            <th>
                                                Holiday
                                            </th>
                                            <th>
                                                Maternity
                                            </th>
                                            <th>
                                                Time Off
                                            </th>
                                            <th>
                                                Time Off Hrs
                                            </th>
                                            <th>
                                                Deducted
                                            </th>
                                            <th>
                                                Emp Hrs
                                            </th>
    					
    					<th class="ExtraHrs">
    				         Extra Hrs
                                            </th>
    					
                                            
                                            <th>
                                                Remark
                                            </th>
                                            <th>
                                                SortDate
                                            </th>
                                        </tr>
                                    </thead>
     if(!isClockinVisibile )
            {
             table.column('.ClockedIn').visible(false); 
              table.column('.ClockedOut').visible(false); 
            }
            if(!isExtraHrsVisible) 
            { 
             table.column('.ExtraHrs').visible(false);
            }

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 18, 2019 1:50 AM