EditTemplate does not display on first time, and value not saved

[Brice FROMENTIN]

Hello,

When I click for the first time on a cell, the edit template dies not display and my cell is empty.

On another side, the value transmitted on OnCellSave is not saved.

Here is my page :

@page "/counter"

@using Newtonsoft.Json

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Grids;

<SfGrid @ref="grid" TValue="CollectiviteTypeOperation" datasource="@datasource"

        AllowSorting="true" AllowResizing=true EnableAltRow="true"

        Width="100%" Height="100%">

    <GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings>

    <GridEditSettings AllowEditing="true" Mode="EditMode.Batch" AllowEditOnDblClick="false"></GridEditSettings>

    <GridEvents OnCellEdit="OnCellEdit" OnCellSave="OnCellSave" CellSelected="CellSelectHandler" TValue="CollectiviteTypeOperation"></GridEvents>

    <GridColumns>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.Nature)" AllowEditing="false" Width="100px">

            <Template>

                @if (((CollectiviteTypeOperation)context).Nature == "D")

                {

                    <span>Dépenses</span>

                }

                else

                {

                    <span>Recettes </span>

                }

            </Template>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.Libelle)" AllowEditing="false" Width="100%"></GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.RevalorisationAutomatique)" Width="105px" DisplayAsCheckBox="true" TextAlign="@TextAlign.Center">

            <EditTemplate>

                <SfCheckBox CheckedChanged="OnCheckedChanged" Checked="@(!(((CollectiviteTypeOperation)context).RevalorisationAutomatique))" />

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.PresenceTypeRevalorisation)" Width="150px" DisplayAsCheckBox="true" TextAlign="@TextAlign.Center">

            <EditTemplate>

                <SfCheckBox CheckedChanged="OnCheckedChanged" Checked="@(!(((CollectiviteTypeOperation)context).PresenceTypeRevalorisation))" />

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.PourcentageMaxDepassement)" Width="150px" TextAlign="@TextAlign.Right" EditType="@EditType.NumericEdit"></GridColumn>

        <GridColumn Field="@nameof(CollectiviteTypeOperation.MontantMaxDepassement)" Width="150px" TextAlign="@TextAlign.Right" EditType="@EditType.NumericEdit"></GridColumn>

    </GridColumns>

</SfGrid>

@code

{

    public partial class CollectiviteTypeOperation

    {

        public Guid IdCollectivite { get; set; }

        public Guid IdTypeOperation { get; set; }

        public string Libelle { get; set; }

        public string Nature { get; set; }

        public decimal PourcentageMaxDepassement { get; set; }

        public decimal MontantMaxDepassement { get; set; }

        public bool PresenceTypeRevalorisation { get; set; }

        public bool RevalorisationAutomatique { get; set; }

    }

    private List<CollectiviteTypeOperation> datasource = JsonConvert.DeserializeObject<List<CollectiviteTypeOperation>>("[{'IdCollectivite':'185617f7-cc34-4733-a547-6eaa9d0b8b62','IdTypeOperation':'decababe-0001-0000-0300-000000000000','Libelle':'Engagement AP','Nature':'D','PourcentageMaxDepassement':0.00,'MontantMaxDepassement':0.00,'PresenceTypeRevalorisation':false,'RevalorisationAutomatique':false,'Collectivite':null,'TypeOperation':null},{'IdCollectivite':'185617f7-cc34-4733-a547-6eaa9d0b8b62','IdTypeOperation':'decababe-0002-0000-0300-000000000000','Libelle':'Engagement AP','Nature':'R','PourcentageMaxDepassement':0.00,'MontantMaxDepassement':0.00,'PresenceTypeRevalorisation':false,'RevalorisationAutomatique':false,'Collectivite':null,'TypeOperation':null},{'IdCollectivite':'185617f7-cc34-4733-a547-6eaa9d0b8b62','IdTypeOperation':'decababe-0001-0000-0500-000000000000','Libelle':'Engagement CP','Nature':'D','PourcentageMaxDepassement':0.00,'MontantMaxDepassement':0.00,'PresenceTypeRevalorisation':false,'RevalorisationAutomatique':false,'Collectivite':null,'TypeOperation':null},{'IdCollectivite':'185617f7-cc34-4733-a547-6eaa9d0b8b62','IdTypeOperation':'decababe-0002-0000-0500-000000000000','Libelle':'Engagement CP','Nature':'R','PourcentageMaxDepassement':0.00,'MontantMaxDepassement':0.00,'PresenceTypeRevalorisation':false,'RevalorisationAutomatique':false,'Collectivite':null,'TypeOperation':null}]");

    public bool CheckboxChecked;

    public static SfGrid<CollectiviteTypeOperation> grid { get; set; }

    public async void CellSelectHandler(CellSelectEventArgs<CollectiviteTypeOperation> args)

    {

        var indexes = JsonConvert.DeserializeObject<Dictionary<string, object>>(args.CellIndex.ToString());

        var editRowIndex = Convert.ToInt32(indexes["rowIndex"]);

        var editCellIndex = Convert.ToInt32(indexes["cellIndex"]);

        var fieldNames = await grid.GetColumnFieldNames();

        var columns = await grid.GetColumns();

        if (columns[editCellIndex].DisplayAsCheckBox)

        {

            await grid.EditCell(editRowIndex, fieldNames[editCellIndex]);

        }

    }

    public async void OnCellEdit(CellEditArgs<CollectiviteTypeOperation> args)

    {

        var index = (int)await grid.GetColumnIndexByField(args.ColumnName);

        var columns = await grid.GetColumns();

        if (columns[index].DisplayAsCheckBox)

        {

            CheckboxChecked = !Convert.ToBoolean(args.Value);

        }

    }

    public async void OnCellSave(CellSaveArgs<CollectiviteTypeOperation> args)

    {

        var index = (int)await grid.GetColumnIndexByField(args.ColumnName);

        var columns = await grid.GetColumns();

        if (columns[index].DisplayAsCheckBox)

        {

            args.Value = CheckboxChecked.ToString();

        }

    }

    public void OnCheckedChanged(bool args)

    {

        CheckboxChecked = args;

    }

}

Regards,

Brice.

[Rahul Narayanasamy]

Hi Brice, 

Greetings from Syncfusion. 

 

Query: EditTemplate does not display on first time, and value not saved 

We have validated your query and checked the reported problem. You have not provided ID property for SfCheckBox and you need to change the DataSource property instead of datasource. You need to provide the ID property to SfCheckbox as the corresponding Boolean column Field name. Find the below code snippets and sample for your reference. 

 

@using Newtonsoft.Json 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Grids; 

 

<SfGrid @ref="grid" TValue="CollectiviteTypeOperation" DataSource="@datasource"  //change DataSource property instead of dataSource  

        AllowSorting="true" AllowResizing=true EnableAltRow="true" 

        Width="100%" Height="100%"> 

    <GridEditSettings AllowEditing="true" Mode="EditMode.Batch" AllowEditOnDblClick="true"></GridEditSettings> 

    <GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings> 

    <GridEvents CellSelected="CellSelectHandler" OnCellEdit="OnCellEdit" OnCellSave="OnCellSave" TValue="CollectiviteTypeOperation" /> 

    <GridColumns> 

        . . . 

       <GridColumn Field="@nameof(CollectiviteTypeOperation.RevalorisationAutomatique)" Width="105px" DisplayAsCheckBox="true" TextAlign="@TextAlign.Center"> 

            <EditTemplate> 

                <SfCheckBox ID="RevalorisationAutomatique" @bind-Checked=@CheckboxChecked />  //should be provide ID property as Field property. 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field="@nameof(CollectiviteTypeOperation.PresenceTypeRevalorisation)" Width="150px" DisplayAsCheckBox="true" TextAlign="@TextAlign.Center"> 

            <EditTemplate> 

                <SfCheckBox ID="PresenceTypeRevalorisation" @bind-Checked=@CheckboxChecked2></SfCheckBox>  //should be provide ID property as Field property. 

            </EditTemplate> 

        </GridColumn> 

        . . . 

   </GridColumns> 

</SfGrid> 

 

 

@code { 

 

    . . . 

 

} 

We have already explained the same cases in your previous thread also.  

Reference: https://www.syncfusion.com/forums/154132/triple-click-to-edit-a-checkbox-column 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppCheckBx1169450940  

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Brice FROMENTIN]

Thanks for your help.

[Vignesh Natarajan]

Hi Brice,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution. 

Kindly get back to us if you have any other queries.  

Regards, 

Vignesh Natarajan