Can't use toolbar after closing modal.

[Ivan Petrov]

Hello,

When trying to remove columns or search after closing a modal I am unable to. I think it is doing some sort of initial search but is bugging out. My code is:

@page "/"

@using Data

@using Syncfusion.EJ2.Blazor.Grids

@using Syncfusion.EJ2.Blazor.Popups

@using Newtonsoft.Json;

@if (this.IsModalShown)

{

    <EjsDialog id="dialog" header=@("modal") width="800px" isModal="true" allowDragging="true">

        smt

        <button @onclick=@(() => this.IsModalShown = false)>Close Modal</button>

    </EjsDialog>

}

<EjsGrid @ref=this.defaultGrid DataSource=@this.gridData ShowColumnChooser="true" Toolbar="@(new List<string>() { "ColumnChooser", "Search" })"

         AllowFiltering="true" CommandClicked="@CommandClickHandler">

    <GridFilterSettings Type="@Syncfusion.EJ2.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

    <GridSearchSettings Fields="@(new string[] { "ShipCountry"})" Operator="contains" IgnoreCase="true"></GridSearchSettings>

    <GridColumns>

        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name"></GridColumn>

        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="yMd"></GridColumn>

        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2"></GridColumn>

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

        <GridColumn HeaderText="Actions" Commands=commands></GridColumn>

    </GridColumns>

</EjsGrid>

@functions{

    EjsGrid defaultGrid;

    public bool IsModalShown { get; set; }

    List<CommandModel> commands = new List<CommandModel>();

    public List<OrdersDetails> gridData { get; set; }

    protected override async Task OnInitAsync()

    {

        await base.OnInitAsync();

        this.commands.Add(new CommandModel { Title = "Delete", ButtonOption = new CommandButtonOptions {IconCss="e-btn-sb-icons e-open-icon" , CssClass = "e-small e-round" } });

        this.commands.Add(new CommandModel { Title = "Edit", ButtonOption = new CommandButtonOptions {IconCss="e-btn-sb-icons e-add-icon",  CssClass = "e-small e-round" } });

        

        this.gridData = OrdersDetails.GetAllRecords();

    }

    public void CommandClickHandler(CommandClickEventArgs args)

    {

        var selectedId = JsonConvert.DeserializeObject<OrdersDetails>(args.RowData.ToString()).CustomerID;

        switch (args.CommandColumn.Title)

        {

            case "Edit":

                IsModalShown = true;

                this.Invoke(this.StateHasChanged);

                break;

            case "Delete":

                this.DeleteCategory(selectedId);

                break;

        }

    }

    public void DeleteCategory(string id)

    {

    }

    protected override void OnAfterRender()

    {

        base.OnAfterRender();

        this.defaultGrid.GridLines = GridLine.Both;

    }

}

P.S. I noticed that removing the line <GridSearchSettings Fields="@(new string[] { "ShipCountry"})" Operator="contains" IgnoreCase="true"></GridSearchSettings> fixes the issue but still I only want to search by the ShipCountry column.

[Rahul Narayanasamy]

Hi Ivan, 

 

Greetings from Syncfusion. 

 

Query: When trying to remove columns or search after closing a modal I am unable to. I think it is doing some sort of initial search but is bugging out 

 

We have validated and checked your shared snippets in that you have performed initial searching operation and define the initial search details directly in the Fields property of search settings. This issue is occurred  because of declaring collection of string or array values directly to the Complex properties like (SortSettings, SearchSettings, FilterSettings etc). By providing this way, the reference changes every time the property is accessed. So this issue is occurred.  

 

We suggest you to define the initial search column details in the below way to overcome the reported issue now and it will make your Grid in a usable way.   

 

Define the initial search Field details and assigned it to a variable and use the variable as value for Field property of Search settings in the component.   

 

[code example] 

... 

 

@if (this.IsModalShown) 

{ 

    <EjsDialog id="dialog" header=@("modal") width="800px" isModal="true" allowDragging="true"> 

        smt 

        <button @onclick=@(() => this.IsModalShown = false)>Close Modal</button> 

    </EjsDialog> 

} 

 

<EjsGrid @ref=this.defaultGrid DataSource=@this.gridData ShowColumnChooser="true" Toolbar="@(new List<string>() { "ColumnChooser", "Search" })" 

         AllowFiltering="true" CommandClicked="@CommandClickHandler"> 

    <GridFilterSettings Type="@Syncfusion.EJ2.Blazor.Grids.FilterType.Menu"></GridFilterSettings> 

    <GridSearchSettings Fields="@search" Operator="contains" Key="Denmark" IgnoreCase="true"></GridSearchSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name"></GridColumn> 

        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="yMd"></GridColumn> 

        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2"></GridColumn> 

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

        <GridColumn HeaderText="Actions" Commands=commands></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

@functions{ 

 

    string[] search =  new string[] { "ShipCountry"}; 

 

    EjsGrid defaultGrid; 

 

    public bool IsModalShown { get; set; } 

 

    List<CommandModel> commands = new List<CommandModel>(); 

 

    public List<OrdersDetails> gridData { get; set; } 

 

    ... 

} 

 

 

Also we have already considered this as an issue and we will include the fix for this issue in Volume 2, 2019 main release which is expected to be rolled out on mid of July 2019.  

 

Please try to avoid of declaring collection of string or array values directly to the Complex properties like (SortSettings, SearchSettings, FilterSettings etc) until we fix the issue.  

 

Here, we have prepared a sample for your convenience which is worked perfectly. Please find the sample in below link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1201091013  

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul