DataGrid InLine edit bind to datetime picker

[Ganesh Boddu]

I have a requirement where I need to show DateTime picker or TextBox based on the datatype property while doing inline edit.

I am unable to do dual binding and also I would like to add validations to the fields. Like 

TextBox : 

If datatype is number check whether input is valid number

If datatype is boolean check whether input is valid boolean

DateTime:

If datatype is datetime check whether it lies within a given range.

Attached the sample code for your reference. 

Attachment: BlazorDateTimePicker_b3b553ca.zip

[Naveen Palanivel]

Hi Ganesh Boddu,

We reviewed your query and sample and noticed that your sample uses .NET 8. However, the RenderMode has not been defined in the sample. Please add the RenderMode.InteractiveServer option to your Razor pages. Additionally, we observed that the Grid column does not have a primary key defined. Please note that CRUD operations in the Grid rely on a unique primary key column value. Therefore, the IsPrimaryKey property must be enabled for at least one uniquely valued column defined in the Grid. Without this, CRUD operations will not function correctly. For more information, please refer to the documentation below.

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing

 @rendermode InteractiveServer

 

@using BlazorDateTimePicker.Classes

@page "/date"

<h3>DatePicker</h3>

 

<SfGrid DataSource="@this.Rows" @ref="Grid" AllowPaging="true">

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

    <GridPageSettings PageSize="5"></GridPageSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Row.Name) HeaderText="Name" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

 

For more detailed insights, please visit the following blog and documentation.

Blog: https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx
UG: Getting Started with Syncfusion Blazor DataGrid Component in Web App

Documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0|

“I have a requirement where I need to show DateTime picker or TextBox based on the datatype property while doing inline edit”

We have modified the sample to meet your requirement, where the DateTime picker or TextBox component is displayed based on the data type property during inline editing. Please refer to the code snippet and sample for more details.

<SfGrid DataSource="@this.Rows" @ref="Grid" AllowPaging="true">

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

    <GridPageSettings PageSize="5"></GridPageSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Row.Name) HeaderText="Name" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Row.Value) HeaderText="Value" Width="250">

            <EditTemplate>

                @{

                    var row = (context as Row);

                    if(row.DataType == Enums.DataType.DateTime)

                    {

                        DateTime datee = Convert.ToDateTime(row.Value);

                        <Syncfusion.Blazor.Calendars.SfDateTimePicker ID="Value"  TValue="DateTime" @bind-Value="datee">

 

                            <Syncfusion.Blazor.Calendars.DateTimePickerEvents TValue="DateTime" ValueChange="@((args)=>ValueChangeHandler(args,row))"></Syncfusion.Blazor.Calendars.DateTimePickerEvents>

                          

                        </Syncfusion.Blazor.Calendars.SfDateTimePicker>

                    }

                    else

                    {

                        <Syncfusion.Blazor.Inputs.SfTextBox ID="Value" @bind-Value="@(row.Value)" ></Syncfusion.Blazor.Inputs.SfTextBox>

                    }

                }

            </EditTemplate>

        </GridColumn>

        <GridColumn Width="auto">

  private List<Row> Rows { get; set; }

 

  SfGrid<Row> Grid;

 

  public void ValueChangeHandler(ChangedEventArgs<DateTime> args, Row row)

  {

      Grid.PreventRender(false);

 

      row.Value=args.Value.ToString();

  }

 “To add validations to the fields”

We recommend using custom validation, allowing you to handle validation based on specific values. please refer to the documentation linked below for more information.

Reference : https://blazor.syncfusion.com/documentation/datagrid/column-validation#custom-validation

Please get back to us if you have further queries.

Regards,
Naveen

Attachment: BlazorDateTimePicker_b8c0f8e1.zip