Custom Grid Column Component Rendered 2 times (How to prevent that)

[Thanh Ha]

Hi team,

I have created a class CustomGridColumn that inherits from class GridColumn. Look like this:

:

When i assigned it from parent, something like this, It rendered 2 times, so it double the number of columns.

My queries:

- How to prevent rendered 2 times ?.

Could you please supply a sample for this? Thanks so much.

Regards.

Thanh Ha

[Renjith Singh Rajendran]

Hi Tanh,

Greetings from Syncfusion support.

We have prepared a sample based on this scenario, please download and refer the sample attached in this ticket. We suggest you to define custom GridColumn as like below codes,

 

[CustomGridColumn.razor]

 

@using Syncfusion.Blazor.Grids

@using static ServerApp.Pages.Index

 

@inherits GridColumn

 

    <CascadingValue Value="@this">

        @ChildContent

    </CascadingValue>

 

@code{

    [Parameter]

    public bool ShowTemplateCol { get; set; }

    protected override void OnInitialized()

    {

        if (this.ShowTemplateCol)

        {

            this.HeaderText = "Template CustomerID";

            this.Template = TemplateCol;

        }

    }

    RenderFragment<object> TemplateCol = (value) =>

    {

        return b =>

        {

            b.AddContent(0,

                @<div>Template Column : @((value as Order).CustomerID)</div>

            );

        };

    };

}

 

Please get back to us if you need further assistance.

Regards,

Renjith R

Attachment: ServerApp_3eebef5a.zip

[Thanh Ha]

Hi Renjith Singh Rajendran ,

Thank you for the example, this covers the requirement.

I have  some more questions,

1- Is it possible to do the same for SfGrid ?

I have followed the instructions on your website custom grid component: 

https://blazor.syncfusion.com/documentation/datagrid/how-to/create-custom-grid-component

In the parent page, 

- ​Did i have to call ref (SfGrid) like this from child to get the data or using some functions of SfGrid ?

- Is there a way that map fuctions from ref(SfGrid) to ref(GiosGrid)?

Kind regards,

Thanh Ha

[Thanh Ha]

Example

[Renjith Singh Rajendran]

Hi Thanh,

We have prepared a sample based on this scenario. Please download and refer the sample attached in this ticket.

You can define custom methods for the CustomGrid and call Grid’s inbuilt methods as like the below code,

[Index.razor]

 

<CustomGrid @ref="m_sfCustomGrid" DataSource="Orders" TValue="Order"></CustomGrid>

 

    private CustomGrid<Order> m_sfCustomGrid;

    public async Task OnClick()

    {

        await m_sfCustomGrid.CustomAutoFitColumnsAsync();

    }

 

[CustomGrid.razor.cs]

 

        public async Task CustomAutoFitColumnsAsync()

        {

            await this.GridRef.AutoFitColumnsAsync();

        }

 

Please refer the above suggestions and sample and check this from your side. Please get back to us if you need further assistance.

Regards,

Renjith R

Attachment: ServerApp_ace7e8b.zip

[Thanh Ha]

Hi Renjith Singh Rajendran ,

Thanks you for the example.

So I had to do the mapping manually like that. Even though it's not what I want. 

I don't want my custom grid can "." and show the method that i can't use. 

Thanks you very much again, i will try to find another solutions.

Regard,

Thanh Ha

[Vignesh Natarajan]

Hi Thanh Ha,

Thanks for the update.

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan