I been trying to implement a drag and drop feature in kendo-grid for angular2 to change the order of the columns within a grid.
I noticed there's a kendo-sortable for drag and drop, but I'm failing to see how I can implement the kendo-grid with this feature.
Here is one way you can do this http://plnkr.co/edit/ehL52SiMkLBGb34sC8Dd?p=preview
The column chooser component is using the SortableComponent and allows you to reorder column, which are reflected in the Grid.
Related
Use: We use ag-grid like we would use excel on our client software. In it we have some custom calculations that I run with the valueGetter function. Our grid has over 50 ColumnDefs. This means that some of the columns are not in view until you scroll right or left respectively. All my functions work and I have no calculation issues.
Issue: When I edit a Value I have some columns that now need to fire the valueGetter. For the columns that are currently in view they fire and run the calcs without issues, however there are some columns that are out of view and some columns are hidden. On these specifically the grid will not run the value getter until it is in view or the hidden flag on the column has been set to false.
The main reason for this being an issue is that because the grid is so wide I have to hide and show certain columns as a "view Groups". I need to know if there is a gridOptions setting or grid Directive that I am missing? Or is there another solution where I can have the calculations for the entire runs when I edit a field.
ag-grid version 23.0.2
angular version 8
Not sure if you are using Adaptable with your AG Grid implementation but if you are then this might help:
We had this issue a while back and we solved it by moving the custom calculations out of AG Grid and into Adaptable's Calculated Columns which will evaluate whenever any relevant cell in the row updates.
I am trying to create a table using the Tabulator library, and I'm encountering a problem with accessibility.
Using any of the examples on the Tabulator site which have column sorting, I need to tab into the column and use the space bar or enter key to sort the column (simulating a click or a touch). However, I am unable to use keyboard to access the columns - it appears that only a mouse click is possible.
Are there any settings when declaring my columns that I can use to gain keyboard accessibility to the columns?
This functionality is not built in at present, If you would like to see the functionality added to the library please create a Feature Request
I want to make some elements of my app able to be dragged and dropped by the user, so that the user can customize the position and design his own UI.
What I mean by drag and drop is that for example, when you hold and drag the icons or widgets on your phone, you can customize their position. So I want to make some text or images of my app function just like that.
Thanks for the help!
I'm playing around a bit with Kendo UI for Angular and can't seem to find an easy way to disable sorting on specific columns of a grid.
There's an allowUnsort in sort-settings.d.ts, but I'm uncertain on how to use this (and this appears to relate to removing sorting afterwards, not from the start).
Or perhaps I'm simply using the grid wrong, that's also possible..
My situation is as follows:
I'm trying to use a grid to display some rows, and depending on the type of data, it should render a different icon in the first column. Also, I'm not using a 'real' header in that column, but replaced it with a button to create a new row.
To get my button in the header, I use a <template kendoGridHeaderTemplate ...>...</template>. This always seems to add a link around the header cell if sortable is enabled, which is what I'm trying to avoid (in some cases).
Is there a way around this?
Setting [sortable]="true" for the Grid component will enable sorting globally. Then you can fine-tune which column has sorting by disabling it per column, i.e [sortable]="false"
Here is a quick example:
http://plnkr.co/edit/hLbzC5jKJwVdMtRmh0cH?p=preview
I have a page with two buttons in header. I need to display same data on click of both buttons resp. but in different layout, means at click of first button i want to display a kendo asp.net mvc grid and at click of second i want tot display that data in a form of listview. So the question is, is it possible to display the data initially as a grid or listview (any one ) and at runtime we can change the format from grid to listview so that we don't have to create seperate controls partial views for that. Or any better idea on how to implement it is also welcomed.