1. Home
  2. Forum
  3. Blazor
  4. Hide/show fields in Insert and Edit

Hide/show fields in Insert and Edit

Hi, I have a short question.
How can I show/hide many fields when it is in INSERT mode or in EDIT mode (popup dialog) ?
I need to show a couple of fields in insert but not in edit and/or viceversa.


Thank you

Giancarlo


3 Replies
VN Vignesh Natarajan Syncfusion Team August 5, 2021 03:53 AM UTC

Hi Giancarlo,  
 
Thanks for contacting Syncfusion support.  
 
Query: “How can I show/hide many fields when it is in INSERT mode or in EDIT mode (popup dialog) ?” 
 
We have achieved your requirement using Dialog template feature and OnActionBegin event of Grid. Using Dialog Template, we can customize the components to be displayed in edit/add dialog. Here we have used Boolean variable to display specific components.  
 
We can control the Boolean variable to show/hide components using OnActionBegin event. Because when certain actions like add / edit is initiated, OnActionBegin event will be triggered with corresponding RequestType.  
 
Refer the below code example.  
 
<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 
    <GridEvents OnActionBegin="ActionBegin" TValue="OrdersDetails"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 
        <Template> 
            @{ 
                var Order = (context as OrdersDetails); 
                <div> 
                    <div class="form-row"> 
                        <div class="form-group col-md-6"> 
                            <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Placeholder="OrderID" Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox> 
                        </div> 
                        <div class="form-group col-md-6"> 
                            <SfAutoComplete ID="CustomerID" TItem="OrdersDetails" Placeholder="CustomerID" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData"> 
                                <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings> 
                            </SfAutoComplete> 
                        </div> 
                    </div> 
  
                    <div class="form-row"> 
                        <div class="form-group col-md-6"> 
                            <SfNumericTextBox ID="Freight" Placeholder="Freight" @bind-Value="@(Order.Freight)" TValue="double?"></SfNumericTextBox> 
                        </div> 
                        <div class="form-group col-md-6"> 
                            <SfDatePicker ID="OrderDate" Placeholder="OrderDate" @bind-Value="@(Order.OrderDate)"></SfDatePicker> 
                        </div> 
                    </div> 
                    @if (IsAdd) 
                    { 
                        <div class="form-row"> 
                            <div class="form-group col-md-6"> 
                                <SfDropDownList ID="ShipCountry" Placeholder="Ship Country" @bind-Value="@(Order.ShipCountry)" TItem="OrdersDetails" TValue="string" DataSource="@GridData"> 
                                    <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings> 
                                </SfDropDownList> 
                            </div> 
                            <div class="form-group col-md-6"> 
                                <SfDropDownList ID="ShipCity" Placeholder="Ship City" @bind-Value="@(Order.ShipCity)" TItem="OrdersDetails" TValue="string" DataSource="@GridData"> 
                                    <DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings> 
                                </SfDropDownList> 
                            </div> 
                        </div> 
                        <div class="form-row"> 
                            <div class="form-group col-md-12"> 
                                <SfTextBox ID="ShipAddress" Placeholder="Ship Address" @bind-Value="@(Order.ShipAddress)"></SfTextBox> 
                            </div> 
                        </div> 
                    } 
                </div> 
            } 
        </Template> 
    </GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="140" TextAlign="@TextAlign.Right" HeaderTextAlign="@TextAlign.Right"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="160"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
  
@code{ 
    public bool IsAdd { get; set; } 
    public void ActionBegin(ActionEventArgs<OrdersDetails> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) 
        { 
            IsAdd = false; 
        } 
        else if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Add) 
        { 
            IsAdd = true; 
        } 
    } 
 
 
For your convenience we have prepared 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  
 


GC Giancarlo Cherubin August 6, 2021 04:58 AM UTC

Great!!


Thank you so much  Vignesh.


Regards

Giancarlo


VN Vignesh Natarajan Syncfusion Team August 6, 2021 06:13 AM UTC

Hi Giancarlo, 

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon