collapse the headers of grid

[Ali Ossaily]

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

[Farveen Sulthana Thameeztheen Basha]

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 

[Farveen Sulthana Thameeztheen Basha]

Hi Ali, 

  

Please ignore the previous update. 

  

Regards, 

  

Farveen sulthana T

[Ali Ossaily]

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,

[Farveen Sulthana Thameeztheen Basha]

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 

[Ali Ossaily]

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

[Farveen Sulthana Thameeztheen Basha]

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:- 

https://help.syncfusion.com/js/grid/cell#header 

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

Regards, 

Farveen sulthana T