ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Columns / Show or Hide Grid Columns on Client-Side
In This Topic
    Show or Hide Grid Columns on Client-Side
    In This Topic

    The FlexGrid control enables users to make specific grid columns visible or hidden on server side, using Visible property of FlexGrid. However, this operation can also be accomplished on the client side. Developers may find it appropriate to show a hidden column of grid on button click by end users, in their MVC application.

    For instance, while analyzing the Sales data for your organization using FlexGrid, you are willing to view limited columns at first instance. Additional details, such as Amount for sales in respective months, you want to appear only when desired. This can be achieved on client side using JavaScript.

    The below example depicts this scenario, where on button click you can make the Amount column visible.

    Similarly, on clicking Hide Discount button, you can hide the Discount column from the Grid.

    You can use JavaScript in View of your MVC application as shown below, to hide or show any columns on button click.

    The below code extends application created in Quick Start topic.

    HTML
    Copy Code
    <script>
        function showAmount() {
            var grid = wijmo.Control.getControl("#hFlexGrid");
            //by column index
            grid.columns[6].visible = true;
            //or by column name
            grid.columns.getColumn("Amount").visible = true;
        }
    </script>
    <script>
        function hideDiscount() {
            var grid = wijmo.Control.getControl("#hFlexGrid");
            //by column index
            grid.columns[4].visible = false;
            //or by column name
            grid.columns.getColumn("Discount").visible = false;
        }
    </script>
    
    <div class="container">
        <div>
            <c1-flex-grid id="hFlexGrid" auto-generate-columns="false" height="700px" width="800px" allow-add-new="true" class="grid">
                <c1-items-source source-collection="Model"></c1-items-source>
                <c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column>
                <c1-flex-grid-column binding="Date" header="Date"></c1-flex-grid-column>
                <c1-flex-grid-column binding="Country" header="Country"></c1-flex-grid-column>
                <c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
                <c1-flex-grid-column binding="Discount" header="Discount" format="p0"></c1-flex-grid-column>
                <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
                <c1-flex-grid-column binding="Amount" format="c" is-visible="false"></c1-flex-grid-column>
            </c1-flex-grid>
        </div>
    </div>
    
    <button title="SetValue" onclick="showAmount()">Show Amount</button>
    <button title="SetValue" onclick="hideDiscount()">Hide Discount</button>
    

    Back to Top

    See Also