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
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

collapse the headers of grid

Thread ID:

Created:

Updated:

Platform:

Replies:

145539 Jun 26,2019 11:17 AM UTC Jul 2,2019 10:04 AM UTC jQuery 6
loading
Tags: ejGrid
Ali Ossaily
Asked On June 26, 2019 11:17 AM UTC


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 [Syncfusion]
Replied On 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 


Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On June 27, 2019 04:11 PM UTC

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

Ali Ossaily
Replied On 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,



Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On 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 



Ali Ossaily
Replied On 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

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On 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 


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