EnableToolbarItemsAsync does not work

[Lucas R Vogel]

I have a page with a dropdown list and a grid. When the dropdown list isn't showing anything (which is how it's loaded, by default), I want the toolbar items disabled. When the list has a selected value displayed, I want the toolbar items enabled.

In the Grid documentation it says you can enable/disable with the EnableToolbarItems or EnableToolbarItemsAsync method call, but when I use either method I am able to disable the buttons but not re-enable them.

await grid.EnableToolbarItemsAsync(toolbar, false); //disables

await grid.EnableToolbarItemsAsync(toolbar, true); // stays disabled

Could I be doing something wrong?

(using version 19.3.0.56)

[Rahul Narayanasamy]

Hi Lucas, 

Greetings from Syncfusion. 

Query: EnableToolbarItemsAsync does not work 

We have validated your query and checked the reported problem. We could not able to reproduce the reported problem at our end. We can able to enable/disable the toolbar items using EnableToolbarItemsAsync method. Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/170987/ze/SampleGrid533842971  

Also, we need more details regarding the reported problem. Could you please share the below details. It will be helpful to validate and provide a better solution. 

• Full Grid code snippets.
• Reproduce the reported problem in the provided sample and revert back to us.
• Share a simple reproduceable sample if possible.
• Video demonstration of the problem.

Regards, 

Rahul 

[Artilizansa]

Hello Support Team,

Your sample is working well.

I'm facing similar issue using a list of Syncfusion.Blazor.Navigations.ItemModel to populate my Grid Toolbar.

Binding a boolean to Disable property --> Not working.

Calling the EnableToolbarItemsAsync() method --> Not working.

Please have a look on the complete Index.razor code.

Thank you in advance for you answer.

Artilizansa.

@page "/"

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Buttons

<div>

<div style="float:left;">

<SfButton id="Enable" Content="Enable" @onclick="enable"></SfButton>

</div>

<div style="padding-left: 90px">

<SfButton id="Disable" Content="Disable" @onclick="disable"></SfButton>

</div>

</div>

<SfGrid id="Grid" DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid" AllowGrouping="true" Toolbar=@Toolbaritems>

<GridGroupSettings Columns=@GroupCol></GridGroupSettings>

<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>

<GridColumns>

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

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

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

</GridColumns>

</SfGrid>

<style>

.e-expand::before {

content: '\e82e';

}

.e-collapse::before {

content: '\e834';

}

</style>

@code{

SfGrid<Order> Grid;

public List<Order> Orders { get; set; }

private string[] GroupCol = (new string[] { "OrderID" });

private bool disableExpand { get; set; } = true;

private bool disableCollapse { get; set; } = true;

List<Syncfusion.Blazor.Navigations.ItemModel> Toolbaritems = new List<Syncfusion.Blazor.Navigations.ItemModel>();

public async Task enable()

{

disableExpand = disableCollapse = false;

//await this.Grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Expand", "Grid_Collapse" }, true);

}

public async Task disable()

{

disableExpand = disableCollapse = true;

//await this.Grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Expand", "Grid_Collapse" }, false);

}

protected override void OnInitialized()

{

Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "Expand", Id = "itemExpand", Disabled = @disableExpand });

Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "Collapse", Id = "itemCollapse", Disabled = @disableCollapse });

Orders = Enumerable.Range(1, 75).Select(x => new Order()

{

OrderID = 1000 + x,

CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

Freight = 2.1 * x,

OrderDate = DateTime.Now.AddDays(-x),

}).ToList();

}

public class Order

{

public int? OrderID { get; set; }

public string CustomerID { get; set; }

public DateTime? OrderDate { get; set; }

public double? Freight { get; set; }

}

public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

if (args.Item.Text == "Expand")

{

await this.Grid.GroupExpandAll();

}

if (args.Item.Text == "Collapse")

{

await this.Grid.GroupCollapseAll();

}

}

}

[Rahul Narayanasamy]

Hi Artilizansa, 

Greetings from Syncfusion. 

We are able to reproduce the reported case while using the provided code snippets. You have passed different id to EnableToolbarItemsAsync method instead of defined id. You need to pass the correct toolbar item id to EnableToolbarItemsAsync method. Here, we have modified the sample based on your requirement. Find the below code snippets and sample for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar#enabledisable-toolbar-items 

 

 

<SfGrid id="Grid" DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid" AllowGrouping="true" Toolbar=@Toolbaritems> 

    . . .. 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

    . ..  

    List<Syncfusion.Blazor.Navigations.ItemModel> Toolbaritems = new List<Syncfusion.Blazor.Navigations.ItemModel>(); 

    public async Task enable() 

    { 

        //disableExpand = disableCollapse = false; 

        await this.Grid.EnableToolbarItemsAsync(new List<string>() { "itemExpand", "itemCollapse" }, true); 

    } 

 

    public async Task disable() 

    { 

        //disableExpand = disableCollapse = true; 

        await this.Grid.EnableToolbarItemsAsync(new List<string>() { "itemExpand", "itemCollapse" }, false); 

    } 

 

    protected override void OnInitialized() 

    { 

        Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "Expand", Id = "itemExpand", Disabled = @disableExpand }); 

        Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "Collapse", Id = "itemCollapse", Disabled = @disableCollapse }); 

        . . . 

    } 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/170987/ze/Sample-968902444  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Artilizansa]

Hello again,

Does it mean that binding a boolean to Disable property is not working ?

Using the EnableToolbarItemsAsync() is the only way?

Artilizansa.

[Rahul Narayanasamy]

Hi Artilizansa, 

Thanks for the update. 

Yes, it is not possible to change the Disabled property value which is bound from another boolean value dynamically.  

Since we are already having an option to enable/ disable the toolbar items by using EnableToolbarItemsAsync method dynamically, we suggest you to achieve the requirement by using EnableToolbarItemsAsync method.  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Artilizansa]

Thank you again. I got it.

Artilizansa.

[Vignesh Natarajan]

Hi Artilizansa, 

Thanks for the update.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan