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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grouping Columns

Thread ID:

Created:

Updated:

Platform:

Replies:

143840 Apr 7,2019 06:50 PM UTC Apr 9,2019 01:04 PM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Buster
Asked On April 7, 2019 06:50 PM UTC

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 [Syncfusion]
Replied On 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. 


Buster
Replied On 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.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon