edit dialog mode and compatibility css problem

[Walter Martin]

I'm using Blazor 18.3.0.53 but the problem is the same in Blazor 18.4.0.32

I add in attachment your sample 

Editing in Blazor DataGrid component - Syncfusion

where I changed only the css file

<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" />

with this

<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />

because in my project I'm using also the BoldReports components so I need the compatibility css file

If you try in the attachment to insert a new row in the datagrid,  as soon as you fill one of the fields in the dialog box and then click in another field, the grid behind is someway corrupted and become unusable

why?

Attachment: SyncfusionBlazorApp1_967cd417.zip

[Vignesh Natarajan]

Hi Walter,  

 

Thanks for contacting Syncfusion support.  

 

Query: “as soon as you fill one of the fields in the dialog box and then click in another field, the grid behind is someway corrupted and become unusable” 

 

We have analyzed the reported query at our end and we understand that you are facing trouble when rendering the compatibility theme for Syncfusion Blazor components. We suggest you to refer the default theme for Syncfusion components and compatibility theme for BoldReports to resolve the reported issue.  

 

Refer the below code example.     

 

<meta charset="utf-8" /> 

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

   <title>SyncfusionBlazorApp1</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="css/syncfusion-blazor-icons.css" rel="stylesheet" /> 

  

   <link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" /> 

   @*<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />*@ 

  

   <link rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" /> 

   <link rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/material/bold.theme.compatibility.min.css" rel="stylesheet" /> 

   <link rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/material/bold.reportdesigner.compatibility.min.css" rel="stylesheet" /> 

. . . . . . 

 

For your convenience we have prepared a sample using above solution. Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161082/ze/SyncfusionBlazorBold339177  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Walter Martin]

Thanks for your reply but using the BoldsReport compatibility css and the default theme syncfusion is even worse

I add you the printscreen of my main page where I have a sidebar when it works (right.png) and after the css modification (wrong.png)

this is my _Host.cshtml when the sidebar works but there's a big problem inserting new data in the datagrid described in my previous post

 @* Syncfusion Essential JS 2 Styles *@

   

   

 @* BoldReports Styles *@

   

   

   

    @*questo script serve solo per risolvere il problema che la riga delle griglie una volta espansa, non si espande più al secondo click*@

    @*Dependent scripts*@

   

   

   

    @*BoldReports Scripts*@

   

   

    @*Report Viewer component script*@

   

    @*Blazor interop file*@

   

   

this is the _Host.cshtml when the sidebar is bad but not only, also all the other pages have a totally wrong components position on the screen

 @* Syncfusion Essential JS 2 Styles *@

   

   

@* BoldReports Styles *@

   

   

   

    @*questo script serve solo per risolvere il problema che la riga delle griglie una volta espansa, non si espande più al secondo click*@

    @*Dependent scripts*@

   

   

   

    @*BoldReports Scripts*@

   

   

    @*Report Viewer component script*@

   

    @*Blazor interop file*@

   

   

Attachment: Test_6b898027.zip

I think you can immediately see the problem replacing the MainLayout of your sample with the sidebar code of the this demo page Blazor Sidebar Sidebar Menu Example - Syncfusion Demos

it's the same sidebar content I need for my project but it's unusable with this css combination

[Vignesh Natarajan]

Hi Walter,  

 

Thanks for the update. 

 

We have checked the reported issue in our end with latest version (V18.4.0.33) and we are not able to reproduce the reported issue at our end. Please find the modified sample from below  

 

https://www.syncfusion.com/downloads/support/forum/161082/ze/SyncfusionBlazorBold1661673470.zip  

 

We suggest you to ensure the reported issue by upgrading the Syncfusion packages to our latest version (v18.4.0.33). Kindly get back to us with more details if you have further queries or if you are still facing the reported issue.  

  

Regards,   

Vignesh Natarajan 

 

[Walter Martin]

Thank you Vignesh

you're right, I was using version 18.3.0.53 and in this version the problem is still there but in version 18.4.0.33 everything works.

I have unfortunately anoher problem where I need a confirmation from you if possible.

My application works fine in my local Pc using Visual Studio and version 18.4.0.33 and it worked in a hosting environment up to version 18.3.0.53

When I tried to load in the hosting environment version 18.4.0.33, it gave me an error "An error occurred while starting the application." but at the moment I can't retrieve the log file generated in the server because it's in use by another process

Is it possible the problem is in the use of ASP.Net Core 3.1.8 and not version 5.0 ? I mean, can I use your libraries version 18.4.0.33 with Asp.Net Core 3.1.8 or is it mandatory to use them with Asp.Net Core 5.0 ?

[Vignesh Natarajan]

Hi Walter, 

Thanks for the update. 

Query: “Is it possible the problem is in the use of ASP.Net Core 3.1.8 and not version 5.0 ? I mean, can I use your libraries version 18.4.0.33 with Asp.Net Core 3.1.8 or is it mandatory to use them with Asp.Net Core 5.0 ?” 

We have provided .NET 5.0 support for our Syncfusion Blazor components in our 18.4.0.30 version and it is necessary to upgrade the .NET Core version to 5.0 to use the Syncfusion Libraries above 18.4.0.30. Please find the release regarding our .NET 5.0 support from below  

https://blazor.syncfusion.com/documentation/release-notes/18.4.30/?type=all#common  

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan 

[Walter Martin]

Is there any option you solve the css compatibility problem also in the libraries version 18.3.0.53?

[Walter Martin]

You can ignore my last question because I managed to load my project in the hosting cloud environment successfully using Asp.Net Core 5.0 and your new libraries

Thanks

 

[Vignesh Natarajan]

Hi Walter,  

Thanks for the update.  

We are glad to hear that you have resolved your query on your own. 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan