How I can use Object type data as date in SFGrid

[Nadeem Iqbal]

Hi, API send data as object type for date, so how I can use object type data as date in SFgrid, currently SFgrid show data but when i edit row grid column do not show any textbox for datepicker

public class Documentline

        {

            public int LineNum { get; set; }

            public string ItemCode { get; set; }

            public string ItemDescription { get; set; }

            public float Quantity { get; set; }

            public object ShipDate { get; set; }

        }

<SfGrid DataSource="@documentlines" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true" Height="200" Width="auto">

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

                                    @*<GridEvents OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompleteHandler" RowSelected="RowSelecthandler" TValue="Orders"></GridEvents>*@

                                    @*<GridEvents OnCellEdit="CellEdit" TValue="QuotationDetails"></GridEvents>*@

                                    <GridColumns>

                                        <GridColumn Field=@nameof(Quotations.Documentline.ItemCode) HeaderText="Item Code" IsPrimaryKey="true" TextAlign="TextAlign.Left" Width="100">

                                            <EditTemplate>

                                                <SfTextBox ID="ItemCode" @bind-Value="@((context as Quotations.Documentline).ItemCode)" ValueChange="OnValue"></SfTextBox>

                                            </EditTemplate>

                                        </GridColumn>

                                        <GridColumn Field=@nameof(Quotations.Documentline.ItemDescription) HeaderText="Description" TextAlign="TextAlign.Left" Width="200">

                                            <Template>

                                                @{

                                                    var data = context as Quotations.Documentline;

                                                    <a rel='nofollow' href="#">@data.ItemDescription</a>

                                                }

                                            </Template>

                                        </GridColumn>

                                        <GridColumn Field=@nameof(Quotations.Documentline.Quantity) HeaderText="Quantity" ValidationRules="@(new ValidationRules{ Required=true})" EditType="EditType.NumericEdit" EditorSettings="@EditParams" TextAlign="TextAlign.Right" Width="100"></GridColumn>

                                        <GridColumn Field=@nameof(Quotations.Documentline.UnitPrice) HeaderText="Price" EditType="EditType.NumericEdit" EditorSettings="@EditParams" TextAlign="TextAlign.Right" Width="100"></GridColumn>

                                        <GridColumn Field=@nameof(Quotations.Documentline.DiscountPercent) HeaderText="Disc%" Format="P2" EditType="EditType.NumericEdit" EditorSettings="@EditParams" TextAlign="TextAlign.Right" Width="100"></GridColumn>

                                        <GridColumn Field=@nameof(Quotations.Documentline.LineTotal) HeaderText="Amount" EditType="EditType.NumericEdit" EditorSettings="@EditParams" TextAlign="TextAlign.Right" Width="100"></GridColumn>

                                        <GridColumn Field=@nameof(Quotations.Documentline.ShipDate) HeaderText="Req. Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="100"></GridColumn>

                                    </GridColumns>

                                </SfGrid>

[Jeevakanth Palaniappan]

Hi Nadeem, 

Greetings from Syncfusion support. 

We have validated your query and we suggest you to use the edit template to achieve your scenario. Please find the code snippet and the sample for your reference. 

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

            <EditTemplate> 

                <SfDatePicker ID="OrderDate" TValue="DateTime?" Value="@(Convert.ToDateTime((context as Order).OrderDate))"> 

                    <DatePickerEvents TValue="DateTime?" ValueChange="@onChange"></DatePickerEvents> 

                </SfDatePicker> 

            </EditTemplate> 

        </GridColumn> 

 

 

@code{ 

    public DateTime? DateValue { get; set; } = DateTime.Now; 

    public object DateValue1 { get; set; } = DateTime.Now; 

 

    public bool IsDateValueChanged { get; set; } 

 

    public void OnActionBeginHandler(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && IsDateValueChanged) 

        { 

//Set the changed value here 

            args.Data.OrderDate = DateValue; 

            IsDateValueChanged = false; 

        } 

    } 

 

    private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args) 

    { 

        IsDateValueChanged = true; 

        DateValue = args.Value; 

    } 

} 

 

     

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample-840275368  

Documentation - https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP.