Table column with TimePicker

I am trying to create a table where I can add rows using a button like in your example. However in my setup one column should include TimePicker item on each row. I did it this way:

<Template>
  <Collapse DefaultActiveKey="@(new[] { "1" })"
            OnChange="this.Callback"
            ExpandIconPosition="@this.ExpandIconPosition"
            ExpandIcon="caret-right">
    <Panel Header="Basic information" Key="1">
      <ChildContent>
        <FormItem Label="Record title">
          <Input @bind-Value="@this.Title" />
        </FormItem>
        <FormItem Label="Description">
          <Input @bind-Value="@this.Description" />
        </FormItem>
        <FormItem Label="Content">
          <TextArea Rows="4" @bind-Value="@this.Content" />
        </FormItem>
        <FormItem Label="Date">
          <DatePicker @bind-Value="@this.SelectedDate" ShowTime="@true" OnChange="this.OnDateSelected" />
        </FormItem>
      </ChildContent>
    </Panel>
    <Panel Header="Personell" Key="2">
      <ChildContent>
        <Button OnClick="this.AddNewEmployee" Type="primary" Style="margin-bottom:16px">
          Add person
        </Button>
        <Table DataSource="this.PersonellData" RowClassName="@(_=>"editable-row")" Bordered Size=@TableSize.Small>
          <Column Title="Id" DataIndex="@nameof(context.Id)" TData="int"></Column>
          <Column Title="Name" DataIndex="@nameof(context.Name)" TData="string"></Column>
          <Column Title="From" TData="DateTime" @bind-Field="@context.From">
            <TimePicker TValue="DateTime?" Value="@context.From" />
          </Column>
          <Column Title="Category" DataIndex="@nameof(context.Category)" TData="string">
            <Select DataSource="@this.CategoryList"
                    @bind-Value="@this.selectedCategoryValue"
                    OnSelectedItemChanged="this.OnSelectedItemChangedHandler">
            </Select>
          </Column>
          <ActionColumn Title="Action">
            <Popconfirm Title="Sure to delete?"
                        OnConfirm="()=> this.DeleteEmployee(context.Id)"
                        OkText="Yes"
                        CancelText="No">
              <Button Danger>Delete</Button>
            </Popconfirm>
          </ActionColumn>
        </Table>
      </ChildContent>
    </Panel>
  </Collapse>
</Template>

However I am getting an exception in browser console:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Please use @bind-Value (or @bind-Values for selected components) in the control with generic type System.Nullable1[System.DateTime]. System.InvalidOperationException: Please use @bind-Value (or @bind-Values for selected components) in the control with generic type System.Nullable1[System.DateTime]. at AntDesign.FormItem.AntDesign.Internal.IFormItem.AddControl[Nullable1](AntInputComponentBase1 control) at AntDesign.AntInputComponentBase1[[System.Nullable1[[System.DateTime, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnInitialized() at AntDesign.DatePickerBase1[[System.Nullable1[[System.DateTime, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnInitialized() at AntDesign.DatePicker1[[System.Nullable1[[System.DateTime, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnInitialized() at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

on <TimePicker TValue="DateTime?" Value="@context.From" />

I think I have tried all possible solutions like adding @bind-Value=“” to <TimePicker TValue="DateTime?" @bind-Value="@context.From" /> , but debugger does not like it either. What is the right solution?

---

Another issue is how to adjust items in the first section, so that input fields would be inline? I mean this part:

    <Panel Header="Basic information" Key="1">
      <ChildContent>
        <FormItem Label="Record title">
          <Input @bind-Value="@this.Title" />
        </FormItem>
        <FormItem Label="Description">
          <Input @bind-Value="@this.Description" />
        </FormItem>
        <FormItem Label="Content">
          <TextArea Rows="4" @bind-Value="@this.Content" />
        </FormItem>
        <FormItem Label="Date">
          <DatePicker @bind-Value="@this.SelectedDate" ShowTime="@true" OnChange="this.OnDateSelected" />
        </FormItem>
      </ChildContent>
    </Panel>

I have tried to wrap it inside <Form> with Layout=“FormLayout.Horizontal”, but it is not allowed?

[knight1219]

I got the error you reported. This is what I did to fix it (your repo wont let me commit)

• Set Personell.From to a DateTime?
• Use @bind-Value on the TimePicker

Once I did that, everything seemed to work. Let me know if that helps!

[anranruye]

As we can see, the demos is working well in the doc page. Do you mean you can’t get the same result with the demo code? Or the demo effect is not what you want?

I may get it working with <Row> and <GridCol> manipulation

Then just use this approach, it is also recommended. If you don’t need validation message, you can use Row and GridCol only.(FormItem uses Row and GridCol inside)