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

Sparkline in Grid in Tab Rendering Issue

Thread ID:

Created:

Updated:

Platform:

Replies:

142870 Feb 23,2019 01:30 PM UTC Feb 27,2019 06:31 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: DataGrid
Allen
Asked On February 23, 2019 02:32 PM UTC

When the page first loads I have several tabs with grids loaded in each. Each grid has the exact same attribute, settings, etc, just different data(think categories). Each grid has a column which displays a sparkline graph. When I switch to a different tab, that column shows the sparkline graph in the column but it is "scrunched". Now if I take the browser window and resize it, it fixes itself. How do I fix this issue? Please see attached images.

Bad: https://drive.google.com/file/d/11IupGtX-GVeXjZqg5ZJFstYIcTa7umk8
Good: https://drive.google.com/file/d/1IzlZb2s_Nf_rf93dwM-1Dy_ixQ71hp9-/view?usp=sharing


The issue seems similar to the same issue this person was experiencing: https://www.syncfusion.com/forums/126439/grid-not-refresh-after-add-edit-in-tab-control

Pavithra Subramaniyam [Syncfusion]
Replied On February 27, 2019 06:31 AM UTC

Hi Allen, 
 
Sorry for the delay response, 
 
As per your query, we have validated reported behavior at our end. But, unfortunately we are unable to reproduce it. We have created a sample with Essential JavaScript 2 Tab component and each Tab has Grid with sparkline graph on the column using columnTempate property. Please refer the sample code example and sample more information. 
 
 
<div class="control-section"> 
    <div id="sparkline" class="row"> 
        <div class="cols-sample-area"> 
            <script type="text/x-template" id="ord_columnTemp1"> 
                <div id="spkline${EmployeeID}" />  // Here bind the sparkline graph based on EmployeeID data basis 
            </script> 
           <script type="text/x-template" id="cus_columnTemp1"> 
                <div id="spkline${EmployeeID}" /> // Here bind the sparkline graph based on EmployeeID data basis 
            </script>  
     .   .     .    . 
    <div class="e-sample-resize-container"> 
        <div id="tab_orientation"> 
            <div class="e-tab-header"> 
                <div>OrderID</div> 
                <div>CustomerID</div>                 
            </div> 
            <div class="e-content"> 
                <div>                     
                    <div id="Order_Grid"> 
                    </div> 
                </div> 
                <div>                     
                    <div id="Customer_Grid">                        
                    </div> 
                </div>               
            </div> 
        </div> 
    </div> 
</div> 
 
    <script>     
        var tabObj = new ej.navigations.Tab({ 
            heightAdjustMode: 'None', 
            height: 320, 
            showCloseButton: true, 
        }) 
        tabObj.appendTo('#tab_orientation');        
         
            var grid = new ej.grids.Grid({ 
                  .  .  .  . 
                columns: [ 
                    .   .    .   . 
                   { headerText: 'Tax per annum', template: '#ord_columnTemp1', textAlign: 'Center'  },  // bind the sparkline group on grid column 
                ], 
            }); 
        grid.appendTo('#Order_Grid');        
 
                var grid1 = new ej.grids.Grid({ 
                  .    .    .    . 
               columns: [ 
                    { headerText: 'Tax per annum', template: '#cus_columnTemp1', textAlign: 'Center'  }, // bind the sparkline group on grid column 
                     
                ], 
            }); 
        grid1.appendTo('#Customer_Grid'); 
var line = new ej.charts.Sparkline({ 
                    height: '50px', 
                    width: '150px', 
                    lineWidth: 2, 
                    valueType: 'Numeric', 
                    fill: '#3C78EF', 
                    dataSource: getSparkData('line', i) 
                }); 
line.appendTo('#spkline' + i); 
 
 
 
If you are facing the same issue or we misunderstood your query then share more information that will be helpful for us to provide a better solution as soon as possible. 
 
  1. Share the step by step replication procedure to reproduce in our end.
  2. If possible share video to demonstrate issue
  3. If you modify the sample for your requirement please send the code changes.
 
Please get back to us, if you need further assistance. 
 
Regards,  
Pavithra 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