1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Grid does not work in Edge

Grid does not work in Edge

Hi,


I know this is probably a silly question, but how do I ensure that my grid is always rendered the same between browsers? 

I am currently only testing in Chrome and that works great. When I switch to Edge, the grid lines are not aligned and the search box disappears and I can no longer edit the grid.


12 Replies
RR Rajapandi Ravi Syncfusion Team January 28, 2022 02:23 PM UTC

Hi Eddie, 

Greetings from Syncfusion support 

We have checked your shared information and we could see that you are facing the problem in Edge browser. So based on query we have prepared a sample and tried to reproduce the reported problem, but it was unsuccessful. The Grid lines and edit operation was working fine in the Edge browser. Please refer the below sample and video demo for more information. 



If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)        Please share your complete Grid rendering code. 

2)        Share your issue scenario in video demonstration format. 

3)        If possible, please share your issue reproducing sample, that will be helpful for us to validate the problem. 

4)        Please confirm if you are using any custom CSS. 

5)        Share the Edge browser version. 

Regards, 
Rajapandi R 


EW Eddie Willcox January 31, 2022 08:13 AM UTC

1)        Please share your complete Grid rendering code. 

<div id="dataGrid">

        @Html.EJS().Grid("products").DataSource((IEnumerable<object>)ViewBag.products).EnableStickyHeader(true).Width("auto").Columns(col =>

   {

       col.Field("ProductCode").HeaderText("Code").HeaderText("Code").IsPrimaryKey(true).AutoFit(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Description").HeaderText("Item").Width("400px").HeaderText("Item").AllowEditing(false).Add();

       col.Field("Colour").HeaderText("Colour").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Price").HeaderText("Price Ex VAT").Format("C2").Width("150px").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Pack").HeaderText("Pack").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Barcode").HeaderText("Barcode").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.HeaderText("Image").Template("#template").AllowEditing(false).Width("90px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("QtyToOrder").HeaderText("Order").EditType("numericedit").ValidationRules(new { required = true }).Edit(new { @params= new Syncfusion.EJ2.Inputs.NumericTextBox() { ShowSpinButton = false, Min = 0, ValidateDecimalOnType=true,Decimals=0,Format="N" }}).Width("100px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("LineTotal").HeaderText("Total").AllowEditing(false).Format("C2").Width("150px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

   }).CellSave("calcTotal").Locale("en-ZA").GridLines(Syncfusion.EJ2.Grids.GridLine.Both).EnableAltRow(true).Load("load").Height("400px").EditSettings(edit => { edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowConfirmDialog(false); }).Toolbar(new List<string>() { "Search" }).ActionBegin("actionBegin").ActionComplete("actionComplete").Aggregates(agg =>

   { agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Sum", FooterTemplate = "Excl Total: ${Sum}" } }).Add();

       //agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Custom", FooterTemplate = "VAT: ${Custom}", CustomAggregate = "vatFn" } }).Add();

       //agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Custom", FooterTemplate = "Total: ${Custom}", CustomAggregate = "totalFn" } }).Add();

   }).BeforeBatchSave("btchSave").DataBound("calcAggs").Render()

    </div>


2)        Share your issue scenario in video demonstration format. 
3)        If possible, please share your issue reproducing sample, that will be helpful for us to validate the problem.

Videos attached for both of these
4)        Please confirm if you are using any custom CSS. 

<style>

    .image img {

        height: 60px;

        width: 60px;

        border-radius: 10px;

        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);

    }

    .e-grid .e-altrow {

        background-color: lightgrey !important;

    }

    .content-wrapper {

        width: 35%;

        margin: 0 auto;

        min-width: 185px;

    }


    .e-float-input.e-numeric.e-input-group {

        margin-top: 40px;

    }


    .control-label {

        padding: 24px 0px 10px 0px;

        font-size: 12px;

    }


    .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {

        margin-bottom: 0px;

        margin-right: 0px;

        margin-top: 0px;

    }

</style>


5)        Share the Edge browser version. 

Version 97.0.1072.76 (Official build) (64-bit)



Attachment: Microsoft​_Edge_20220131_101057_ac3ba31a.zip

EW Eddie Willcox replied to Eddie Willcox January 31, 2022 08:14 AM UTC

Attached is the video demo of Chrome browser


Attachment: Google_Chrome_20220131_101018_dbfa036d.zip

SK Sujith Kumar Rajkumar Syncfusion Team February 1, 2022 12:03 PM UTC

Hi Eddie, 

We modified the sample based on the shared code snippet but still could not replicate the problem from our end. You can check the below updated sample for your reference, 
 

So please let us know if you are able to reproduce the problem in the edge browser with the above shared sample. If not, please share us the following additional details to validate further on this, 

  • Share us the event function code snippets implemented in the Grid(‘dataBound’, ‘load’, ..)
  • Let us know how you have referenced the script and theme files for the EJ2 Grid control.
  • Syncfusion NuGet package version.
  • If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

Regards, 
Sujith R 


EW Eddie Willcox replied to Sujith Kumar Rajkumar February 3, 2022 04:57 PM UTC

Hi,


In your sample i am unable to reproduce the problem. You sample is using Nuget package version 19.1.0.55.

  • Share us the event function code snippets implemented in the Grid(‘dataBound’, ‘load’, ..)
I have quite a lot going on because I need to do quite a few things using some of these functions. I am not using DataBound

  • Let us know how you have referenced the script and theme files for the EJ2 Grid control.
I am using bundleconfigs and I reference them in the _Layout.cshtml file. I am using the tailwind theme

  • Syncfusion NuGet package version.
version 19.4.0.48

My biggest concern is that when the page with the grid loads, the inspection window shows theses errors:


EW Eddie Willcox February 4, 2022 11:12 AM UTC

I get the same problems in Firefox. The grid does not render correctly. The search bar disappears and I cannot edit any rows. Inspection console windows also shows similar errors to the errors in Edge






PS Pavithra Subramaniyam Syncfusion Team February 4, 2022 01:06 PM UTC

Hi Eddie, 

Thanks for sharing the details. 

Currently we are validating this error our side and we will update further details on Feb 08th, 2022. Until then we appreciate your patience. 

Regards, 
Pavithra S 


BS Balaji Sekar Syncfusion Team February 8, 2022 02:49 PM UTC

Hi Eddie, 

We have checked your shared information and we suspect that problem occurs due to template column. So, we modified the sample based on the shared code snippet with tailwind theme but still could not replicate the problem from our end. You can check the below updated sample for your reference, 


If you still face the issue, Please share us the following additional details to validate further on this,  

1)       Share use the below CDN reference link in your application to refer the css and script and check whether the issue is resolved or not. 

Layouts.cshtml 
 
@* Syncfusion Essential JS 2 Styles *@ 
    <link rel="stylesheet" rel='nofollow' href=https://cdn.syncfusion.com/ej2/tailwind.css /> 
 
    @* Syncfusion Essential JS 2 Scripts *@ 
    <script src=https://cdn.syncfusion.com/ej2/dist/ej2.min.js></script> 

2)       If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample. 

Regards, 
Balaji Sekar. 


EW Eddie Willcox replied to Balaji Sekar February 9, 2022 09:25 AM UTC

Hi,


I played around a bit more and found the following issues:

  1. Enabling sticky header is what caused the initial problem. If I remove .EnableStickyHeader(true) for the grid render code, both Edge and Firefox now render the grid properly and the search box is back and the grid lines are lining up. Not a problem for now, I can live without sticky headers. I was unable to reproduce this error in your sample, so it must be something to do with my project
  2. Enabling virtualization only works in Chrome. If I use Url Adaptor as the data source, then it works in Edge too, but does not work in Firefox. Data does not render inside the grid at all in Firefox using url adaptor. Firefox and virtualization works with ViewBag data

EW Eddie Willcox replied to Eddie Willcox February 9, 2022 09:39 AM UTC

Nevermind... Point 2 does work in Firefox too


RR Rajapandi Ravi Syncfusion Team February 10, 2022 12:33 PM UTC

Hi Eddie, 

Thanks for the update. 

We are happy to hear that the provided solution work fine at your end. 

Please get back to us if you need further assistance. 

Rajapandi R 



WI will January 5, 2023 05:34 AM UTC

As you can see, the grid feature needs some prefix in order to work in every browser. This tool will help you to prefix your CSS Just copy/paste your CSS in and get the result, your code will now work for IE. You don't need prefixes for CSS Grid to work in Edge


Regards


Loader.
Up arrow icon