setting visibility of a div section in Dialog Template of Grid

[CHIN BOON KEAN]

I was not able to set the hidden flag of div in the Dialog Template under the Grid Adding / Editing

[CHIN BOON KEAN]

@page "/comtest"

@using System;

@using Syncfusion.Blazor.Cards

@using ValidationRules = Syncfusion.Blazor.Grids.ValidationRules;

<div id="commMethod" class='configuration-container'>

    <header>

        <div class="module-title">

            <div class='title'>COMMUNICATION</div>

            <div class='underline'></div>

        </div>

    </header>

    <br />

    <div class="col-lg-12 control-section">

        <div class="content-wrapper">

            <div class="row">

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

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

                        <Template>

                            @{ var sType = (context as TestDTO); }

                            <div class="form-row">

                                <div class="form-group col-md-6">

                                    <SfDropDownList ID="SelectedType" TItem="string" @bind-Value="@(sType.MySelectedType)" TValue="string" DataSource="@EnumCommTypeValues" FloatLabelType="FloatLabelType.Always" Placeholder="Type">

                                        <DropDownListEvents TItem="string" TValue="string" ValueChange="@OnTypeChanged"></DropDownListEvents>

                                    </SfDropDownList>

                                </div>

                            </div>

                            <div hidden="@_IsShow"> show ME</div>

                        </Template>

                    </GridEditSettings>

                    <GridColumns>

                        <GridColumn Field=@nameof(TestDTO.MySelectedType) HeaderText="Type" EditType="EditType.DropDownEdit" ValidationRules="@(new ValidationRules { Required = true })" Width="150"></GridColumn>

                    </GridColumns>

                </SfGrid>

            </div>

        </div>

    </div>

</div>

@code

{

    public enum SelectedTypes

    {

        A,

        B

    }

    public class TestDTO

    {

        public string MySelectedType { get; set; }

    }

    private TestDTO[] _testList;

    private DialogSettings DialogParams = new DialogSettings { MinHeight = "600px", Width = "450px" };

    private bool _IsShow = false;

    private IEnumerable<string> EnumCommTypeValues = Enum.GetNames(typeof(SelectedTypes));

    public void OnTypeChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, string> args)

    {

        if (args.ItemData == SelectedTypes.A.ToString())

        {

            _IsShow = true;

        }

        else

        {

            _IsShow = false;

        }

    }

}

[Vignesh Natarajan]

Hi CHIN BOON KEAN,  

 

Greetings from Syncfusion support.  

 

Query: “I was not able to set the hidden flag of div in the Dialog Template under the Grid Adding / Editing” 

 

We have analyzed your query and we understand that you want to display some component (div element) based on some condition in dialog edit template. We have achieved your required by using a if condition inside the dialog template. Also we have restricted the unnecessary component re rendering on external value changes due to some performance related actions. Hence dialog template will not update (i.e. show div) on external value change event. To overcome this behavior we have called PreventRender() method of Grid in the ValueChange event of DropDownList component.  

 

Also to show the conditional component while editing a record, we have use OnActionBegin event of Grid with request type as BeginEdit.  Refer the below code example.  

 

<SfGrid @ref="GridInstance" 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-12"> 

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

                            <SfDropDownList ID="ShipCountry" @bind-Value="@(Order.ShipCountry)" TItem="OrdersDetails" TValue="string" DataSource="@GridData"> 

                                <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings> 

                                <DropDownListEvents TItem="OrdersDetails" TValue="string" ValueChange="@OnTypeChanged"></DropDownListEvents> 

                            </SfDropDownList> 

                        </div> 

                    </div> 

                    <div class="form-row"> 

                        <div class="form-group col-md-12"> 

                            @if (_IsShow) 

                            { 

                                <div> show ME</div> 

                            } 

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

    SfGrid<OrdersDetails> GridInstance { get; set; } 

    private bool _IsShow = false; 

    //to show te text based on the record while editing (when particualr column has value already) 

    public void ActionBeginHandler(ActionEventArgs<OrdersDetails> Args) 

    { 

        //will be triggered before record goes into edit mode 

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) 

        { 

            if (Args.Data.ShipCountry == "Denmark" || Args.Data.ShipCountry == "Austria") 

            { 

                _IsShow = true; 

            } 

            else 

            { 

                _IsShow = false; 

            } 

        } 

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save || Args.RequestType == Syncfusion.Blazor.Grids.Action.Cancel) 

        { 

            _IsShow = false; 

        } 

    } 

    //to show the text while changing the value. useful while inserting a record 

    public void OnTypeChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, OrdersDetails> args) 

    { 

        if (args.ItemData.ShipCountry == "Denmark" || args.ItemData.ShipCountry == "Austria") 

        { 

            _IsShow = true; 

        } 

        else 

        { 

            _IsShow = false; 

        }         

        GridInstance.PreventRender(false); 

  

    } 

 

 

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/170505/ze/DataGrid_Server1324676256.zip 

 

Note: To perform CRUD operation in Grid, primary key column must be defined in Grid, based on primary key value only CRUD operation will take place. Kindly ensure to define primary key column whose value is unique. Refer the below Ug documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan