Hiding column only for Edit in Dialog

[Zhi Yuan]

Hello,

Based on the tutorial here https://blazor.syncfusion.com/documentation/datagrid/how-to/show-or-hide-columns-in-dialog-editing/, I'm able to hide columns for both Add and Edit operations. 

Is it possible to hide columns only for Edit operation, or perhaps make it un-editable / greyed out only for Edit operation?

Thanks!

[Rahul Narayanasamy]

Hi Zhi, 

Greetings from Syncfusion. 

Query: Is it possible to hide columns only for Edit operation, or perhaps make it un-editable / greyed out only for Edit operation? 

We have validated your query and you want disable editing operation for particular column. You can your requirement by setting value as false to the AllowEditing property of the GridColumn component. 

The following sample code demonstrates editing disabled for the CustomerID column, 

<SfGrid DataSource="@Orders" Height="315" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120" AllowEditing="false"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#disable-editing-for-particular-column  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Zhi Yuan]

Hello Rahul,

Thanks for your prompt response! How should I disable editing operation in the scenario when the property isn't in the GridColumn, but it's in the DialogTemplate?

For example, in this demo provided by Syncfusion https://blazor.syncfusion.com/demos/datagrid/grid-dialog-template?theme=bootstrap4, Ship Address is not in the GridColumn, but it's in the DialogTemplate.

Thank you!

[Rahul Narayanasamy]

Hi Zhi, 

Thanks for the update. 

Query: How should I disable editing operation in the scenario when the property isn't in the GridColumn, but it's in the DialogTemplate? 

We have validated your query and you want to disable the field in dialog template with is not present in the Grid column. Here, we have prepared a sample based on your requirement. Here, we have disabled the ShipCity Field in Dialog template which is present in the GridColumns. Find the below code snippets and sample for your reference. 

Here, we have used OnActionBegin event and Enabled property of particular component(here, DropDownList).  

 

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

    <GridEvents OnActionBegin="ActionBeginHandler" 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"> 

                            <label class="e-float-text e-label-top">Ship City</label> 

                            <SfDropDownList ID="ShipCity" @bind-Value="@(Order.ShipCity)" Enabled="@IsEdit" 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"> 

                            <label class="e-float-text e-label-top">Ship Address</label> 

                            <SfTextBox ID="ShipAddress" @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 IsEdit { get; set; } 

    . . . 

    public void ActionBeginHandler(ActionEventArgs<OrdersDetails> args) 

    { 

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add) 

        { 

            IsEdit = true;  //enabled that field while  adding operation 

        } 

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save) 

        { 

            IsEdit = false;   //disabled editing for ShipCity field using Enabled property 

        } 

    } 

} 

Sample:  https://www.syncfusion.com/downloads/support/forum/158685/ze/BlazorAppDtDisable1-1158476237  

Please let us know if you have any concerns. 

Regards, 

Rahul 

1

[Ssekamatte James]

How do I disable a textbox which is not a dropdown using that same enabled property. When I add the enabled in my textbox, it returns a runtime error that enabled is not recognized.

For example, from your provided sample code, How can you disable this field:

  <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

[Renjith Singh Rajendran]

Hi Ssekamatte, 

We suspect that you would like to disable editing for a particular column in Grid when using a edit mode other than DialogTemplate mode of Editing. If so, then we suggest you to disable the AllowEditing property for that particular column achieve this requirement.  

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#disable-editing-for-particular-column 

 

 

<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" AllowEditing="false" Width="150"></GridColumn> 

 

Or if you are using Dialog Template then we suggest you to use the Enabled property in the for the corresponding SfTextbox you are using for ShipCountry column inside the Template of GridEditSettings. 

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog">    <Template>        @{            var Order = (context as OrdersDetails);            <div>                <div class="form-row">                ...                <div class="form-row">                    <div class="form-group col-md-12">                        <label class="e-float-text e-label-top">Ship Address</label>                        <SfTextBox ID="ShipAddress" @bind-Value="@(Order.ShipAddress)" Enabled="@IsEdit"></SfTextBox>                    </div>                </div>            </div>        }    </Template></GridEditSettings>

 

Please get back to us if you need further assistance. 

Regards, 

Renjith R