We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't use toolbar after closing modal.

Thread ID:

Created:

Updated:

Platform:

Replies:

145702 Jul 4,2019 11:43 AM UTC Jul 5,2019 10:23 AM UTC Blazor 1
loading
Tags: Grid
Ivan Petrov
Asked On July 4, 2019 11:43 AM UTC

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 [Syncfusion]
Replied On July 5, 2019 10:23 AM UTC

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. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon