We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147535 Sep 14,2019 07:31 PM UTC Sep 20,2019 10:41 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: DataGrid
Muhammad Tassadaque Zia
Asked On September 14, 2019 07:31 PM UTC

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
Replied On September 14, 2019 07:38 PM UTC

Screenshot

https://ibb.co/PzZhcmP


Muhammad Tassadaque Zia
Replied On September 15, 2019 07:37 PM UTC

I am using 17.2.0.51 version

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 17, 2019 01:29 PM UTC

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> 


Regards,  
Seeni Sakthi Kumar S 


Muhammad Tassadaque Zia
Replied On September 17, 2019 05:40 PM UTC

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 [Syncfusion]
Replied On September 18, 2019 09:08 AM UTC

Hi Muhammad, 

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


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
Replied On September 18, 2019 12:23 PM UTC

Video and code is attached

Attachment: Grid_Issue_744829ed.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 19, 2019 10:20 AM UTC

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
Replied On September 19, 2019 12:08 PM UTC

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 20, 2019 10:41 AM UTC

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. 
 
 
Regards,  
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon