This is a migrated thread and some comments may be shown as answers.

Grid and column resize

4 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 01 Jul 2020, 04:42 PM

     We are dealing with grid resize column,

Is there a way to set maximum width? and also is there a way to resize just 1 column only affecting neighboring column (horizontal scroll disabled)

 

Also I would like to customize reordering animation.

4 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 03 Jul 2020, 12:34 PM

Hi Ivan,

Thank you for the provided screenshot.

From the provided information it seems that the requirements aren't possible to be achieved with the current built-in functionality of the Grid. Let me provide a bit more details so that we can clarify the requirement.

We aren't sure what you mean with the following sentence:

"and also is there a way to resize just 1 column only affecting neighboring column (horizontal scroll disabled)"

Could I ask you to provide a bit more details about the specific use-case scenario that will help us to better understand it. Thank you.

Judging by the provided screenshot it, it seems that the Grid content overflows which is indeed undesired. However, by default that shouldn't happen as if the total width of all columns is more than the actual width of the Grid, then a horizontal scrollbar appears which allows the user to scroll to the columns which aren't currently visible. Please check the following article demonstrating all scenarios when it comes to configuring the column widths:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/width/

About the desired maximum width feature, it isn't currently supported. However, we have currently a feature request that can be voted for at the following link:

https://feedback.telerik.com/kendo-angular-ui/1434192-provide-a-max-width-input-property-for-grid-columns-in-a-resizable-grid

Once the feature requests gathers a significant amount of votes we can proceed with adding it to our future development plans.

About the reordering animation, there isn't an option that allows to customize it at the moment. Please feel free to log a new feature request about it in our public Feedback Portal or let me know if it is required that I do this on your behalf. Thank you.

To sum up, I understand that this may be disappointing but it seems that the required features aren't currently available. Thus at this point we can track their demand and eventually add them to our future development plans. Feel free to write back with some more details in case we couldn't understand the requirement properly. Thank you.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
n/a
Top achievements
Rank 1
answered on 03 Jul 2020, 03:04 PM

https://primefaces.org/primeng/showcase/#/table/colresize

Check out the first example "fit mode" vs "expand mode"

Where you only change size of 1 column only, Is that possible?

0
n/a
Top achievements
Rank 1
answered on 03 Jul 2020, 05:02 PM

Any way to handle an event while resizing is being done?

About reordering... Can we append column drag element to header instead of body?

0
Svet
Telerik team
answered on 07 Jul 2020, 09:43 AM

Hi Ivan,

I will provide answers to each question separately. But in the future please open separate threads for questions that aren't related to each other. Thank you in advance. That will help us to keep a clean history of the forum and provide a better support service in general.

About the columns resizing, the Grid behaves like a regular HTML table element. If the widths of all columns are set and their total width is greater than the total Grid width then a horizontal scrollbar will appear. If the total width of the columns is less than the actual width of the Grid then there will be added white space to the end of the Grid to fill in the extra space left. Please check that behavior in the following example which resembles the referenced behavior:

https://stackblitz.com/edit/angular-lq858o?file=app/app.component.ts

Any way to handle an event while resizing is being done?

I am afraid that we will need some more details on this matter in order to get a better understanding of the use - case scenario. In general the Grid will emit any event whenever it is triggered. But if the user is resizing a column it wouldn't be possible for the user to trigger another event until the resizing is over.

About reordering... Can we append column drag element to header instead of body?

In theory that would be possible by using some custom JavaScript in order to modify the DOM on (columnReorder) event of the Grid. However, that doesn't seem to be a good option as the (columnReorder) event is fired multiple times while dragging and the generated DOM would have to be updated each time which may lead to some undesired blinking or performance issues. Indeed such functionality isn't a built-in feature of the Grid and implementing it would be in the hands of the developer.

In case further information or assistance is required for any of the questions please open a separate private thread where we can discuss the options. Thank you.

Regards,
Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Svet
Telerik team
n/a
Top achievements
Rank 1
Share this question
or