Grouping Columns

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

Reply | Reply with quote

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]

<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>

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.

Reply | Reply with quote

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.

Reply | Reply with quote

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>

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US