Grid Render twice on page if refresh is done on multiple tabs simultaneously

[Muhammad Tassadaque Zia]

HI

I am facing a weird issue. when i open same or two grids in multiple tabs and refresh them simultaneously. one page get two grids and other page don't render grid at all. only grid duplicated on pages. For reference i am attaching a screenshot and source code

<ejs-grid id="Grid" allowResizing="true" dataSource="@Model" allowPaging="true" allowPdfExport="true" allowSorting="true" allowGrouping="true" allowFiltering="true" enableAltRow="true" allowExcelExport="true" gridLines="None" rowHeight="35">

                    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

                    <e-grid-pagesettings pageCount="5" pageSizes="true"></e-grid-pagesettings>

                    <e-grid-columns>

                        <e-grid-column field="Action" headerText="Action" template="#template" width="43" allowFiltering="false" customAttributes=@(new { @class="customcss" } )></e-grid-column>

                        <e-grid-column field="PoistionID" hideAtMedia="true" isPrimaryKey="true" headerText="Actions" type="number" textAlign="Left" width="100" customAttributes=@(new { @class="customcss" } )></e-grid-column>

                        <e-grid-column field="PositionCode" headerText="Code" type="string" width="50" textAlign="Left" customAttributes=@(new { @class="customcss" } )></e-grid-column>

                        <e-grid-column field="PositionTitle" headerText="Position Title" textAlign="Left" format="C2" width="100" customAttributes=@(new { @class="customcss" } )></e-grid-column>

                        <e-grid-column field="CreatedOn" headerText="Date of Creation" textAlign="Left" width="50" format='yMd' customAttributes=@(new { @class="customcss" } )></e-grid-column>                        

                    </e-grid-columns>

                </ejs-grid>

public IActionResult Positions()

        {

            var positionsList = _vmomservice.GetPositionsList();

            return View(positionsList);

            

        }

 

[Muhammad Tassadaque Zia]

Screenshot

https://ibb.co/PzZhcmP

[Muhammad Tassadaque Zia]

I am using 17.2.0.51 version

[Seeni Sakthi Kumar Seeni Raj]

Hi Muhammed,  

 

We could see the Grid is rendering twice within the Tabs. Cause of the problem is tab items were hidden at the initial render of them. So we are setting the style as display none to the required hidden items. Refer to the following code example. 

 

Homecontroller.cs 

public IActionResult Index() 

        { 

            ViewBag.dataSource = OrdersDetails.GetAllRecords().ToList(); 

            List<TabTabItem> tabItems = new List<TabTabItem>(); 

            tabItems.Add(new TabTabItem { Header = new TabHeader { Text = "Grid1" }, Content = "#Content1" }); 

            tabItems.Add(new TabTabItem { Header = new TabHeader { Text = "Grid2" }, Content = "#Content2" }); 

            ViewBag.items = tabItems; 

            return View(); 

        } 

Index.cshtml 

 

@using Syncfusion.EJ2.Navigations; 

 

<div class="e-content"> 

    <div id="Content1" style="display: none"> 

        <ejs-grid id="ej2grid" dataSource="@ViewBag.DataSource" allowResizing="true" allowPaging="true" allowPdfExport="true" allowSorting="true" allowGrouping="true" allowFiltering="true" enableAltRow="true" allowExcelExport="true" gridLines="None" rowHeight="35" height="310"> 

            <e-grid-pagesettings pageCount="5" pageSizes="true"></e-grid-pagesettings> 

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

                <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

                <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

    <div id="Content2" style="display: none"> 

        <ejs-grid id="ej2grid2" dataSource="@ViewBag.DataSource" allowPaging="true" height="310"> 

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

                <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

                <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

</div> 

<ejs-tab id="ej2Tab" items="@ViewBag.items"></ejs-tab> 

Sample: https://www.syncfusion.com/downloads/support/forum/147535/ze/TestSample-1053344639.zip  

Regards,  

Seeni Sakthi Kumar S 

[Muhammad Tassadaque Zia]

Sorry I think I should be more clear about the issue. I am not talking about tab control. My issue is related to browser tabs. when access two same or different urls containing grid. the on browser tab show duplicate grid and other show blank area in grid area

[Seeni Sakthi Kumar Seeni Raj]

Hi Muhammad, 

We are unable to reproduce the problem at our end. Please find the below video demo link for more information. 

Video demo: https://www.syncfusion.com/downloads/support/forum/147535/ze/Tabvideo-561140816.zip 

Before we proceed further with this, share the following details that will be helpful for us to provide better solution. 

1. Video demo of the issue
2. Browser name and version
3. Complete view page

Regards, 

Seeni Sakthi Kumar S

[Muhammad Tassadaque Zia]

Video and code is attached

Attachment: Grid_Issue_744829ed.zip

[Seeni Sakthi Kumar Seeni Raj]

Hi Muhammed,  

 

Thanks for the update. 

 

We can see the weird behavior of the DOM element to render the Grid twice in a same tab and empties another tab. We suspect the layout imperfection in your view which is causing the Grid to render twice in same view. So, we suggest to ensure the same scenario with different element or control. Check whether they are also causing the same problem. If you are still facing the same problem, please share the following details.  

 

1. Main view page with the master page
2. We could see you are rendering the Grid from partial view
1. Send the partial view of the first Grid as well second grid
2. Explain the way to render the partial view
3. Controller page
4. Model files of the Grid and view pages

 

Regards, 

Seeni Sakthi Kumar S

[Muhammad Tassadaque Zia]

Thanks for you reply could we share required details through other private medium rather than posting here public forum 

[Seeni Sakthi Kumar Seeni Raj]

Hi Muhammed, 

 

As per your request, we have created a support incident under direct-trac account. Please visit the following page and login to your account. You can upload the requested details in the support incident. 

 

https://www.syncfusion.com/support/directtrac/ 

 

Regards,  

Seeni Sakthi Kumar S 

[RouX]

Hi,

I am having the same problem. I could not create the problem myself. But I saw that a visual from my user consists of two tables and contains data that that user should not see. Did you resolve this issue. If you did can you provide the answer?
Thanks.

[Rajapandi Ravi]

Hi RouX, 

Based on your query we have prepared a sample and tried to reproduce the issue. But unfortunately your reported issue doesn’t reproduced from our side. Before start providing a solution to your query we need more information for our clarification, Please share the below details that would be helpful for us to provide a better solution. 

1)        Please share your exact requirement scenario with a detailed description. 

2)        Please share the complete Grid rendering code. 

3)        Please share the Video demonstration of the problem 

4)        Share a simple reproduceable sample if possible 

Regards, 

Rajapandi R 

[RouX]

Hi,

The informations @Muhammad Tassadaque Zia provided is my problem too. I just want to learn what solution you provide to this issue.

Thanks.

[Muthukumar Kannan]

Hi RouX,

 

 

Thanks for your update.

Based on your information, we suspect that you have using an older version than 17.3.34. We have resolved this reported issue in our v17.3.34 onwards. So, could you please upgrade your package version to 17.3.34 or later versions?

If, you are still facing the issue, please share the below details.

1. Package version details

2. if possible, please share the code snippets in which do you face this issue.

3. Share a simple reproducible sample if possible.

4. Please share the video demonstration of the problem.

The above details will help us to provide better and quick support from our end.

Please get back to us if you have any queries.

Regards,

Muthukumar K