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. Image for the cookie policy date

collapse the headers of grid


I have this grid ej1 Grid is there a way to collapse the columns depending on stacked header value so that they appears when the user click on the header 

and another question how to group the add and edit inputs so that they appears under the name of each stacked header



6 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 27, 2019 04:10 PM UTC

Hi Lam, 

We need some more additional details to find the cause of the issue. Share us the following details. 

  1. Complete Grid code example(both in server and client side).
  2. Video Demo to replicate the issue.
  3. Have you handled the filter query on server side to filter the childGrid records to display on the Grid.

Regards, 
Farveen sulthana T 



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 27, 2019 04:11 PM UTC

Hi Ali, 
  
Please ignore the previous update. 
  
Regards, 
  
Farveen sulthana T


AO Ali Ossaily June 28, 2019 10:47 AM UTC

Dear Farveen sulthana T  ,

As per my request , in the screen shot down there is a caption marked in red color explain my issue

1- Collapse all columns under stacked header , so that the columns will be hidden until the user click on the stacked header they will appear . I need that because I have many columns in the page so that , the title of the columns does not appear properly.

2-In Create Or Edit Form The Columns are not grouped under their stacked header , what I need is to put all the inputs in create or edit form grouped under the name of their staked header

Thanks

Regards,




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 30, 2019 03:11 PM UTC

Hi Ali, 

Thanks for contacting Syncfusion Support. 

Query#1:-I have this grid ej1 Grid is there a way to collapse the columns depending on stacked header. 
 
We have checked your query and The stacked headers helps you to group the logical columns in the Grid. We doesn’t collapse and expand the columns based on stacked header because it affects the Grid’s structure and behavior. We doesn’t have support to achieve this requirement. 
 
Query#2:- In Create Or Edit Form The Columns are not grouped under their stacked header , what I need is to put all the inputs in create or edit form grouped under the name of their staked header 
  
As we said earlier, we doesn’t have support to group and place their editForm under stackerHeader, it will affect the Grid’s structure and we doesn’t predict the columns and column’s width on rendering of the Grid. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Farveen sulthana T 




AO Ali Ossaily July 1, 2019 06:04 AM UTC

Hello Farveen sulthana T,

Thanks a lot for your support ,

As you see in the screen shots, column names does not appear fully and properly.
Im wondering if there is a way to make them appear more accurately and fully.

Thanks again , 

Regards


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 2, 2019 10:04 AM UTC

Hi Ali, 

Query#:- As you see in the screen shots, column names does not appear fully and properly. Im wondering if there is a way to make them appear more accurately and fully. 
 
If you want to display the header(column names) to be fit into the cell, we suggest you to use allowTextWrap property of the Grid. Auto wrap enables the Grid to wrap the cell content or header content to next line when the content exceeds the boundary of the cell width. 

Refer to the code example:- 

$(function () { 
        $("#Grid").ejGrid({ 
            dataSource: window.gridData, 
            allowPaging: true, 
            allowTextWrap: true, 
            textWrapSettings: { wrapMode: "header" }, 
            columns: [ 
                { field: "OrderID", width: 100 }, 
                { field: "EmployeeID", width: 100 }, 
                   .   .   . 
            ] 
        }); 
    }); 

Please refer to the documentation Link:- 

Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon