I have a grid that doesn't have header. The requirement is to sort the grid manually. I have a list of columns in a combobox and radio buttons to specify column name and sort direction respectively. How can I sort that grid on a button's click? Similarly how can I hide/show columns in the same grid using the same approach(selecting columns from a list and clicking a button)?
There are API methods you can call for both your tasks.
For sorting, mind that sorting is done by store, not by grid. You can find relevant methods in Ext.data.Store documentation - search for keyword 'sort'.
For columns manipulation, you would get the column from items collection of Ext.grid.header.Container.items and then you would call show or hide method on that column.
Related
I have a grid with few columns which are sortable. Currently if user clicks on any column, it gets sorted, and at the same time grid clears existing sort. I want grid to retain the sort of existing column as well.
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3mg5
You can use multiColumnSort config on your grid. By doing it this way your grid will not clear the existing column sort option. However, you should also give option to user to clear the sort state.
Here is the working solution - https://fiddle.sencha.com/#view/editor&fiddle/3mg6
Currently, I'm able to filter the grid using the code
new Ext.ux.grid.GridFilters({local: true,filters:[columns]}) as plugin. But this filters the store. And as the grid contains combo cells it maintains the stored value in store and displays it via the combo renderer.
I just want to know how can this be achieved so that the filter happens on the display values of the combo and not from the store Or can it be modified to filter from grid view?
Thanks in advance
In the angular ui grid i have too many columns to display.
Want to display extra columns as expand collapse under each row.
Which means expand/collapse button will be provided for each row and while exanding a particular row the extra columns headertemplate will b displayed along wil b displayed along with column values.
Is it poasible with angular ui grid
As far as , there is no an option for that.
You can use the following to make things work as you wish:
remove default row headers by setting to false enableExpandableRowHeader
adding a custom row header by calling $scope.gridApi.core.addRowHeaderColumn
For reference :
http://ui-grid.info/docs/#/tutorial/114_row_header.
http://ui-grid.info/docs/#/tutorial/216_expandable_grid.
I have charts on a tab, that should only show if 1 value from a column filter is selected.
For example if a field named: BUSINESS_UNIT has values of "HR","FIN","IT" The charts should only show data if 1 value is filtered on. Such as "HR."
These charts do not contain the BUSINESS_UNIT field itself.
I tried using the Limit Data Using expression, but for some reason the limit expression UniqueCount(BUSINESS_UNIT)=1 doesn't work.
How would I hide the data in the charts, unless 1 BUSINESS_UNIT is selected?
What you could do is hide the filters panel and create radio buttons on a new text area for each property to mark data. If you need help setting this up let me know. Then in your visualisations limit data using markings and show an empty visualisation if no items are marked.
One downside to this is maintenance, if the values change you will have to update the UI.
Another possible solution (untested) is to change the filter panel properties from checkboxes to radio buttons.
Filter Panel Properties:
http://stn.spotfire.com/spotfire_client_help/filter/filter_panel_properties.htm
You want it to look something like this:
http://stn.spotfire.com/spotfire_client_help/filter/filter_radio_buttons.htm
I have just started with angularjs. Just wanted to know that if it is possible to create a sub grid inside another ng-grid. There would be some links in a column of the grid and when I click a particular link a grid corresponding to that link should be formed inside the already existing grid.The original grid would be having say 5 columns while the new grid will have say 4 columns. So something on the lines of colspan or something similar is what I look for.
If you are open for writing Angular Directive then you can use any grid ,other than ng-grid which has subgrid feature.
I know like Kendo Grid has subgrid feature and jqgrid has subgrid feature. I wrote a Grid using Google Closure library , this also has subgrid feature.
If I understand your question, you need something like master/details inside grid, it not part of base functionality. nggrid has fixed row height, for virtual scrolling purpose. On our project we have created custom grid plugin base on nggrid
Solution that we used is:
write custom sort function, which populate duplicated rows always below main
when we click expand button we duplicate current row n-times depend on subgrid height
in main row we create css overlay container which hides duplicated rows
load overlay container content via ajax
When we click hide button, we hide overlay, and remove duplicated rows.