We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Grouping Columns

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team April 8, 2019 09:02 AM UTC

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> 



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. 


Refer the help documentation. 


Regards, 
Thavasianand S. 



BU Buster April 8, 2019 02:02 PM UTC

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.


TS Thavasianand Sankaranarayanan Syncfusion Team April 9, 2019 01:04 PM UTC

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>    



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

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon