Update Date Cell value based on Checkbox column checked/Unchecked

[Baba Goud Gadiga]

Hi team,

I have a grid with a Date Column and a checkbox column. My requirement is when the user edits or adds a new row and when user checks the Checkbox column my Date Column cell should be automatically updated to current date+ 2 weeks.

Below is my current Grid and its events.

<SfGrid DataSource="@CRATrackersList" ID="CRATrackerGrid" @ref="CRATrackerGrid" Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel" })" EnablePersistence="true">

            <GridEditSettings AllowAdding="@AllowEditing" AllowEditing="@AllowEditing"    AllowDeleting="@AllowEditing" ShowDeleteConfirmDialog="true" />

            <GridEvents OnActionBegin="@ActionBeginHandler" TValue="@CRATracker" OnToolbarClick="ToolbarClickHandler"  QueryCellInfo="CustomizeCell" OnActionComplete="ActionCompleteHandler" OnCellEdit="OnCellEdit"></GridEvents>

 <GridColumns>

<GridColumn IsPrimaryKey="true" Field=@nameof(CRATracker.CRAId) HeaderText="ID" Visible="false" AllowAdding="false"> </GridColumn>

 <GridColumn Field=@nameof(CRATracker.Description) HeaderText="Description"></GridColumn>

<GridColumn Field=@nameof(CRATracker.UnderWarrenty) HeaderText="Under Warranty" Type="ColumnType.Boolean" DisplayAsCheckBox="true" EditType="EditType.BooleanEdit" ></GridColumn>

<GridColumn Field=@nameof(CRATracker.TargetCompletion) HeaderText="Target Completion" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date"></GridColumn>

 </GridColumns>

</sfGrid>

Now when the user edits or adds a new row, and when the user checks the UnderWaranty checkbox in the column, the TargetCompletion column should be automatically updated to a future date say + 2 weeks.

The UI should be updated accordingly and saved to database as well.

Please let me know what events are needed to achieve this. I already tried the below event and it does not get fired.

 private async void OnCellEdit(CellEditArgs<CRATracker> args)

        {

                double RowIndex = await CRATrackerGrid.GetRowIndexByPrimaryKey(args.RowData.CRAId);

                bool cellvalue = args.Data.UnderWarrenty.HasValue ? args.Data.UnderWarrenty.Value:false;

                if(cellvalue)

                {

                    await CRATrackerGrid.UpdateCellAsync(RowIndex, "TargetCompletion", DateTime.Today.AddDays(14));

                }

                 }

[Monisha Saravanan]

Hi Baba,

Greetings from Syncfusion support.

We have analyzed your query and we suggest you to use the below ways to achieve your requirement. Here we have converted the OrderDate value in ActionBegin event. Kindly refer the attached code snippet and sample for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" AllowPaging="true"  Toolbar="@ToolbarItems">

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>

    <GridEvents  OnActionBegin=" ActionBegin" TValue="Order"></GridEvents>

    <GridColumns>

    </GridColumns>

</SfGrid>

 

@code {

    public List<Order> Orders { get; set; }

    SfGrid<Order> Grid;

    private List<string> ToolbarItems = new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" };

 

 

    public void ActionBegin (ActionEventArgs<Order> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

        {

            if (args.Data.verified)

            {

                args.RowData.OrderDate = DateTime.Now.AddDays(14);

            }

        }

 

    }

   

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1964836036.zip

Reference: https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin

Kindly get back to us if you have further queries.

Regards,

Monisha

[Baba Goud Gadiga]

Hello Monisha,

I am not able to run the sample project given you as it was built using .Net 6.0.

I am not sure If I was specific enough on my requirements. So I have a grid with multiple columns, of which I have a Boolean column(Under Warranty) which is displayed as a Checkbox and a Date column(Date Received).

Now in the edit mode, when the user checks the check box(Under Warranty column) then the Date Column(Date Received) column should be automatically updated with a future date of weeks.

For this, the UI should be updated with the new Date as well when the user hits on update button this should be saved back to DB.

Thanks,

Baba

[Monisha Saravanan]

Hi Baba,

Thanks for the update.

We have checked your reported query and modified the sample as per your requirement. Here we have used SfCheckbox in EditTemplate and modified the date values in value change event of checkbox. Kindly refer the attached code snippet and sample for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" AllowPaging="true"  Toolbar="@ToolbarItems">

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>

     <GridColumns>

 

         <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date">

               <EditTemplate>

                     @{

                      

                        <SfDatePicker @bind-Value="@((context as Order).OrderDate)" Format="d" TValue="DateTime?"></SfDatePicker>

                  

                }

               

               </EditTemplate>

         </GridColumn>

       

        <GridColumn Field=@nameof(Order.verified) HeaderText="Active" DisplayAsCheckBox="true" Width="150">

                        <EditTemplate>

                @{

                       

                        <SfCheckBox @bind-Checked="@((context as Order).verified)" ValueChange="@((args)=>OnChange(args, context as Order))" TChecked="bool"></SfCheckBox>

                  

                }

               

            </EditTemplate>

 

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

 

    public async Task OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args, Order orderdata)

    {       

       

        if (args.Checked ==  true)

        {

             Grid.PreventRender(false);

            orderdata.OrderDate = DateTime.Now.AddDays(14);

 

        }

       

    }

 

   

}

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

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#custom-editors-using-templatecell-edit-template

Kindly get back to us if you have further queries.

Regards,

Monisha

[Baba Goud Gadiga]

Hello Monisha,

Thank you for working on the sample. Currently I am using Mode as BatchMode. And due to this your code is not working as expected. I changed the BatchMode to Normal and it worked fine.

Is there anyway your logic can work of BatchMode edit type as well?

T

[Monisha Saravanan]

Hi Baba,

Thanks for the update.

We suspect that you need to modify date column value when changing the checkbox value using Batch edit. We suggest you to use UpdateCellAsync Method on checkbox change event. Kindly check the attached sample and code snippet for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" AllowPaging="true"  Toolbar="@ToolbarItems">

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

      <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code {

    public List<Order> Orders { get; set; }

    SfGrid<Order> Grid;

    private List<string> ToolbarItems = new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" };

 

    public async Task OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args, Order orderdata)

    {       

 

        if (args.Checked ==  true)

        {

            double RowIndex = await Grid.GetRowIndexByPrimaryKey(orderdata.OrderID);

            Grid.PreventRender(false);

            DateTime val = DateTime.Now.AddDays(14);

            await Grid.UpdateCellAsync(RowIndex, "OrderDate", val);

        }

 

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-1052583864.zip

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateCellAsync_System_Double_System_String_System_Object_

Kindly get back to us if you have further queries.

Regards,

Monisha

[Baba Goud Gadiga]

Hello Monisha,

Thank you the updated sample. This works fine with one issue. When you update the Checkbox, the column does not retain the checked value(check mark on the check box). I tried with both my application code and your provided sample code.

Could you take a look and see why the value is not getting retained on the Grid after the check box is checked?

Thanks,

Baba

[Monisha Saravanan]

Hi Baba,

Thanks for the update.

We have checked your query and you can achieve your requirement by using UpdateCellAsync method. Here we have updated both date and checkbox column using UpdateCellAsync method. Kindly check the attached sample and code snippet for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" AllowPaging="true"  Toolbar="@ToolbarItems">

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

     <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code {

 

    public async Task OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args, Order orderdata)

    {       

       

        if (args.Checked ==  true)

        {

            double RowIndex = await Grid.GetRowIndexByPrimaryKey(orderdata.OrderID);

 

            Grid.PreventRender(false);

            DateTime val = DateTime.Now.AddDays(14);

            await Grid.UpdateCellAsync(RowIndex, "OrderDate", val);

            await Grid.UpdateCellAsync(RowIndex, "verified", orderdata.verified);

        }

       

    }

 

   

}

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

Kindly get back to us if you have further queries.

Regards,

Monisha

[Baba Goud Gadiga]

Hello Monisha,

Thank you for the update, it work's as expected. 

I Highly appreciate your time and patience in resolving my queries. Have a great day!

Thanks

Baba

[Monisha Saravanan]

Hi Baba,

Welcome. Kindly get back to us if you have further queries. As always we will be happy to assist you.

Regards,

Monisha