how i can hide a specific asp.net WebGridColumn/s using hidden-phone Bootstrap class

Question

I am working on an asp.net mvc-4 web application. and inside my view i have the following WebGrid inside my Razor view:-

@{
var gridcolumns = new List<WebGridColumn>();

                gridcolumns.Add(new WebGridColumn()
               {
                  ColumnName="OrderID",
                   Header = "",
                   Style="hidden-phone",
                   CanSort = false,
                   Format =

                @<text>

             @Html.ActionLink("Edit","Edit", "Order",new { id = item.OrderID },null)

                </text>
               });

//other columns goes here..
var grid = new WebGrid(
                canPage: true,
                rowsPerPage: Model.PageSize,
                canSort: true,
                ajaxUpdateContainerId: "grid");

                grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
                grid.Pager(WebGridPagerModes.All);

                @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
         fillEmptyRows: false,
         tableStyle: "table table-bordered table-hover",


         mode: WebGridPagerModes.All,
         columns: gridcolumns

         );


}

now i want to hide specif WebGridColumns on small devices. so i have defined the following inside the web grid as shown in the above code:-

Style="hidden-phone",

now this will hide the column content inside small devices (phones) , but still the column header will be shown. and i ended up having different number of headers compared to the body columns when i am viewing the WebGrid on small screens (phone).

so can anyone adivce how i can force the Style="hidden-phone", to apply to the column content and the column header. in other word to hide the specified column/s when i am viewing my WebGrid inside small sized screens ? as seems the WebGrid's Style property will NOT be applied to specified column header ?

which version of bootstrap are you using ? ,Can You post HTML generated by Your view? — joint_ops, May 23 '16 at 21:09
Did You tried to wrap the part of your code in div with "hiden-phone" class ? like so :
@your razor markup — joint_ops, May 23 '16 at 22:37

Lesmian · Answer 1 · 2016-05-27T07:05:25.410

2

The simplest solution would be to hide header at all by using:

displayHeader:false

This is the option of WebGrid object, but if you need it then the only solution would be to hide column header by cell number:

$(function () {
    $('#grid thead tr th:eq(0)').addClass('hidden-phone');
})

UPDATE

Ok, so lets assume that you add to column class hidden-phone like in your example then you can find corresponding header like that:

$(function () {
    $('#grid tbody tr:first td.hidden-phone').each(function(index, td){  
       $('#grid thead tr th:eq(' + index + ')').addClass('hidden-phone');
    });
})

Provided function will look through first row of a table and search for cells with class hidden-phone. Then for each cell it will add to it's corresponding header the same class.

UPDATE #2

If you use ajax paging and sorting then you need to slightly modify my example. Firstly move my js code to separate function:

function hideHeaders() {
    $('#grid tbody tr:first td.hidden-phone').each(function (index, td) {
        $('#grid thead tr th:eq(' + index + ')').addClass('hidden-phone');
    });
};

$(function () {
    hideHeaders();
})

Then pass that function name as a callback to ajax request:

var grid = new WebGrid(
    canPage: true,
    rowsPerPage: 1,
    canSort: true,
    ajaxUpdateContainerId: "grid",
    ajaxUpdateCallback: "hideHeaders");

Notice ajaxUpdateCallback: "hideHeaders" - its the line that let now WebGrid which function needs to be called after ajax request has been completed.

edited May 27 '16 at 07:05

answered May 24 '16 at 08:16

Lesmian

3,932
1
17
28

i have never though of this approach. but i am not sure if i can modify the script by defining the label instead of the the cell number. now webgrid will render the th as follow :- Address .So can i define the script to remove the which have the word Address inside it . as i have the same web grid rendered on many locations and the webgrid contain different number of headers.so removing based on cell number will not allow me to define a global script for the webgrids – John John May 24 '16 at 14:01
1

@johnG Ok, I've updated my answer. Hope it will bring you closer to solution that will fulfill your needs. – Lesmian May 24 '16 at 18:08
now i tried your script as follow:- $(function () { $("#grid tbody tr:first td.hidden-phone").each(function(index, td) { alert(1); $("#grid thead tr th:eq(' + index + )'").addClass("hidden-phone"); }); }) .. but it did not apply the hidden-phone class.. and i intentionally add an alter(1); but this alert run only one time.. and if i define the alert as follow alert(index) i will get content not defined,, so seems the script is not working the way you mentioned.. – John John May 25 '16 at 13:29
1

@johnG Try now, I've made a typo so there was missing a ' char in script. – Lesmian May 25 '16 at 13:43
now you script will work well , in respect to hidding the related only . but the problem i am facing is that the table which is generated by the web grid will not expand to occupy the hidden columns, so the webgrid will not have better user experience inside phone screens, since the hidden columns will be replaced by empty area only.. also i am facing another problem is that whenever i do an ajaxsort or ajax paging the hidden columns will appear again !!so i need to keep the script working – John John May 25 '16 at 14:51
i tried defining the script inside the following " $(document).on('click', 'a[data-swhglnk]', function () {" but still the script will not run after doing any ajax action (paging or sorting) – John John May 25 '16 at 14:52
@johnG Use option ajaxUpdateCallback on a WebGrid object. Just move my js code to separate function and provide that function name to ajaxUpdateCallback. Then it will automatically get called after update. – Lesmian May 27 '16 at 06:51

score -1 · Answer 2 · answered May 25 '16 at 07:26

-1

I have made one code snippet please check it.

I have disabled the full 3rd column of table.

I think it will help you.

Thanks

$(function () {
  debugger;
  $('#grid tr').each(function(){ 
    $(this).find('th:eq(2)').hide();
  $(this).find('td:eq(2)').hide();
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="grid">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
  </tr>
</table>

answered May 25 '16 at 07:26

Ajay Malhotra

798
4
16

ok thanks , but can i modify the script to run on the columns that have headers containg certain text , instead of replying on the column location.. currently the asp.net web grid will render the header as follow:- Address .. also inside your code it will always hide the realted columns while in my case i need to hide the columns only when the screen is too small, this can be done by adding the "hidden-phone" bootstrap class.. – John John May 25 '16 at 12:59
1

Ya we can do that. if you are asking column hide acording to screen resolution. it is possible and if you are asking according to header text column should hide , that is also possible. just tell me exact thing and I will make code according to that. let me know if you want – Ajay Malhotra May 26 '16 at 06:45
now i already explained what i want in my original question. what i want to do is to hide specific web-grid columns when viewing the web grid on small sized screens. now when i define the following bootstrap class inside the webgeid column "Style="hidden-phone"," it will hide the related columns inside the table body only, but the related headers will keep showing on small size screen. so on the other answer Lesiman provided a script which will dynamically apply the "hidden-phone" bootstrap class to the related table headers. – John John May 26 '16 at 12:58
so now i am able to hide the related columns from the table header and from the table body on small sized screens.. but now i am facing another problem is that the web grid did not expand to occupy the freed space ,, so what i actually did is that i hide the columns , on small size screens but the visible columns did not expand to occupy the freed space .. – John John May 26 '16 at 13:00

how i can hide a specific asp.net WebGridColumn/s using hidden-phone Bootstrap class

2 Answers2