Show or Hide MVC WebGrid Column with Jquery

Question

I have a MVC Webgrid with columns that I want to Hide or Show dynamically based on a javascript function after the grid is rendered.

So after the WebGrid is displayed I want to call a javascript function and pass in a ColumnName to Show or hide. Is this possible?

Thanks,

This is how my grid is setup:

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

        gridColumns.Add(grid.Column("Id", "Test ID"));
        gridColumns.Add(grid.Column("Description", "Test Description"));
        gridColumns.Add(grid.Column("ProjectDate", "Test Date", format: @<text> <span>@item.ProjectDate.ToString("d/M/yyyy")</span></text>));

    }
<div id="divWebGrid" class="row">
                @grid.GetHtml(
                    fillEmptyRows: false,
                    tableStyle: "webgrid",
                    alternatingRowStyle: "webgrid-alternating-row",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    selectedRowStyle: "webgrid-selected-row",
                    rowStyle: "webgrid-row-style",
                    mode: WebGridPagerModes.All,
                    columns: grid.Columns(gridColumns.ToArray())
                    )
            </div>

And this would be my Javascript code:

function ToggleColumn(columnName)
    {
        //Some Code to Show or Hide the Column in the WebGrid based on the columnName parameter.
    }

Is this possible?

Here is the rendered code of my grid:

<table class="webgrid" data-swhgajax="true" data-swhgcontainer="divWebGrid" data-swhgcallback="">
    <thead>
        <tr class="webgrid-header">
            <th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Id&amp;gridItemsortdir=ASC">Test ID</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Description&amp;gridItemsortdir=ASC">Test Description</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=ProjectDate&amp;gridItemsortdir=ASC">Test Date</a>            </th>
        </tr>
    </thead>
    <tfoot>
        <tr  class="webgrid-footer">
            <td colspan="3">1 <a data-swhglnk="true" href="/Home/Index?gridItempage=2">2</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">3</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=2">&gt;</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">&gt;&gt;</a></td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="webgrid-row-style">
            <td>1</td>
            <td>test 1</td>
            <td> <span>22/7/2016</span></td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td>2</td>
            <td>test 2</td>
            <td> <span>22/7/2016</span></td>
        </tr>
        <tr class="webgrid-row-style">
            <td>3</td>
            <td>test 3</td>
            <td> <span>22/7/2016</span></td>
        </tr>
    </tbody>
    </table>

**Each checkbox has an Id that is the same as a column in the grid.** . Don't keep duplicate id's. There is other ways to associate your checkbox'es to grid columns , like html 5 data attributes. — Shyju, Jul 22 '16 at 19:13
The Id of the controls are not the same. Sorry for the misunderstanding. The Checkbox is tied to an object from the Model and has an attribute called Id that is the same as the attribute Id for the column in the WebGrid. — Ben, Jul 22 '16 at 19:16
Basically i want to be able to pass an Id into a function and have the function hide or show a webgrid column that has that Id as its ColumnName. — Ben, Jul 22 '16 at 19:17
Can you post the rendered output of the webgrid in a js bin ? — Shyju, Jul 22 '16 at 19:17
Please see my edit. I think i would be passing in a string that would correlate with the ColumnName and not an actual id. So i would pass "Description" to the function and it would find the Column in the WebGrid with a ColumnName of "Description" and hide or show it. — Ben, Jul 22 '16 at 19:23
I am going to revise my question. Regardless of the checkboxes I am wondering if there is a way to Hide or Show Columns in a WebGrid after is is already rendered with a Javascript function based on a ColumnName. — Ben, Jul 22 '16 at 19:42
not easily, imo. That applies to any HTML table. They're arranged in rows, not columns, usually. You'd probably have to hide all the ``s that are part of the column. I would do that (if I had control of the markup) by giving the same CSS class to each `` in the column, and then you could have a function to easily show/hide them. But I don't know if you can control WebGrid to that extent. — ADyson, Jul 22 '16 at 20:17
ADyson - Ok thank you. I didnt think there was an easy way to do it. I will just rebuild the WebGrid each time. — Ben, Jul 22 '16 at 20:42

score 0 · Answer 1 · edited May 23 '17 at 11:58

I faced the similar problem in my Grid. And I solved it with the help of css class added on WebGrid columns.

First, I add a class to all those columns which needs to be hidden.

gridColumns.Add(grid.Column("ID", "Test ID", null, "hidden-column"));

Added hide property on class 'hidden-column'

<style>
    .hidden-column {
        display:none;
    }
</style>

It will hide all the columns (td elements) having this class set (in this case, it will hide "ID" column).

To hide Grid headers as well, I called IIFE function on document ready.

       (function () {
            $('#divWebGrid tbody tr:first').find('td.hidden-column').each(function (i, td) {
                var indexOfHiddenColumn = $(td).index();
                $('#divWebGrid thead th').eq(indexOfHiddenColumn).addClass('hidden-column');
            });
        }());

Hope this post will help you to resolve your issue.

Show or Hide MVC WebGrid Column with Jquery

1 Answers1