How to dynamically change grid edit settings after the grid is rendered.

[chris johansson]

I want to disable/enable add/delete/update settings based on which node you click in the tree. When you click a node in the tree it populates what is in the grid. Based on that i want to disable/enable. I have triedGridInstance.EditSettings.AllowAdding = true; and statehaschanged(); but it doesn't change enabling/disabling of the button.. is there a way to do this?

Even if I have custom buttons such as this private ListToolbaritems = new List() { "Add", "Delete", "Update", "Cancel", new ItemModel() { Text = "Cut", TooltipText = "Click", PrefixIcon = "e-click", Id

= "Click" }, "ColumnChooser" };

I want to be able to disable/enable the Cut button.

[Rahul Narayanasamy]

Hi Chris, 

Greetings from Syncfusion. 

Query: How to dynamically change grid edit settings after the grid is rendered. 

We have validated your query and you want to change the Grid EditSettings(AllowEditing, AllowAdding and AllowDeleting properties) dynamically. Here, we have prepared a sample based on your requirement. We have enabled and disabled the Grid EditSettings(AllowEditing, AllowAdding and AllowDeleting properties) dynamically by using button click. Find the below code snippets and sample for your reference. 

 

<button @onclick="Enable">Disable/Enable Edit opeations</button> 

 

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

    <GridEditSettings AllowAdding="@IsEditable" AllowEditing="@IsEditable" AllowDeleting="@IsEditable" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

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

    public bool IsEditable { get; set; } = true; 

 

    . . . 

 

    public void Enable() 

    { 

        if (IsEditable) 

        { 

            IsEditable = false; 

        } else 

        { 

            IsEditable = true; 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/159183/ze/BlazorAppEdit11667538531  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[chris johansson]

That works for the prebuilt toolbar add/delete/update etc.

But if I add a custom button such as Cut

new ItemModel() { Text = "Cut", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" }

How can I disable/enable that?

[Rahul Narayanasamy]

Hi Chris, 

Thanks for the update. 

Query: if I add a custom button such as Cut new ItemModel() { Text = "Cut", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" } How can I disable/enable that? 

We have validated your query and you want to enable/disable custom toolbar item. You can achieve your requirement by using EnableToolbarItems method. Find the below code snippets and sample for your reference. 

 

<button @onclick="Enable">Disable/Enable Edit opeations</button> 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="Toolbaritems" Height="315"> 

    <GridEditSettings AllowAdding="@IsEditable" AllowEditing="@IsEditable" AllowDeleting="@IsEditable" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

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

    public bool IsEditable { get; set; } = true; 

    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel", 

        new ItemModel() { Text = "Cut", TooltipText = "Click", PrefixIcon = "e-expand", Id = "Click" } }; 

 

    . . . 

 

    public async Task Enable() 

    { 

        if (IsEditable) 

        { 

            IsEditable = false; 

            await this.Grid.EnableToolbarItems(new List<string>() { "Click" }, false);   //disable custom toolbar item. You can also enable/disable default toolbar items using this 

        } 

        else 

        { 

            IsEditable = true; 

            await this.Grid.EnableToolbarItems(new List<string>() { "Click" }, true); //enable custom toolbar item. You can also enable/disable default toolbar items using this 

        } 

    } 

Sample: https://www.syncfusion.com/downloads/support/forum/159183/ze/BlazorAppSample1600842165  

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

Please let us know if you have any concerns. 

Regards, 

Rahul