Enable/Disable Grid for OnLoad DataBount event are fired

[Stefano Capobianco]

Hi, in my blazor component i need to disable my grid when onload event is fired and enable it when the databound is fired.

How can achieve this?

Thanks

Stefano

[Renjith Singh Rajendran]

Hi Stefano, 

Greetings from Syncfusion support. 

We suggest you to add attributes for grid and apply style according to enable/disable grid. We have prepared a sample based on this requirement, please download the sample from the link below, 

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

 

 

<SfGrid DataSource="@Orders" @attributes="@GridAttributes" AllowPaging="true"> 

    <GridEvents OnLoad="LoadHandler" DataBound="DataBound" TValue="Order"></GridEvents> 

    ... 

</SfGrid> 

 

<style> 

    .e-grid[disable="yes"] { 

        opacity: .5; 

        pointer-events: none; 

        -ms-touch-action: none; 

        touch-action: none; 

        cursor: no-drop; 

    } 

</style> 

 

    private Dictionary<string, object> GridAttributes { get; set; } = new Dictionary<string, object>(); 

    ... 

    public void LoadHandler() 

    { 

        GridAttributes.Add("disable", "yes"); 

    } 

    public void DataBound() 

    { 

        GridAttributes["disable"] = "no"; 

    } 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Stefano Capobianco]

Hi Renjith, your solution works very well, the only "problem" is the spinner because inherits the same css styles of the grid. It's possible to give evidence to the spinner ?

Thanks

Stefano

[Renjith Singh Rajendran]

Hi Stefano, 

 

We suspect that, you would like to hide the default Grid spinner and display your own customized spinner in Grid. If so, then we suggest you to hide the default Grid’s spinner by adding the below style in your application. 

 

<style> 

    .e-grid .e-spinner-pane { /*hide the Grid spinner */ 

        display: none; 

    } 

</style> 

 

 

Now the Grid’s default spinner won’t be displayed. Now you can render your custom spinner component and then show/hide the customized spinner by using the Grid events(OnLoad, DataBound, OnActionBegin etc.), which will be triggered for each corresponding actions in Grid. 

Reference :  

https://blazor.syncfusion.com/documentation/spinner/getting-started/#initialization 

https://blazor.syncfusion.com/demos/spinner/overview?theme=bootstrap4 

https://blazor.syncfusion.com/documentation/datagrid/events/ 

<div id="container"></div>    <SfSpinner @ref="SpinnerObj" Target="#container">        @*Render custom spinner component.*@    </SfSpinner>SfSpinner SpinnerObj;string target { get; set; } = "#container";public void LoadHandler(){    SpinnerObj.ShowAsync();    GridAttributes.Add("disable", "yes");}public void DataBound(){    GridAttributes["disable"] = "no";    SpinnerObj.HideAsync();}

We have prepared a sample based on the above suggestion. Please download the sample from the link below,  

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

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R