Checkbox are removed from cell when mixing Template with EditTemplate

[Jan Haugut]

Hello,

I'm struggling right now adding a Tooltip to a Grid column. I simply want to  add a Tooltip to all cells of a column which has an EditTemplate. But when I add the Tooltip withing the Template component, my Checkboxes are gone, as you can see in this picture:

... and here is a picture where the Checkboxes are shown correctly (Template component removed from code):

The EditTemplate is a must. The Checkboxes are shown correctly when removing the Template component.

So, how can I add Tooltips to my Checkbox cells and keep the EditTemplate? 

Here is my code:


<SfGrid TValue="EditModel" DataSource="_userEditModels" @ref="_userDataGrid" AllowSorting="true" AllowSelection="true" AllowReordering="false" AllowExcelExport="true" Toolbar="_toolBarItemsUserGrid">
<GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings>
<GridPageSettings PageSize="4"></GridPageSettings>
<GridEvents OnBatchSave="UserGridOnBatchSaveHandler" CellSelected="UserGridCellSelectHandler" QueryCellInfo="UserGridCustomizeCell" OnToolbarClick="UserGridToolbarClickHandler" TValue="EditModel"></GridEvents>
<GridEditSettings AllowEditing="@IsUserGridEditable" Mode="EditMode.Batch" ShowConfirmDialog="false"></GridEditSettings>
<GridColumns>
<GridColumn Field="@nameof(EditModel.IsBillable)" HeaderText="@_localizer["EditModel_IsBillable"]" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center" DisplayAsCheckBox="true" AllowEditing="true">
<Template>
@{
var model = (EditModel)context;
if (model != null && !string.IsNullOrWhiteSpace(model.ChangedByUsername))
{
<SfTooltip Target="#changedByUsernameDiv">
<TooltipTemplates>
<Content>
@model.ChangedByUsername
</Content>
</TooltipTemplates>
<div id="changedByUsernameDiv">
Manually changed by user: @model.ChangedByUsername
</div>
</SfTooltip>
}
}
</Template>
<EditTemplate>
<SfCheckBox TChecked="bool" @bind-Checked="@(((EditModel)context).IsBillable)" ValueChange="@OnValueChanged"></SfCheckBox>
</EditTemplate>
</GridColumn>
</GridColumns>
</SfGrid>


<style>
.e-rowcell.type-green {
color: #696969 !important; /*override color*/
}


.e-rowcell.type-yellow {
color: #2B78E4 !important; /*override color*/
}


.e-rowcell.type-red {
color: #009E0F !important; /*override color*/
}
</style>

private async Task OnValueChanged()
{
    await _userDataGrid.SaveCellAsync();
}

private async Task UserGridCellSelectHandler()
{
    //get selected cell index
    var cellIndexes = await _userDataGrid.GetSelectedRowCellIndexes();


    //get the row and cell index
    var currentEditRowIndex = cellIndexes[0].Item1;
    var currentEditCellIndex = (int)cellIndexes[0].Item2;

    //get the available fields
    var fields = await _userDataGrid.GetColumnFieldNames();
    // edit the selected cell using the cell index and column name

    await _userDataGrid.EditCell(currentEditRowIndex, fields[currentEditCellIndex]);
}

private void UserGridCustomizeCell(QueryCellInfoEventArgs<EditModel> args)
{
    if (args.Column.Field != nameof(EditModel.BillingUserType))
        return;

    switch (args.Data.BillingUserType)
    {
        case "Green":
            args.Cell.AddClass(new[] { "type-green" });
            break;
        case "Yellow":
            args.Cell.AddClass(new[] { "type-yellow" });
            break;
        case "Red":
            args.Cell.AddClass(new[] { "type-red" });
            break;
    }
}

I appreciate your help!  

[Renjith Singh Rajendran]

Hi Jan, 

Greetings from Syncfusion support. 

We would like to inform you that when using Template for a GridColumn, then only the contents provided inside the Template will be displayed in the particular GridColumn. As there is only tooltip defined inside Template, the Checkbox is missing. So based on this scenario, we suggest you to render a SfCheckBox also inside the Template content along with Tooltip to display checkbox inside the GridColumn. 

Please refer and use as like the code below, 

 

<GridColumn Field="@nameof(EditModel.IsBillable)" HeaderText="EditModel_IsBillable" ...> 

    <Template> 

    @{ 

        var model = (EditModel)context; 

        <SfCheckBox TChecked="bool" @bind-Checked="@(((EditModel)context).IsBillable)"></SfCheckBox> 

        if (model != null && !string.IsNullOrWhiteSpace(model.ChangedByUsername)) 

        { 

        <SfTooltip Target="#changedByUsernameDiv"> 

            <TooltipTemplates> 

            <Content> 

                @model.ChangedByUsername 

            </Content> 

            </TooltipTemplates> 

            <div id="changedByUsernameDiv"> 

            Manually changed by user: @model.ChangedByUsername 

            </div> 

        </SfTooltip> 

        } 

    } 

    </Template> 

    ... 

</GridColumn> 

References :  

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

https://blazor.syncfusion.com/documentation/datagrid/templates 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Jan Haugut]

Hi and thank you for reply.

Your hint using both Tooltip and CheckBox within the Template is what I needed. Since the text of the Tooltip is also shown in the Cell and not only in the Tooltip, I have to try some ways to accomplish to just show the Tooltip as expected. But now I know where to start.

Thanks again and have a great day.

Best regards

Jan

[Renjith Singh Rajendran]

Hi Jan, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 

Renjith R