I have a issue with component datetime , follow error

[Fábio de Oliveira Martins]

My code:

 <div class="col-lg-12 control-section">

                        <div class="content-wrapper">

                            <div class="row">

                                <SfGrid DataSource="@ListaGastos" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete" })" Adaptor="Adaptors.ODataV4Adaptor">

                                    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

                                    </GridEditSettings>

                                    @*<SfGrid DataSource="@ListaGastos" Toolbar="@(new List<string>() { "Search" })" AllowPaging="true">*@

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

                                    <GridEvents OnActionComplete="ActionCompleteHandler" CommandClicked="OnCommandClicked" TValue="Gasto"></GridEvents>

                                    <GridColumns>

                                        @*<GridColumn Field=@nameof(Gasto.DataGasto) HeaderText="Data" Format="d/M/y" TextAlign="TextAlign.Left" Width="195"  EditType="EditType.DateTimePickerEdit"></GridColumn>*@

                                        <GridColumn Field=@nameof(Gasto.DataGasto) HeaderText="Data" EditType="EditType.DatePickerEdit" Type="ColumnType.Date" Width="120" />

                                        <GridColumn Field=@nameof(Gasto.Descricao) HeaderText="Descrição" TextAlign="TextAlign.Left" Width="195"></GridColumn>

                                        <GridColumn Field=@nameof(Gasto.Valor) HeaderText="Valor" Format="C2" TextAlign="TextAlign.Left" Width="195"></GridColumn>

                                        <GridColumn HeaderText="Opções" Width="150">

                                            <GridCommandColumns>

                                                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></GridCommandColumn>

                                            </GridCommandColumns>

                                        </GridColumn>

                                    </GridColumns>

                                </SfGrid>

                            </div>

                        </div>

                    </div>

when i click in add button , my app open the dialog to insert data, but the field Data doesn't be enable to insert any data ,

first error:

second error when i try add some data

Can you help me?

[Vignesh Natarajan]

Hi Fábio, 

 

Greetings from Syncfusion support.  

 

Query1: “script error thrown in super expression must be either null or a function” 

 

The reported script error will be thrown while using 18.1.0.44 Syncfusion Nuget. Since it is a known issue, we have fixed the reported and it was included in our last release (18.1.0.45). So kindly upgrade to our latest version to resolve the reported issue. Please find the release notes from below  

 

https://blazor.syncfusion.com/documentation/release-notes/18.1.45/#common 

Query: “second error when i try add some data” 

 

From your query we understand that you are facing issue while inserting a record with Data column. To validate the reported issue at our end, we need some more details about the issue your facing. Kindly share the details about your datasource (ListaGastos). 

 

Because you have defined the EditType as DatePickerEdit for Data column. But value displayed in Grid as {0:31-12-1244}. You have not applied any format to that column. So kindly confirm whether the type of Data column is DateTime object or string?. 

 

Also from your code example we found that you have not defined IsPrimaryKey property to any of available column. IsPrimarykey property must be assigned to any of the available column whose value is unique. Refer our UG documentation for your reference 

 

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

Kindly share the above requested details which will be helpful for us to validate the reported issue at our end and provide solution as soon as possible.   

 

Regards, 

Vignesh Natarajan 

[Ulisses Correia de Araujo Neto]

Hi.

What Fábio wants to show is that clicking on the date button does not show the calendar, I tried to help him and it didn't work here too, follow the error code and image.

Tks 

Ulisses

Code:

                    <div class="col-lg-12 control-section">

                        <div class="content-wrapper">

                            <div class="row">

                                <SfGrid DataSource="@ListaGastos" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete" })">

                                    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

                                    </GridEditSettings>

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

                                    <GridEvents OnActionComplete="ActionCompleteHandler" CommandClicked="OnCommandClicked" TValue="Gasto"></GridEvents>

                                    <GridColumns>

                                        <GridColumn Field=@nameof(Gasto.GastoId) HeaderText="Código" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120" Visible="false"> </GridColumn>

                                        <GridColumn Field=@nameof(Gasto.DataGasto) HeaderText="Data" Format="d" TextAlign="TextAlign.Left" Width="195" EditType="EditType.DatePickerEdit" Type="ColumnType.Date"></GridColumn>

                                        <GridColumn Field=@nameof(Gasto.Descricao) HeaderText="Descrição" TextAlign="TextAlign.Left" Width="195"></GridColumn>

                                        <GridColumn Field=@nameof(Gasto.Valor) HeaderText="Valor" Format="C2" TextAlign="TextAlign.Left" Width="195"></GridColumn>

                                        <GridColumn HeaderText="Opções" Width="150">

                                            <GridCommandColumns>

                                                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></GridCommandColumn>

                                            </GridCommandColumns>

                                        </GridColumn>

                                    </GridColumns>

                                </SfGrid>

                            </div>

                        </div>

                    </div>

Attachment: Error_54a62b3d.rar

[Ulisses Correia de Araujo Neto]

Hi.

I managed to solve the problem by placing these two lines in the application's index.html

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

    <script src="https://cdn.syncfusion.com/blazor/18.1.45/syncfusion-blazor.min.js"></script>

Tks

Ulisses

[Vignesh Natarajan]

Hi Ulisses,  

 

Thanks for the update.  

 

Query: “I managed to solve the problem by placing these two lines in the application's index.html” 

 

We are glad to hear that you have resolved your query on your own. But from your script reference shared, you have referred different version of CSS and Script files. So kindly refer the same version of CSS and Script file into your application.  

 

Refer the below code example.   

 

[index.html] 

<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' rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.1.45/styles/material.css" /> 

    <script src="https://cdn.syncfusion.com/blazor/18.1.45/syncfusion-blazor.min.js"></script> 

</head> 

 

 

Note: Kindly refer the above script files while using 18.1.0.45 version Nuget package. Highlighted code refers to Syncfusion Nuget package version. Kindly refer the corresponding version to overcome the reported issue.  

 

If you are still facing the issue kindly get back to us with more details about the issue you are facing along with index.html file (where you have referred the script and theme file).  

 

Regards 

Vignesh Natarajan