GridColumn --> HeaderTemplate is not working in SyncFusion.Blazor 18.1.0.48

I am using SyncFusion.Blazor v18.1.0.48

I have the following defined in my grid;

    <GridColumn Field=@nameof(OrderLineItem.Quantity) Width="75" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">
        <HeaderTemplate>
            <div>
                <button class="btn btn-link btn-sm" @onclick="ShowSelectSuppliesHelpDialog">
                    <i class="fa fas-question-circle"></i> Qty
                </button>
            </div>
        </HeaderTemplate>

When I run the code, the column header is blank and there are no errors in Chrome debugging tools.

I have a <Template></Template> in another GridColumn of the same grid and that template for the cell is working just fine. I am just not getting anything to display from the HeaderTemplate.

Even when I just copy and paste from the example here: https://blazor.syncfusion.com/demos/datagrid/header-template/

    <GridColumn Field=@nameof(OrderLineItem.Quantity) Width="75" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">
        <HeaderTemplate>
            <div>
                <span class="e-icon-userlogin e-icons employee"></span> Employee ID
            </div>
        </HeaderTemplate>
    </GridColumn>


It doesn't show.


3 Replies

DA David Adler May 7, 2020 08:51 PM UTC

For reference, here is the <Template></Template> that is correctly working for another column in the same grid.

    <GridColumn HeaderText="" Width="150" AllowEditing="false">
        <Template>
            @{
                var lineItem = (context as OrderLineItem);
            }
            <button class="btn btn-outline-primary btn-sm" type="button" title="Increase qty by 1"
                    @onclick="@(_ => { if (context != null) HandleQtyIncrease(lineItem);})">
                <span class="fas fa-plus"></span>
            </button>
            <button class="btn btn-outline-primary btn-sm" type="button" title="Decrease qty by 1"
                    @onclick="@(_ => { if (context != null) HandleQtyDecrease(lineItem);})">
                <span class="fas fa-minus"></span>
            </button>
            @if (lineItem.Quantity > 0)
            {
                <button class="btn btn-outline-danger btn-sm" type="button" title="Reset qty to 0"
                        @onclick="@(_ => { if (context != null) HandleQtyClear(lineItem);})">
                    <span class="fas fa-times"></span>
                </button>
            }
        </Template>
    </GridColumn>



DA David Adler May 7, 2020 09:57 PM UTC

I am attaching two screenshots. 

Screenshot1 - The grid with no header text in the Qty column
Screenshot2 - The grid after I clicked on the + button to increase the qty of a row by 1. Not that you can see part of the Qty test in the column header and it is a clickable link. 

I am wondering if there is a conflict with the <Template> used in the first column to display the custom buttons and the <HeaderTemplate> in the Quantity column to display the link header text and icon.

Is there a problem with having both types of  column templates in a single grid, even though they are in different columns?

 

Attachment: SyncFusion_Screenshots_169dfddb.zip


RS Renjith Singh Rajendran Syncfusion Team May 8, 2020 10:45 AM UTC

Hi David, 

Greetings from Syncfusion support. 

We have confirmed this as a defect and logged a defect report for the same. Thank you for taking the time to report this issue “Template is not rendered during the initial load” and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming patch release which is expected to be rolled out in the month of May 2020.   

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.   

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon