Grid -> Add (inline) with DatePickerEdit -> picker not working

[Andreas]

I used the example in teh documentation from here https://blazor.syncfusion.com/documentation/datagrid/editing/#normal

when i then add  a new linke and klick on the datepick to select a date i get the following error

Uncaught Format options or type given must be invalid

Error: Format options or type given must be invalid

    at f (https://cdn.syncfusion.com/ej2/17.4.51/dist/ej2.min.js:10:2107)

    at Function.e.dateFormat (https://cdn.syncfusion.com/ej2/17.4.51/dist/ej2.min.js:10:476648)

    at e.getDateFormat (https://cdn.syncfusion.com/ej2/17.4.51/dist/ej2.min.js:10:491134)

    at e.formatDate (https://cdn.syncfusion.com/ej2/17.4.51/dist/ej2.min.js:10:491670)

    at t.renderDays (https://localhost:5000/_content/Syncfusion.Blazor/scripts/calendars-ec5227.min.js:1:16715)

    at t.renderDays (https://localhost:5000/_content/Syncfusion.Blazor/scripts/calendars-ec5227.min.js:1:49275)

    at t.renderMonths (https://localhost:5000/_content/Syncfusion.Blazor/scripts/calendars-ec5227.min.js:1:15772)

    at t.renderMonths (https://localhost:5000/_content/Syncfusion.Blazor/scripts/calendars-ec5227.min.js:1:49184)

    at t.createContentBody (https://localhost:5000/_content/Syncfusion.Blazor/scripts/calendars-ec5227.min.js:1:8507)

    at t.createContent (https://localhost:5000/_content/Syncfusion.Blazor/scripts/calendars-ec5227.min.js:1:6364)

Exmaple code from the documentation :

<div class="control-section">

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

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

        <GridColumns>

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new { required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new { required=true})" Width="120"></GridColumn>

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

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>

        </GridColumns>

    </SfGrid>

</div>

@code{

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

    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 = DateTime.Now.AddDays(-x),

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

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

        public string ShipCountry { get; set; }

    }

}

[Vignesh Natarajan]

Hi Andreas, 

 

Thanks for contacting Syncfusion forums.  

 

Query: “when i then add  a new linke and klick on the datepick to select a date i get the following error” 

 

We have analyzed your query and stack trace of the issue. From that we found, script error is thrown from both ej2.min and calendars-ec5337.min.js. So we suspect that you have referred ej2.min.js into your project. In our latest version it is not necessary to include script files in the sample. Only theme CSS file needs to referred in the _host.cshtml file in case of server project or index.html in client side project.   

 

Refer the below code example.  

 

<head> 

    <meta charset="utf-8" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <title>BlazorApp1</title> 

    <base rel='nofollow' href="~/" /> 

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 

    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 

    <link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.1.36-beta/styles/material.css" rel="stylesheet" /> 

</head> 

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/grid/getting-started/  

 

If you are still facing the issue, kindly get back to us with issue reproducible sample.  

 

Regards, 

Vignesh Natarajan