1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Hide column in Group area

Hide column in Group area

Hello,

When I drop a column in the group area can I choose to hide it completely instead of grouping by it?

I have some columns that I do not want to group by but I want the user to be able to hide them if they want.


Thanks in advance


3 Replies 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team October 8, 2021 02:31 PM UTC

Hi Theofilos, 

Greetings from Syncfusion support 

From your update we suspect that you like to hide the Grid column once we drop that column in Group area. By default, when you drop a column in Group area, that column is hidden in the Grid. It was the default behavior.  

Also we suspect that you like to hide the Group area of the Grid. To avoid ungrouping or further grouping of a column after initial column grouping, define the showDropArea of e-grid-groupsettings as false to hide the drop area. We have already discussed about your requirement in our documentation. Please refer the below documentation for more information. 


If you like to hide the Group area after dropping a column, you can achieve your requirement by using actionBegin event of Grid. In this event, we have set the showDropArea property as false. Please refer the below code example and sample for more information. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" actionBegin="begin" allowGrouping="true" allowPaging="true" > 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
        <e-grid-columns> 
            .  .  .  .  .  .  .  .  
            .  .  .  .  .  .  .  . 
            .  .  .  .  .  .  .  . 
       </e-grid-columns> 
    </ejs-grid> 
function begin(args) { 
        if (args.requestType == 'grouping') { 
            this.groupModule.groupSettings.showDropArea = false; 
        } 
    } 





If it does not meet your requirement, please share your exact requirement with detailed description. If possible, explain your requirement with video demonstration or pictorial representation step by step. 
 
Rajapandi R 


DI Dimitris October 11, 2021 08:31 AM UTC

Hi Rajapandi Ravi,

I am sorry I think I explained poorly what I want.

I want the Drop Area to be visible. Also I want the user to be able to drag and drop columns in that drop area.

When a column is in that drop area the grid is being grouped by that column right? But I have some columns that I do not want to group by for example Id, and I want the user to hide them if they want. I thought what If I just hide the column when I drop them in that drop area. For example, can I somehow allowGrouping = false and also be able to drag and drop the column in the drop area. The group area to act like a list of columns for the user to add or remove.

Is this possible?


Thank you, Theofilos


RR Rajapandi Ravi Syncfusion Team October 12, 2021 03:03 PM UTC

Hi Theofilos, 
  
From your update, we could see that you like to hide the column once you drop the column in the group area. Based on your query we have prepared a sample and achieved your requirement by using actionBegin event of Grid. In this event, we have hide the “ShipCountry” and  “CustomerID” column once we drop in group area. The Group area only shows the grouped column value, and it does not show the non-grouped columns. It was the default behavior. Please refer the below code example and sample for more information. 
  
  
<script> 
    var arr = ["ShipCountry", "CustomerID"] 
    function begin(args) { //actionBegin event of Grid 
        if (args.requestType == 'grouping') { 
            if (arr.includes(args.columnName)) { 
                args.cancel = true; //prevent the grouping action 
                var index = this.groupModule.groupSettings.columns.indexOf(args.columnName); 
                this.groupModule.groupSettings.columns.splice(index, 1); //delete the hidden column in groupsettings 
                this.getColumnByField(args.columnName).visible = false; 
                this.refreshColumns(); 
            } 
        } 
    } 
</script> 
  
  
  
From validating your query, we suspect that you are using Grouping only for column hiding purpose. In our Grid, there is a feature name called Column Chooser. Clicking on the the column chooser icon in the toolbar to open column chooser and you can select columns to hide/show from the checkbox list. If your requirement was only hiding the columns, please refer the below sample demo and documentation for more information. 
  
  
  
Regards, 
Rajapandi R 


Marked as answer
Loader.
Up arrow icon