Custom Grid Component Example

[Francois]

Hi,

I am using Blazor WebAssembly 19.3.0.48 and I tried the custom grid component example.

However, I can’t get it to work. I have the following error: “Unhandled exception rendering component: Value cannot be null. (Parameter 'source')”.

1) Can you provide me with an example of custom grid component for WebAssembly?

2) Can I override a fragment of the custom grid component?

For instance, override GridPageSettings of CustomGrid.razor in Index.razor like this:

@* CustomGrid.razor *@

<SfGrid TValue="TValue" AllowSorting="AllowSorting" AllowPaging="AllowPaging" @attributes="props">

    @* Default GridPageSettings. *@

    <GridPageSettings PageCount="2" PageSize="5" />

    @ChildContent

</SfGrid>

@* Index.razor *@

<CustomGrid DataSource="Orders" TValue="Order">

    @* Override GridPageSettings. *@

    <GridPageSettings PageCount="5" PageSize="10" />

</CustomGrid>

Thanks for your help.

Best regards.

François

[Rahul Narayanasamy]

Hi Francois, 

Greetings from Syncfusion. 

Query: “Custom Grid Component Example - I have the following error: “Unhandled exception rendering component: Value cannot be null. (Parameter 'source')” 

   

We have analyzed the reported query and we are able to reproduce the reported issue at our end also. We have confirmed the reported query as an issue and logged the defect report “Exception is thrown when rendering the Grid as a custom component using SfGrid class” for the same. Thank you for taking the time to report this issue and helping us improve our product. Fix for the defect will be included in our weekly release which is expected to be rolled out by mid of November 2021. We will update you once the release is rolled out.       

          

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.          

      

https://www.syncfusion.com/feedback/30043/exception-is-thrown-when-rendering-the-grid-as-a-custom-component-using-sfgrid 

   

Till then we appreciate your patience.    

   

Query:  Can I override a fragment of the custom grid component? - For instance, override GridPageSettings of CustomGrid.razor in Index.razor like this: 

 

We have validated your query and you can achieve your requirement by using below way. We have introduced a parameter value to achieved this requirement. Find the below code snippets for your reference. 

 

You can check this case after the above fix is included in our upcoming patch release. 

 

[Index.razor] 

<CustomGrid DataSource="Orders" TValue="Order" IsOverridePageSettgings="true"> 

    <GridPageSettings PageCount="5" PageSize="10" /> 

</CustomGrid> 

[CustomGrid.razor] 

 

<SfGrid TValue="TValue" AllowSorting="AllowSorting" AllowPaging="AllowPaging" @attributes="props"> 

    @ChildContent 

    @if (!IsOverridePageSettgings) 

    { 

        <GridPageSettings PageCount="PAGE_COUNT" PageSize="DEFAULT_PAGE_SIZE" PageSizes="PageSizes"></GridPageSettings> 

    } 

</SfGrid> 

[CustomGrid.razor.cs] 

public partial class CustomGrid<TValue> : SfGrid<TValue> 

    { 

        public const int PAGE_COUNT = 2; 

        public const int DEFAULT_PAGE_SIZE = 5; 

        [Parameter] 

        public bool IsOverridePageSettgings { get; set; } 

        public string[] PageSizes = new string[] { "5","10", "20", "50" }; 

        . . . 

    } 

 

Please let us know if you have any concerns. 

 

Regards,   

Rahul  

[Francois]

Hi Rahul,

Thanks for your answer.

I updated with the last Syncfusion NuGet and the custom grid component works.

Regarding my second query, I tested both my solution and yours (see CustomGrid1 and CustomGrid2 in my attached example). Both solutions work.

Is there a recommended solution? And why is it recommended?

Thanks again.

Best Regards.

François

Attachment: BlazorApp1_4bd58bab.zip

[Rahul Narayanasamy]

Hi Francois, 

 

Thanks for the update. 

 

We have checked your query and you can use any of the mentioned way to achieve the mentioned requirement. It was just an alternate way to achieve the requirement. You can use any one of the solution you want. 

 

Please let us know if you have any concerns. 

 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Francois,  

 

We are glad to announce that, we have resolved the reported issue in our latest release(19.3.0.54).  So please upgrade to our latest (19.3.0.55) or minimum of 19.3.0.54 version of Syncfusion NuGet package to resolve the reported issue. Please find the Nuget package and release notes for latest fixes and features from below.  

 

Nuget : https://www.nuget.org/packages/Syncfusion.Blazor/  

 

Release notes: https://blazor.syncfusion.com/documentation/release-notes/19.3.54?type=all#grid 

 

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.   

 

Query: I updated with the last Syncfusion NuGet and the custom grid component works. - . .  Is there a recommended solution? And why is it recommended? 

 

Thanks for the update.  

 

We have checked your query and you can use any of the mentioned way to achieve the mentioned requirement. It was just an alternate way to achieve the requirement. You can use any one of the solution you want.  

 

Please let us know if you have any concerns. 

    

Regards,              

Rahul