1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Unable to show grid in accordians

Unable to show grid in accordians

Hi,

I have been trying to show grids in accordions, but the grid is being displayed. 

Can you please provide me an example using the JS2 controls of grid in an accordion.

6 Replies
PS Pavithra Subramaniyam Syncfusion Team December 27, 2017 01:08 PM UTC

Hi Ujwala, 

We have checked your query and we suspect that the cause of the issue is the Grid component may be rendered before the Accordion component. we have created a simple sample in which Essential JavaScript 2 Grid component is rendered in Essential JavaScript 2 Accordion component. Please refer to the following sample link. 

 
The CSS properties of Accordion and Grid components are overriding when Grid is rendered in Accordion.We have confirmed “Overriding of CSS properties of Grid and Accordion” as a defect and logged a report for the same. The fix will be available in the end of January release. However we have Prepared the sample with Custom CSS that can be used until then.  

<style> 
      .e-accordion .e-acrdn-item .e-acrdn-panel .e-grid .e-content{ 
        padding:0px; 
      } 
</style> 

If we misunderstood your query , Please Provide more information about your issue or Could you please replicate your issue in the above sample so that we can analyze based on that and provide you better solution? The information provided would be a great help for us to resolve this issue.  

Regards, 
Pavithra S. 


UJ Ujwala December 27, 2017 03:31 PM UTC

I am using the cdn links to get the syncfusion controls.

As, in the code we have the below line

Grid.Inject(Selection);

I am facing error saying "Grid is not defined".

If I don't place the line Grid.Inject(Selection); , I am not able to render the grid in the accordion.

Its directly taking the content as a string.

Can you please help me with this.





PS Pavithra Subramaniyam Syncfusion Team January 2, 2018 11:43 AM UTC

Hi Ujwala, 

We have checked your query and we suspect that Grid module is not imported in your sample and you have to create a DOM element for grid with “display:none” style property to render Grid. Please refer to the code example and sample link. 

[index.ts] 

import { Accordion } from '@syncfusion/ej2-navigations'; 
import { Grid } from '@syncfusion/ej2-grids'; 
import { Query, DataManager } from '@syncfusion/ej2-data'; 
import { orderData } from './datasource'; 

/** 
*  Grid in Accordion sample 
*/ 
let acrdnObj: Accordion = new Accordion({      //Initialize Accordion component 
       items : [ 
           { header: 'Essential JavaScript 2 Grid1', expanded:true,content : '#Grid1'}, 
           { header: 'Essential JavaScript 2 Grid2', expanded:true,content : '#Grid2'} 
           ] 
             
    }); 
    acrdnObj.appendTo('#accordion'); 
    let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15)); 
    let grid: Grid = new Grid( 
        { 
            dataSource: orderData.slice(0,5), 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right' }, 
                .   .   . 
               ] 
        }); 
        grid.appendTo('#Grid1'); 
        let grid: Grid = new Grid( 
        { 
            dataSource: orderData.slice(0,5), 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right' }, 
                .   .   . 
        }); 
        grid.appendTo('#Grid2'); 
         

[index.html] 
 
<!DOCTYPE html><html><head> 
    <meta charset="UTF-8"> 
    <link rel='nofollow' href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" /> 
    <link rel='nofollow' href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" /> 
    <link rel='nofollow' href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" /> 
      .   .   . 
      .   .   . 
</head> 
<body> 
<div class="control-section"> 
    <div class="content-wrapper"> 
        <div id="accordion"> 
        </div> 
        <div id="Grid" style="display:none"> 
        </div> 

        <div id="Grid2" style="display:none"> 
        </div> 
    </div> 
</div> 
</body> 
</html> 
 

If we misunderstood your query please provide more information on your issue or could you please reproduce the issue in the provided sample that will be helpful us to provide a better solution. 

Regards, 
Pavithra S. 


UJ Ujwala January 3, 2018 01:44 PM UTC

Thanks for this solution. This helped.

The grids I am using in the accordion were column menu type grid controls of "Essential JS 2 For Javascript".

I am unable to access filtering, that is the dropdown which appears on header column is not being displayed on click. 

Can you please help me with this. 

UJ Ujwala January 4, 2018 10:14 AM UTC

Hi Pavithra,

As you mentioned in the first reply:

"The CSS properties of Accordion and Grid components are overriding when Grid is rendered in Accordion.We have confirmed “Overriding of CSS properties of Grid and Accordion” as a defect and logged a report for the same. The fix will be available in the end of January release. However we have Prepared the sample with Custom CSS that can be used until then. "

The solution you have provided is working fine. But, is that a temporary solution? If it is a temporary solution, can you please let me know, by which month can we expect the fix for sure.

PS Pavithra Subramaniyam Syncfusion Team January 4, 2018 12:22 PM UTC

Hi Ujwala, 

Query #1: unable to access filtering, that is the dropdown which appears on header column is not being displayed on click 

We have checked your query and we suspect that Filter module in not injected to Grid component. Grid Features are segregated into individual feature-wise module. To use any feature, we need to inject Feature modules by using Grid.Inject() method. Please refer to the code example documentation link and sample link. 

import { Accordion } from '@syncfusion/ej2-navigations'; 
import { Grid, Filter, ColumnMenu, Page } from '@syncfusion/ej2-grids'; 
import { orderData } from './datasource'; 

Grid.Inject( Filter, ColumnMenu, Page); 

/** 
*  Grid in Accordion sample 
*/ 
let acrdnObj: Accordion = new Accordion({      //Initialize Accordion component 
    items: [ 
        { header: 'Essential JavaScript 2 Grid', expanded: true, content: '#Grid' } 
    ] 
}); 
acrdnObj.appendTo('#accordion'); 

let grid: Grid = new Grid({ 
    dataSource: orderData, 
    allowPaging:true, 
    allowFiltering: true, 
    filterSettings: { type: checkbox }, 
    showColumnMenu: true, 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'right' }, 
        .    .    . 
    ] 
}); 
grid.appendTo('#Grid'); 




Sample link               : http://plnkr.co/edit/vFZGUNzZMyJD6ImbOoB6?p=preview  

If we misunderstood your query please provide more information on your issue or could you please reproduce the issue in the provided sample that will be helpful us to provide a better solution.  

Query #2: is that a temporary solution? If it is a temporary solution, can you please let me know, by which month can we expect the fix for sure. 
 
Yes, the provided solution is temporary. The fix will be available in our January 10, 2017 release. 

Regards,  
Pavithra S.  


Loader.
Up arrow icon