Disable treegrid

[Riccardo]

How to disable the treegrid?

[Gowri Loganathan]

Hi Riccardo, 

Thanks for using Syncfusion Products. 

Query : Disable TreeGrid 

In Blazor we cannot access the TreeGrid DOM element directly, so we have wrapped the TreeGrid inside a div element and using that element we have disabled the TreeGrid by adding or removing the required class to the div element in a button click event. 

Refer the below code snippet for the solution : 

 

// button for performing operation// 

<EjsButton OnClick="Disable" Content="Disable TreeGrid"></EjsButton> 

<EjsButton OnClick="Enable" Content="Enable TreeGrid"></EjsButton> 

 

// div element containing TreeGrid// 

<div class="@this.disable"> 

    <EjsTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1"> 

        <TreeGridColumns> 

            <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

            <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn> 

            <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

            <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

        </TreeGridColumns> 

    </EjsTreeGrid> 

</div> 

// using class e-overlay for disabling TreeGrid // 

private string disable { get; set; } 

    private void Disable() 

    { 

        this.disable = "e-overlay";  // disable TreeGrid 

    } 

    private void Enable() 

    { 

        this.disable = null;        // enable TreeGrid 

    } 

Please refer the screenshot: 

 

Please find the sample: 

https://www.syncfusion.com/downloads/support/forum/151543/ze/Disable_TreeGrid_Blazor-1516502062 

Kindly revert us, if you need more assistance on this. 

Regards, 

Gowri V L.