Treegrid displays no data

[David]

Good Day. Hope you can help. I have a razor component that fetches data from an API returning a list. If I feed the data to a grid it works perfectly but not a Tree Grid. For testing, I put both on one component. I include a screenshot. As you can see the tree grid is on top and it reports 'No records to display. The grid shows 18 records from the same data source. The code is below

 

 

 

@page "/EvaluationResultSBC"

 

@inject HttpClient http

@inject NavigationManager navigationManager

 

@using Syncfusion.Blazor.TreeGrid

 

@attribute [Authorize]

 

 

<h5>Evaluation Results</h5>

 

@if (RecordList == null) // || EvaluationResultList == null)

{

    <p>Loading...</p>

    <SfProgressBar Type="ProgressType.Linear" Value="20" Height="60" IsIndeterminate="true" Minimum="0" Maximum="100">

    </SfProgressBar>

}

else

{

    <p>@RecordList.Count.ToString() </p>

 

    <SfTreeGrid DataSource="@RecordList" IdMapping=@nameof(EvaluationResultMdl.EvaluationResultGUIDfld) ParentIdMapping=@nameof(EvaluationResultMdl.ParentGUIDfld) >

 

        <TreeGridColumns>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.EvaluationResultGUIDfld) IsPrimaryKey="true" HeaderText="EvaluationResultGUIDfld" Width="180" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Visible="false"></TreeGridColumn>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.ParentGUIDfld) HeaderText="EvaluationResultGUIDfld" Width="180" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Visible="false"></TreeGridColumn>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.EvaluationItemNamefld) IsIdentity="true" HeaderText="Evaluation Item" Width="35%" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></TreeGridColumn>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.IsInOrderfld) IsIdentity="true" HeaderText="InOrder" Width="10%" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" EditType="EditType.BooleanEdit"></TreeGridColumn>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.Scorefld) IsIdentity="true" HeaderText="Score" Width="10%" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" EditType="EditType.NumericEdit"></TreeGridColumn>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.ObservedResultfld) IsIdentity="true" HeaderText="Observed Result" Width="40%" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></TreeGridColumn>

            <TreeGridColumn Field=@nameof(EvaluationResultMdl.NotApplicablefld) IsIdentity="true" HeaderText="N/A" Width="5%" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" EditType="EditType.BooleanEdit"></TreeGridColumn>

        </TreeGridColumns>

    </SfTreeGrid>

 

 

    <SfGrid TValue="EvaluationResultMdl" DataSource="RecordList"

            @ref="SyncfGrid"

            Toolbar=@ToolBarItems

            AllowSorting="true"

            AllowFiltering="true"

            AllowExcelExport="true"

            AllowPdfExport="true"

            AllowSelection="true">

 

        <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true"></GridEditSettings>

 

        <GridColumns>

            <GridColumn Field=@nameof(EvaluationResultMdl.EvaluationResultGUIDfld) HeaderText="EvaluationResultGUIDfld" Width="30%" IsPrimaryKey="true" TextAlign="TextAlign.Right" Visible="false"></GridColumn>

            <GridColumn Field=@nameof(EvaluationResultMdl.ParentGUIDfld) HeaderText="ParentGUIDfld" Width="30%" TextAlign="TextAlign.Right" Visible="false"></GridColumn>

            <GridColumn Field=@nameof(EvaluationResultMdl.EvaluationItemNamefld) HeaderText="Evaluation Item" Width="30%" AllowSorting="true" AllowEditing="true" EditType="EditType.DefaultEdit ">></GridColumn>

            <GridColumn Field=@nameof(EvaluationResultMdl.IsInOrderfld) HeaderText="In Order" Width="15%" AllowSorting="true" AllowEditing="true" Type="ColumnType.CheckBox">></GridColumn>

            <GridColumn Field=@nameof(EvaluationResultMdl.Scorefld) HeaderText="Score" Width="10%" AllowSorting="true" AllowEditing="true" EditType="EditType.NumericEdit">></GridColumn>

            <GridColumn Field=@nameof(EvaluationResultMdl.ObservedResultfld) HeaderText="Observations" Width="40%" AllowSorting="true" AllowEditing="true" EditType="EditType.DefaultEdit ">></GridColumn>

            <GridColumn Field=@nameof(EvaluationResultMdl.NotApplicablefld) HeaderText="N/A" Width="5%" AllowSorting="true" AllowEditing="true" Type="ColumnType.CheckBox">></GridColumn>

        </GridColumns>

 

    </SfGrid>

 

 

}

 

@code {

 

    public List<EvaluationResultMdl> RecordList { get; set; }

    public IEnumerable<EvaluationResultMdl> IE_EvaluationResults { get; set; }

 

    public SfTreeGrid<EvaluationResultMdl> SyncSfTreeGrid;

    public SfGrid<EvaluationResultMdl> SyncfGrid;

 

    public string ErrorDetails = "";

    public string recCount;

    public string[] ToolBarItems = (new string[] { "Add", "Edit", "Update", "Delete", "Search", "Print", "ExcelExport", "PdfExprint" });

 

    string SearchName = "";

    string ErrorMessage = "";

 

    protected override async Task OnInitializedAsync()

    {

 

#if DEBUG

        await Task.Delay(5000);

#endif

        try

        {

            this.IE_EvaluationResults = await http.GetFromJsonAsync<EvaluationResultMdl[]>("/api/EvaluationResults");

        }

        catch (AccessTokenNotAvailableException exception)

        {

            exception.Redirect();

        }

 

 

 

        this.RecordList = new List<EvaluationResultMdl>();

        this.RecordList = this.IE_EvaluationResults.ToList<EvaluationResultMdl>();

    }

 

    private async Task ReloadData()

    {

        this.IE_EvaluationResults = await http.GetFromJsonAsync<EvaluationResultMdl[]>("/api/EvaluationResults");

 

        this.RecordList = this.IE_EvaluationResults.ToList<EvaluationResultMdl>();

    }

}

[Farveen Sulthana Thameeztheen Basha]

Hi David, 

Thanks for contacting Syncfusion Support. 

 

Query#- Treegrid displays no data 

We have checked your reported problem by preparing sample using your code example but we are unable to reproduce the issue at our end. Refer to the sample link:- 

https://www.syncfusion.com/downloads/support/forum/161612/ze/TreeGrid1329585762 

Screenshot:- 

 

Please ensure that you have bind dataSource for TreeGrid with Self-reference data(ParentIdMapping  to indicate the parentNodes) as like provided in sample. Refer to the documentation and demo Link for more information:- 

https://blazor.syncfusion.com/documentation/treegrid/data-binding/#self-referential-data-bindingflat-data 

https://blazor.syncfusion.com/demos/tree-grid/default-functionalities?theme=bootstrap4 

We need some more additional details to find the cause of the issue. Share us the following details. 

1. Share DataSource EvaluationResultMdl that you have bind to TreeGrid.
2. If possible replicate the issue in the above sample and revert us back.
3. Syncfusion NuGet package version details.
4. Share us the service link(that you have used  for binding data) to test at our end.

Regards, 

Farveen sulthana T 

[David]

Thanks for your reply. I got it to work now.

[Farveen Sulthana Thameeztheen Basha]

Hi David, 

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you. 

Regards, 

Farveen sulthana T 

[Frank]

What did you change? I am having the same issue. The only error I can see happening is an exception after the Spinner.dll is dynamically loaded.

[Farveen Sulthana Thameeztheen Basha]

Hi Frank, 

Thanks for contacting Syncfusion Support. 

Query#:-The only error I can see happening is an exception after the Spinner.dll is dynamically loaded. 

We have checked your query and if you have rendered TreeGrid with Self-reference Structure, ensure to add IdMapping field and ParentIdMapping fields as like explained in the documentation. 

Refer to the demo and Documentation Link:_ 

https://blazor.syncfusion.com/documentation/treegrid/data-binding/#self-referential-data-bindingflat-data 

https://blazor.syncfusion.com/demos/tree-grid/default-functionalities?theme=bootstrap4 

After following the above documentation still faced issue share us the following details. 

1. Complete TreeGrid code example.
2. Share us the Exception details that you have faced.
3. NuGet package version details.
4. Screenshot/Video demo to replicate the issue.
5. Can you please bind an actionFailure event to your TreeGrid and share us the args.error stacktrace.

 

Regards, 

Farveen sulthana T