TimePickerEdit doe not render

[Mariusz Juszkiewicz]

I have trouble with rendering TimePickerEdit in blazor grid. When I double click on the cell there is no editor.

here is the code:

<SfGrid ID="ProposalsGrid" @ref="Grid" TValue="ProposalsModel" AllowPaging="true"

        AllowFiltering="true" AllowReordering="true" AllowResizing="true"

    AllowGrouping="true" AllowExcelExport="true" AllowSelection="true"

    AllowSorting="true" Toolbar="toolbarOptions" width="1790" height="500px"

    FrozenColumns=3 ShowColumnMenu='true' GridLines="GridLine.Both" >

    <SfDataManager Url="/api/proposalgrid" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal" showDeleteConfirmDialog="true" ShowAddNewRow="false"></GridEditSettings>

    <GridGroupSettings ShowGroupedColumn="true"> </GridGroupSettings>

    <GridSearchSettings></GridSearchSettings>

    <GridPageSettings PageSizes="true" PageSize="20"></GridPageSettings>

    <GridEvents OnToolbarClick="ToolbarClick" TValue="ProposalsModel"></GridEvents>

    <GridColumns>

        <GridColumn HeaderText="Proposal Id" Field="ProposalId" IsPrimaryKey="true" HeaderTextAlign="TextAlign.Center" Width="100" Visible=false Type="ColumnType.Integer" ValidationRules="@(new ValidationRules { Required = true})"></GridColumn>

        <GridColumn HeaderText="Proposal Number" Field="ProposalNo" HeaderTextAlign="TextAlign.Center" Width="170" Type="ColumnType.String" ValidationRules="@(new ValidationRules { Required = true})"></GridColumn>

        <GridColumn HeaderText="Proposal Description" Field="ProposalDescription" HeaderTextAlign="TextAlign.Center" Width="400" Type="ColumnType.String" ValidationRules="@(new ValidationRules { Required = true })"></GridColumn>

        <GridForeignColumn TValue="ClientModel" ForeignDataSource="Clients" HeaderText="Client" Field="ProposalClientID" ForeignKeyField="ClientId" ForeignKeyValue="ClientName" HeaderTextAlign="TextAlign.Center" Width="170" Type="ColumnType.String" EditType="EditType.DropDownEdit" ValidationRules="@(new ValidationRules { Required = true })"></GridForeignColumn>

        <GridColumn HeaderText="Project Location" Field="ProposalLocation" HeaderTextAlign="TextAlign.Center" Width="170" Type="ColumnType.String"></GridColumn>

        <GridColumn HeaderText="Client Contact" Field="ProposalContact" HeaderTextAlign="TextAlign.Center" Width="170" Type="ColumnType.String"></GridColumn>

        <GridColumn HeaderText="Contact E-mail" Field="ProposalContactEmail" HeaderTextAlign="TextAlign.Center" Width="170" Type="ColumnType.String" ></GridColumn>

        <GridColumn HeaderText="Received Date" Field="ProposalReceivedDate" HeaderTextAlign="TextAlign.Center" Width="140" Type="ColumnType.DateOnly" Format="yyyy-MM-dd" EditType="EditType.DatePickerEdit" ValidationRules="@(new ValidationRules { Required = true })"></GridColumn>

        <GridColumn HeaderText="Due Date" Field="ProposalDueDate" HeaderTextAlign="TextAlign.Center" Width="140" Type="ColumnType.DateOnly" Format="yyyy-MM-dd" EditType="EditType.DatePickerEdit" ValidationRules="@(new ValidationRules { Required = true })"></GridColumn>

        <GridColumn HeaderText="Due Time" Field="ProposalDueTime" HeaderTextAlign="TextAlign.Center" Width="140" Type="ColumnType.TimeOnly" Format="hh:mm tt" EditType="EditType.TimePickerEdit" AllowEditing="true" ></GridColumn>

        <GridForeignColumn TValue="ProposalTypeModel" ForeignDataSource="ProposalTypes" HeaderText="Proposal Type" Field="ProposalTypeId" ForeignKeyField="PTypeId" ForeignKeyValue="PTypeName" HeaderTextAlign="TextAlign.Center" Width="170" Type="ColumnType.String" EditType="EditType.DropDownEdit" ValidationRules="@(new ValidationRules { Required = true })"></GridForeignColumn>

    </GridColumns>

</SfGrid>

[Naveen Palanivel]

Hi Mariusz,

As per the provided code snippet, we created a sample using the URL adaptor. We tested the sample on our end, but the reported issue did not occur. To further investigate and validate the issue you're facing, we kindly request you to share the following details:

1. Please share the full code snippet and model class.
2. Ensure that the type of the ProposalDueTime property in the model class is set to TimeOnly.
3. Share us the video demonstration of the issue with elaborately, it will be more useful to us.
4. Share us a simple issue replicating sample or try to modify the mentioned sample in previous update.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Regards,
Naveen

Attachment: UrlAdaptor_d66fcc6c.zip

[Mariusz Juszkiewicz]

Please see attached code for your review

Attachment: MegaBidWeb_193a371.zip

[Prathap Senthil]

Based on the reported problem, it appears that you have used a DateTime property with the TimePicker editor. We would like to clarify that the TimePicker editor only supports the TimeOnly property. We have changed the code accordingly, and it is now working fine. Please ensure that you use the TimeOnly property when working with the TimePicker editor component. Kindly refer to the code snippet and modified sample below for your reference.

  protected override void OnInitialized()

  {

      Orders = Enumerable.Range(1, 75).Select(x => new Order()

      {

          OrderID = 1000 + x,

          CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

          Freight = 2.1 * x,

          OrderDate = new TimeOnly(14, 30,22),

          ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]

      }).ToList();

  }

  public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)

  {

      if (args.Item.Id == "Grid_excelexport")

      {

              this.Grid?.ExportToExcelAsync();

      }

  }

  public class Order

  {

      public int? OrderID { get; set; }

      public string? CustomerID { get; set; }

      public TimeOnly? OrderDate { get; set; }

      public double? Freight { get; set; }

      public string? ShipCountry { get; set; }

  }

Attachment: MegaBidWeb_193a371_(2)_c3f71af6.zip