How Can i hide Column Conditionally ?

maulikDave

Hi, My Datatable is as follows...

 Table = $("#tbl").DataTable({
            "destroy": true,
            "serverSide": true,
            "bRetrieve": true,
            "searching": false,
            "order": [1, "asc"],
            "pagingType": "simple",
            "ajax": {
                ...
                },
                "data": {
                ...
                }
            },
            columns: [
                {
                    "data": "id", "name": "Id", "title": "Select", "searchable": false, "orderable": false, "render": function (data, type,row) 
                    {
                         --- I wan to Hide This Column on a Condition in Which I am using other row's value. ---
                         i.e
                         if(row['OtherColumnData'] == true)
                         { 
                               Hide This Column   
                          }
                         else{ 
                               Show Some Data
                          }
                    }
                },
                 
               Other Columns

Thanks in Advance,
Maulik

kthorngren

There isn't an option to dynamically hide columns in the columns option. You can use the column().visible() API in initComplete to hide columns based on a condition.

Kevin

maulikDave

Thanks @kthorngren

kthorngren

Here is a simple example:
http://live.datatables.net/fakuqiva/1/edit

Toggle the myCondition value from 'true' to 'false' to see that the column is not hidden. Your requirements will dictate the actual condition to test for.

Kevin

maulikDave

Thank you So much,@kthorngren. you are a savior .
Maulik

rprahalad

This is the exact question even I have but how can I set the myCondition to the value of a column? Like, I tried this in the initComplete event.

var api = this.api();
var myCondition = (api.column(9).data() == "Yes");

I have tried value, text etc. I guess my question is, how can I access the column value while I am initializing the grid and every row is being painted?

I need to hide the Delete button if a particulat column has a value of 'Yes' on that row.

Thanks

kthorngren

I would use filter() for this. There is an example in the docs that should get you started. You can chain the count() API to see if the number of returned data elements is greater than 0 and hide the column then. It might look something like this:

var myCondition = api
    .column( 9 )
    .data()
    .filter( function ( value, index ) {
        return value === 'Yes' ? true : false;
    } )
    .count();

Kevin

rprahalad

Thanks much, Kevin! Appreciate it. Will try it out now.

rprahalad

@Kevin, after I tried the code out, I quickly realized that initComplete is probably the wrong event for me. Basically, I have to hide/show that Delete button per row. Just want to make sure I head out in the right direction and so, I have this quick question.

Like in C# there is a "OnDataBinding" and "OnDataBound" events. InitComplete is OnDataBound. But I was looking for "OnDataBinding" event.

Like, what event fires 'as' the data is 'being' bound and 'as' the row gets rendered? I did look at the list of events and just got a bit confused.

Or is it like I use the above filter in initComplete event and then loop through all rows that have that other column value of "Yes" that are returned by the Filter and hide the delete button column only for those rows?

Was just trying to avoid the loop if I can, as there could be potentially thousands of rows.

Thanks again.

rprahalad

Oh wow. I found this thread. I shall try it out now. I appreciate your response, Kevin!

https://stackoverflow.com/questions/39569722/hidding-datatable-column-and-column-data-dynamically-in-jquery

rprahalad

This did the trick for me. Just in case someone needs to refer to this. My requirement was making the content of a particular cell (that had the Delete link) empty if a value of another column was "Yes". If the value was "No", I had to show the Delete link. Here's how I did the "onDataBinding".

 "columns": [
                        { "data": "Id", "width": "150px" },
                        { "data": "Address1", "width": "150px" },
                        { "data": "Address2", "width": "150px" },
                        { "data": "Address3", "width": "150px" },
                        { "data": "City", "width": "150px" },
                        { "data": "State", "width": "150px" },
                        { "data": "Zip", "width": "150px" },
                        { "data": "Zip4", "width": "150px" },                      
                        { "data": "isDeletedFormatted", "width": "150px" },

                        {
                            "data": "ID", "width": "20px", "orderable": false, "render": function (data) {
                                return '<a class="actionLink" href="/address/save/' + data + '">Edit</a>';
                            }
                        },


                        {
                            "data": "ID", "width": "20px", "orderable": false, "render": function (data, type, row) {
                                if (row.isDeletedFormatted == "Yes") //Check column value "Yes"
                                    return ""; //Empty cell content
                                else
                                    return '<a class="actionLink" href="/address/delete/' + data + '">Delete</a>';                                   
                            }
                        },
                    ],