Grouping Columns

[Buster]

I have Total Price column followed by Price, Tax and Shipping.  I am going to 'hide' the Price, Tax and Shipping with the hideColumns method and provide a button for the user to click to unhide the columns.

I want these for columns to always to together - Total Price, Price, Tax and Shipping.  If the user wants to move any of these columns to somewhere else in the grid, I want all of them to move together.

How can I do this?

Thanks

[Thavasianand Sankaranarayanan]

Hi Buster, 

Greetings from the Syncfusion support, 

 

Query #1:  How to Hide/Show the Grid column using the External button click event? 

As per you query, we have created a sample with EJ2 Grid show and hide the Grid columns through external button click action. In the below code sample, you can show/hide the grid columns(“Price”, ”Tax”, ”Shipping”) 

using “ShowColumns”, “HideColumns”  buttons click action which buttons are called the “showColumns”, “hideColumns” methods. 

[index.cshtml] 

<div class="control-section"> 

    <button id="showBtn" onclick="onShowColumns()">Show Columns</button> 

    <button id="hideBtn" onclick="onHideColumns()">Hide Columns</button> 

    <ejs-grid id="Grid" dataSource="ViewBag.PurchaseData" allowPaging="true" allowResizing="true" allowReordering="true" gridLines="Both"> 

         

        <e-grid-columns> 

            <e-grid-column field="TotalPrice" headerText="Total Price" textAlign="Right" format="C2" width="120"></e-grid-column> 

            <e-grid-column field="Price" headerText="Price" format="C2" width="150"></e-grid-column> 

            <e-grid-column field="Tax" headerText="Tax" textAlign="Right" format="C2" width="120"></e-grid-column> 

            <e-grid-column field="Shipping" headerText="Shipping" width="200"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

<script> 

    function onShowColumns(e) { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.showColumns(["Price", "Tax", "Shipping"]); 

    } 

    function onHideColumns(e) { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.hideColumns(["Price", "Tax", "Shipping"]); 

    }     

</script> 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestControl1989846052.zip 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/?no-cache=1#showhide-columns-by-external-button 

https://ej2.syncfusion.com/javascript/documentation/api/grid#hidecolumns 

https://ej2.syncfusion.com/javascript/documentation/api/grid#showcolumns 

Query #2: How to move the Grid columns? 

We have feasible to support the column swapping on our Grid. you can able to move the grid column in the UI using the property “allowReordering” as true. In the below sample, you can achieve the column reorder based on grid column index or field name. 

Sample browser link: https://ej2.syncfusion.com/aspnetcore/Grid/Reorder#/material 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#allowreordering 

Regards, 

Thavasianand S. 

[Buster]

Thank you for the quick response.  I am not clear on your answer to the 2nd part of my question.  I want to always keep Total Price, Price, Tax and Shipping columns together and hide/unhide the last 3.  For example if these columns are being shown, I do not want to allow the user to move column 'Price' to another location.  If the user tries to move any of these columns, all 4 columns move together.  I don't want the user to be able to separate the columns.  Can this be done?  Thanks.

[Thavasianand Sankaranarayanan]

Hi Buster, 

As per your query, if you want to keep  the “Total Price, Price, Tax, Shipping” columns together, you need disable the column reordering(Column.allowReordering=”false”) property. In the below  code example, you can able to reorder the last 3 columns(“CustomerID, Customer Address, Paymode”) alone. 

[index.cshtml] 

    <ejs-grid id="Grid" dataSource="ViewBag.PurchaseData" allowPaging="true" allowResizing="true" allowReordering="true" gridLines="Both">         

        <e-grid-columns> 

            <e-grid-column field="TotalPrice" headerText="Total Price" textAlign="Right" format="C2" allowReordering="false" width="120"></e-grid-column> 

            <e-grid-column field="Price" headerText="Price" format="C2" allowReordering="false" width="150"></e-grid-column> 

            <e-grid-column field="Tax" headerText="Tax" textAlign="Right" format="C2" allowReordering="false" width="120"></e-grid-column> 

            <e-grid-column field="Shipping" headerText="Shipping" width="200" allowReordering="false"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer ID" width="200"></e-grid-column> 

            <e-grid-column field="CustomerAddress" headerText="Customer Address" width="200"></e-grid-column> 

            <e-grid-column field="Paymode" headerText="Pay Mode" width="200"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid>    

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestControl090420191243533984.zip 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S.