1. Home
  2. Forum
  3. Blazor
  4. Is it possible to add a loading indicator in the Grid and TreeGrid component

Is it possible to add a loading indicator in the Grid and TreeGrid component

Hi syncfusion, I wonder if it is possible also to have a custom loader indicator in the grid and treegrid component as follows:


As you can see in the image the loader indicator should be located between the headers and the rest of the data. Thanks in advance for your answer

9 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team January 25, 2021 11:23 AM UTC

Hi veymar, 

Greetings from Syncfusion support. 
 
Query 1 : custom loader indicator in the grid 
We can achieve this requirement using the Microsoft JSInterop to append the SfProgressBar element between the header and content area of Grid. In the below code we have called the JavaScript method in the Created event of Grid, and appended the progress bar element in between header and content are of Grid. We have set the Value property of SfProgressBar as 100 in DataBound event to indicate the complete loaded Grid. 
 

We are attaching the sample for your reference, please download the sample from the link below, 
 
Please refer the codes below. We suggest you to customize the ProgressBar based on your requirement by referring the below documentations, 

 
<SfProgressBar ID="ProgressBar" ... Value="@Progressvalue"> 
      ... 
</SfProgressBar> 
 
<SfGrid ID="Grid" DataSource="@Orders" AllowPaging="true"> 
    <GridEvents DataBound="DataBound" Created="Created" TValue="Order"></GridEvents> 
    ... 
</SfGrid> 
 
    public void DataBound() 
    { 
        Progressvalue = 100; 
    } 
    public async Task Created() 
    { 
        await JSRuntime.InvokeAsync<object>("AppendProgressBar"); 
    } 
    public double Progressvalue = 20; 

[AppendProgressBar.js] 

function AppendProgressBar() {    var progressbar = document.getElementById("ProgressBar");    document.getElementById("ProgressBar").remove();    document.getElementById("Grid").getElementsByClassName("e-gridheader")[0].append(progressbar);}

Query 2:- Custom loader indicator in treegrid component.  
We have achieved this requirement using the Microsoft JSInterop to append the SfProgressBar element between the header and content area of TreeGrid. In the below code we have called the JavaScript method in the Created event of Tree Grid, and appended the progress bar element in between header and content are of Tree Grid. We have set the Value property of SfProgressBar as 100 inDataBound event to indicate the complete loaded Tree Grid.  
  
Refer to the code below:-  
  
@using Syncfusion.Blazor.Grids  
@using  Syncfusion.Blazor.TreeGrid;  
@using Syncfusion.Blazor.ProgressBar  
@inject IJSRuntime JSRuntime  
  
<SfProgressBar ID="ProgressBar" Type="ProgressType.Linear" Height="5"  
               Value="@Progressvalue" Minimum="0" Maximum="100">  
    <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />  
</SfProgressBar>  
  
  
<SfTreeGrid ID="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId"TreeColumnIndex="1" AllowFiltering="true">  
    <TreeGridEvents DataBound="DataBound" Created="Created" TValue="BusinessObject"></TreeGridEvents>  
    <TreeGridColumns>  
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>  
                .     .   .  
    </TreeGridColumns>  
</SfTreeGrid>  
@code{  
      
    public void DataBound()  
    {  
        Progressvalue = 100;  
    }  
    public async Task Created()  
    {  
        await JSRuntime.InvokeAsync<object>("AppendProgressBar");   //called the JSInterop  
    }  
    public double Progressvalue = 20;  
    public List<BusinessObject> TreeGridData { get; set; }  
    protected override void OnInitialized()  
    {  
        this.TreeGridData = BusinessObject.GetSelfDataSource().ToList();  
    }  
}  
  
AppendProgressBar.js  
  
function AppendProgressBar() {  
    var progressbar = document.getElementById("ProgressBar");  
    document.getElementById("ProgressBar").remove();                                     
    document.getElementById("TreeGrid").getElementsByClassName("e-gridheader")[0].append(progressbar);//append the ProgressBar in between header and Content of the TreeGrid   
}  
  
Screenshot:-  
  
  
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


VM veymar montano colque January 25, 2021 09:28 PM UTC

Hi Syncfusion,
thanks for the rapid answer, I've applied the JS interops and everything seems to work well, however when the data of the grid loads, the SfProgressBar gets frozen, as it is shown in the compressed gif attached here (The loader is not hidden for demonstration purposes).
I don't know if the frozen behavior of the SfProgressBar is because of rendering the data, as you will see in the gif the PogressBar gets frozen before the grid's data loads which  is quite noticeable. Some Idea to fix this problem.

Additionally,
 - I'm calling the JS interop in the OnAfterRenderAsync method in the first render only. because when doing this the progress bar always appears at the beginning.
 - I'm working with .Net Core 3.1.403

Implementation.
 - JS interop

window.setGridLoader = (gridId, loaderId) => {
    var grid = document.getElementById(gridId);
    var gridLoader = document.getElementById(loaderId);
    document.getElementById(loaderId).remove();

    grid.getElementsByClassName("e-gridheader")[0].append(gridLoader);
}


- calling the interop

protected override async Task OnAfterRenderAsync(bool firstRender)
{
       if (firstRender && LoaderIndicator)
       {
            await Js.InvokeVoidAsync("setGridLoader", Id, LoaderIndicatorId);
       }
}


Thanks in advance for your help.

Attachment: gridLoaderIndicator_6ffc88c1.zip

VM veymar montano colque January 26, 2021 12:00 AM UTC

Hi Syncfusion,
Checking a little deeper, I've realized that no matter in the SfProgressBar is prevented from re-rendering, the animation of it will be affected by external renders, in case of the Grid, it will be frozen for a little moment when the data is loading, as it is shown in the attached gif. I don't know if it's a problem only for .Net 3.1 and if it is solved in .Net 5, but this problem affects integrating the SfProgressBar with the Grid since when the data loads rapidly ProgressBar only is shown frozen and then disappears when the data loads. 

Please let me know if you have some work-around to tackle this problem. Thanks so much in advance.



Attachment: loader_animation_problem_60b8c590.zip

RS Renjith Singh Rajendran Syncfusion Team January 28, 2021 01:03 PM UTC

Hi veymar, 

Thanks for your update. 

We have analyzed the shared gif files. We tried this scenario with the shared codes in .Net 5 application, we could not face this lag(as shown in gif) in SfProgressBar with our application. We are attaching the sample for your reference, please download the sample from the link below, 

Query : when the data loads rapidly ProgressBar only is shown frozen and then disappears when the data loads. 
You can hide the Progress bar after loading data by applying below style for the SfProgressBar based on the OnActionComplete event of Grid. Please refer and use the codes below, 

 
<SfProgressBar ID="ProgressBar" ...> ... </SfProgressBar> 
 
<GridEvents ... OnActionComplete="OnActionComplete" Created="Created" TValue="Order"></GridEvents>
 
@if(HideProgress) {    <style>        #ProgressBar {            display:none;        }    </style>} public bool GridInitialRender { get; set; }public void OnActionComplete(ActionEventArgs<Order> args){    if (args.RequestType.Equals(Action.Refresh) && GridInitialRender)    {        HideProgress = true;        GridInitialRender = false    }}public async Task Created(){    GridInitialRender = true;}

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


VM veymar montano colque January 29, 2021 03:52 PM UTC

Hi Renjith,

Thanks so much for your answer, I think I can test the project with .Net 5, maybe this can solve the problem. However, currently in my work we are using .Net 3.1.

Additionally, I'm faccing with another issue that seems to be on SyncFusion.

Description: The size of the progress bar is not correct. As it is shown in the gifs, when the variable to show the progress bar is set to "false" and then set to true, the progress-bar will be shown smaller and won't place the correct width (LoaderIndicatorWrongSize.zip). However when that variable is set to "true" the progress-bar has it's normal size (LoaderIndicatorRightSize.zip). 

Tools:
- Blazor webassembly.
- .Net 3.1

Steps:
- Put the ProgressBar into a div that have a class will show or not the div. 
          <div class=@(ShowProgressBar? "": "d-none")>
               <SfProgressBar...
          ...
- In the @code section set the ShowProgressBar to false;

- Create a button to show and hide progress bar:  <button @onclick="(() => ShowProgressBar = !ShowProgressBar)" >set visible</button>

- Notice that if the "ShowProgressBar" variable is set to false, when clicking the button the progress-bar is shown but with a shorter width.

- However, if the "ShowProgressBar" variable is set to true, the progress-bar will place the correct width

Attachment: gifs_d664c0d4.zip

VM veymar montano colque January 29, 2021 03:59 PM UTC

Please also you can refer to the compressed project.

Attachment: ProgressBarProblem_f0137674.zip

DG Durga Gopalakrishnan Syncfusion Team February 2, 2021 03:27 PM UTC

Hi Veymar,

We have validated your reported scenario. We have considered this as a bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is expected to be rolled out on 23rd February 2021. We appreciate your patience until then. You can keep track of the bug from the feedback portal below.


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards,
Durga G


DG Durga Gopalakrishnan Syncfusion Team February 24, 2021 03:51 PM UTC

Hi Veymar,

Sorry for inconvenience. We are working for reported issue and we will include this fix in our upcoming Volume 1 Main Release which is expected to be rolled out at end of March 2021. We appreciate your patience until then.

Regards,
Durga G


DG Durga Gopalakrishnan Syncfusion Team April 5, 2021 10:36 AM UTC

Hi Veymar, 

We are glad to announce that our Essential Studio 2021 Volume 1 Main release v19.1.0.54 is rolled out and is available for download under the following link. 


Screenshot : 

 


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G 


Marked as answer
Loader.
Up arrow icon