JavaScript Error on creation of RenderFragment

[Judi Smith]

Hello,

I have set up a Blazor playground to demonstrate the requirement and the issue.

I am creating an override of SfCheckBox to return both the checked state and the Id of the dynamically created SfGrid where it is displayed.

My requirement is to have a CheckBox—ideally in the Ranks grid toolbar—that filters based on the Ranks' IsArchived property.

However, as written, the checkbox does not display, and I get a JavaScript error.

I have prepared the following playground to demonstrate the issue:

https://blazorplayground.syncfusion.com/embed/hNhzXeVcPXlqcShM?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Prathap Senthil]

Hi Judi ,

Based on the reported problem, there is a mistake in the usage of the @onchange attribute within the CreateCheckBox method. The issue arises because @onchange is not recognized as a valid attribute name. Instead, you should use the onchange attribute directly, without the @ symbol.

private RenderFragment CreateCheckBox(string rankGridId) => builder =>

{

     builder.OpenComponent<SfCheckBox<bool>>(0);

     builder.AddAttribute(1, "Label", "Show Archived Ranks");

     builder.AddAttribute(2, "bind-Checked", isChecked);

     builder.AddAttribute(3, "onchange", EventCallback.Factory.Create(this, args => HandleCheckboxChange(args, _ranksGrid[rankGridId])));

     builder.CloseComponent();

};

Modified sample:https://blazorplayground.syncfusion.com/embed/VtLTDyLFsPWjkRcb?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil

[Judi Smith]

Hi Prathap, that fixed the rendering issue. Thank you.

My next question is, how do I get a reference to the dynamically generated Grid to store in the Dictionary so that I can identify which checkbox was checked and apply the filter to that particular Grid?

It appears that neither the Created nor OnLoad events return any argument. The OnDataBound event returns a Rank but I cannot access the internal Parent property.

So, is there a way to get a reference to the Grid that contains the SfCheckbox in the toolbar that was checked?

Kind regards,

Judi Smith

[Prathap Senthil]

Based on your requirement We suggest to using the below highlighted solution to achieve your requirement. Kindly check the below attached sample and code snippet for your reference.

 

<SfGrid DataSource="@_programs">

    <GridTemplates>

        <DetailTemplate>

            @{

                var program = (context as Programs);

                _currentProgram = program.Id;

 

                var rankGridId = "RanksGrid" + program.Id.ToString();

 

                <SfGrid @ref="_ranksGrid[rankGridId]" DataSource="@_ranks" Query="@(new Query().Where("ProgramId", "equal", _currentProgram))" AllowFiltering="true"

                        Toolbar="@(new List<object>(){"Add", "Edit", new ItemModel(){Text="Archive", TooltipText="Archive Rank", PrefixIcon="e-folder", Id = "Archive"},

                                new ItemModel(){Text="Reorder Ranks", TooltipText = "Reorder Ranks", PrefixIcon = "e-line-spacing", Id = "Reorder"},

                                #pragma warning disable BL0005

                                     new Syncfusion.Blazor.Navigations.ToolbarItem() { Template = (context) => CreateCheckBox(rankGridId)(context), Id = "Archive" + program.Id.ToString(), TooltipText = "Show archived ranks", Align = ItemAlign.Right,},

                                #pragma warning restore BL0005

                                     "Search"})">

                    <GridEvents TValue="Ranks" Created="@(args => AssignGridReference(_ranksGrid[rankGridId], rankGridId))"></GridEvents>

                </SfGrid>

            }

        </DetailTemplate>

    </GridTemplates>

</SfGrid>

 

@code {

    int _currentProgram;

    bool isChecked = false;

    List<Programs> _programs = new();

    List<Ranks> _ranks = new();

 

    private Dictionary<string, SfGrid<Ranks>> _ranksGrid = new();

 

    private RenderFragment CreateCheckBox(string rankGridId) => builder =>

    {

        builder.OpenComponent<SfCheckBox<bool>>(0);

        builder.AddAttribute(1, "Label", "Show Archived Ranks");

        builder.AddAttribute(2, "bind-Checked", isChecked);

        builder.AddAttribute(3, "onchange", EventCallback.Factory.Create(this, args=>  HandleCheckboxChange(args, rankGridId)));

        builder.CloseComponent();

    };

 

    private async Task HandleCheckboxChange(Microsoft.AspNetCore.Components.ChangeEventArgs args, string rankGridId)

    {

        await _ranksGrid[rankGridId].FilterByColumnAsync("IsArchived", "equal", args.Value);

    }

 

   

 

    private void AssignGridReference(SfGrid<Ranks> grid, string rankGridId)

    {

        _ranksGrid[rankGridId] = grid;

    }

}

 

Sample: https://blazorplayground.syncfusion.com/embed/BtLfDSrYresALtqQ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5