Sparkline in Grid in Tab Rendering Issue

[Allen]

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]

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); 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/142870/ze/CoreGridAndSparkInTab-51887498.zip 

 

Sample browser link: https://ej2.syncfusion.com/aspnetcore/SparkLine/SparkGrid#/material 

 

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.