1. Home
  2. Forum
  3. Blazor
  4. Show column only in edit mode

Show column only in edit mode

Hi guys,

With the EjsGrid, there is a Visible property. When set to false, it hides the column altogether.
Is it possible to only show the column when editing (in dialog mode), without resorting to Template/EditTemplate?

Regards,
Davin

7 Replies
VN Vignesh Natarajan Syncfusion Team February 28, 2020 10:10 AM UTC

Hi Davin, 

Thanks for contacting Syncfusion support.  

Query: “Is it possible to only show the column when editing (in dialog mode), without resorting to Template/EditTemplate?” 
 
We have achieved your requirement using Show/HideColumns method in the OnActionComplete and OnActionBegin event of EjsGrid. Initially we have rendered a Grid with one column hidden from view.  OnActionBegin event will be triggered when an action is initiated. Similarly OnActionComplete will be triggered when actions is completed. 

We have displayed the hidden column in Grid using the OnActionBegin event and hided the column in OnActionComplete event. Refer the below code example. 

<EjsGrid DataSource="@Orders" @ref="Grid" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEvents OnActionBegin="Begin" OnActionComplete="Complete" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings> 
    <GridColumns> 
. . . . .. . . . . . 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Visible="false" Width="150"></GridColumn> 
    </GridColumns> 
</EjsGrid> 
  
@code{ 
    EjsGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    public async void Begin(ActionEventArgs<Order> Args) 
    { 
        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.BeginEdit || Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Add) 
        { 
           await Grid.ShowColumns("Ship Country"); 
        } 
    } 
    public async void Complete(ActionEventArgs<Order> Args) 
    { 
        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.BeginEdit || Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Add) 
        { 
             await Grid.HideColumns("Ship Country"); 
        } 
    } 
. . . .. . . . . 
} 

 

For your convenience we have prepared a sample which can be downloaded from below  


Refer our UG documentation for your reference 



Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


DA Davin February 28, 2020 11:34 AM UTC

Thank you, this seems to work exactly as I hoped :-)
I've had to introduced a List<string> to implement this functionality with multiple columns, the API expects a 'keys' parameter of type 'object', so this was not really clear at first.

Kind regards,
Davin

RS Renjith Singh Rajendran Syncfusion Team March 2, 2020 10:04 AM UTC

Hi Davin, 

Thanks for your update. 

We are glad to hear that our suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


AH Admir Hodžic March 12, 2020 03:22 PM UTC

Apologies for bumping and opening post, 
But can wi hide /show multiple columns in once,

Method HideColumns and ShowColumns accepts Object what kind of object we passing to hide or show multiple columns on

VN Vignesh Natarajan Syncfusion Team March 13, 2020 04:36 AM UTC

Hi Admir,  
 
Thanks for contacting Syncfusion forums.  
 
Query: “But can wi hide /show multiple columns in once && Method HideColumns and ShowColumns accepts Object what kind of object we passing to hide or show multiple columns on”  
 
Yes. We can hide / show multiple column at a time. We can achieve you requirement by passing the HeaderText value of GridColumn in form of List<string> into the HideColumn / ShowColumns method of Grid.   
 
Refer the below code example.  
 
List<string> Cols = new List<string>() { "Ship Country", "Freight" }; // list of HeaderText of the grid Column 
           await Grid.HideColumns(Cols);      
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 


CH Chris Hewitt December 28, 2020 01:17 AM UTC

Hello,

Your proposed solution no longer works.

See the attached version.

Thanks, Chris

Attachment: BlazorApp1_7ec252c6.zip

RS Renjith Singh Rajendran Syncfusion Team December 28, 2020 11:58 AM UTC

Hi Chris, 
                                                                  
Based on your requirement, we suggest you to set the Width property of that particular GridColumn to 0. Please refer and use as like the code below, 

 
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="0"></GridColumn> 


We are also attaching the modified sample for your refer gggence, please download the sample form the link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon