I want to show the Row no in my grid.
I use cell template and there i use {{rowRenderIndex+1}}
It works fine when records are less then 14,but after record count get increased then when we scroll down the grid the Row No get initialize with one again and again.
You can add a property in the data and add column for display:
//Add property
$scope.yourData.forEach( function(row, index){
row.idx= index;
});
//Adding column
columnDefs: [
{
field: 'idx',
displayName: '',
width: 30
}
In the ui-grid FAQ there is a section "How can I show a sequence number/id in a column in my grid?"
I believe you are looking for the second answer in that section:
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'
The rowRenderIndex is used to index rows that are rendered at that moment.
Related
I am using angularjs UI-Grid library for grid and set default sorter enable.
e.g. enableSorting=true, But its not working on few column where column format is in number and percentage sign (10,0%.90% etc).
Can any one help on this?
If you have formatting a "filter" on a column, and it affects how your sorting should occur, you'll want to add to the column definitions:
sortCellFiltered: true
(optional) False by default. When true uiGrid will apply the cellFilter before sorting the data. Note that when using this option uiGrid will assume that the displayed value is a string, and use the sortAlpha sortFn. It is possible to return a non-string value from an angularjs filter, in which case you should define a sortingAlgorithm for the column which hanldes the returned type. You may specify one of the sortingAlgorithms found in the rowSorter service.
Also of interest for filtering may be:
filterCellFiltered: true.
(optional) False by default. When true uiGrid will apply the cellFilter before applying "search" filters.
Reference:
http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef
Try sortDirectionCycle to remove the third state of sorting.
columnDefs: [
{ field: 'name', sortDirectionCycle: [uiGridConstants.ASC,
uiGridConstants.DESC] },
{ field: 'gender', sortDirectionCycle: [uiGridConstants.ASC,
uiGridConstants.DESC] },
{ field: 'company', enableSorting: false }
]
From document, When clicking on a column heading the sort direction will cycle to ascending, then descending, then back to unsorted.
I got solution, In my scenario, I got object values in string format like [{persent: "10%"},{percent: "0%"}, {percent: "90%"}]; So i have provide type in column definition eg. type: 'numberStr'. and its working for me.
I want to add additional column to grid dynamically on table instantiation.
So, I've added process function to gridPanel with following section
var clmn = {
xtype: 'checkcolumn',
dataIndex: 'test,
editor: {
xtype: 'checkboxfield'
}
};
config.columns.push(clmn);
As you can see, rowediting plugin is used here too.
Actually column is added and displayed on screen. But it is not hold correct data that has been loaded, only defaultValue from model.
On row modification (when rowediting plugin is started) real data is displayed.
What is the issue here? May be there is some refresh method that should be used to refresh metadata or sth like this..
Please, take into consideration that i am working via Sencha Architect
columns.push() is not proper way to do this. So you should use reconfigure method which is mentioned here. If your store is already have fields for new columns you don't have to pass it again. Just get your current columns and add your new columns and reconfigure the grid.
edit for answer : Your problem easer than before. you can just pass your columns to it like below;
var yourGenericColumns = [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'}];
yourGenericColumns.push({text : 'Age', dataIndex: 'age'});
Ext.create('YourApp.YourCustomGrid',{
columns : yourGenericColumns
});
I'm wondering if there's a way to select the "Grouping" row in ag-grid.
For example, in the example shown on the website:
http://www.ag-grid.com/angular-grid-grouping/index.php
You can set the "rowSelection" parameter to "single" in order to highlight an entire row at the lowest node. However, that does not allow you to highlight the "Country" row.
In the example, the only way to do this is to "select all" the elements below that row.
Thanks!
According to the documentation, setting the grid option groupSelectsChildren to false will make the grouping row selectable, independently from its children.
groupSelectsChildren: When true, selecting a group will have the
impact of selecting all it's children. The group will then display
'selected' when all children are selected, 'unselected' when none are
selected and 'intermediate' when children have a mix of selected and
unselected. When the node is selecting children, it will never appear
in the selected set when calling api.getSelectedNodes(). When false,
then the group is selectable independently of the child nodes. When
selecting the group node independently of the children, it will appear
in the set when calling api.getSelectedNodes().
I had the same problem so I worked around it by emulating the look-and-feel of selecting rows.
In your columnDefs object, add the cellClassRules attribute to EVERY column definition (so every cell will be highlighted, making it appear that the row itself is highlighted when you click on it):
var columnDefs = [
{ headerName: "#1", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col1" },
{ headerName: "#2", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col2" },
{ headerName: "#3", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col3" }
]
Then add an event listener for onCellClicked in your gridOptions object:
onCellClicked: function(cell) {
SelectedRowIndex = cell.rowIndex;
$scope.gridOptions.api.refreshView();
}
In your controller, define a variable called SelectedRowIndex:
var SelectedRowIndex; // this will contain the currently selected row number
Now create a function called CustomRowStyle which is called by ag-grid each time it is about to render a cell on-screen. This function will check if the cell is in the same row as the SelectedRowIndex (based on which row the user last clicked on) to determine if the cell should appear with the rowSelected class.
function CustomRowStyle(params) {
return params.rowIndex === SelectedRowIndex
}
Finally, define a rowSelected class with your selected row CSS:
.rowSelected {
background-color: silver !important;
}
Whichever row you click on (whether it's a group item or a child item) will appear with the rowSelected CSS. Your controller can always know which row is currently selected by checking the SelectedRowIndex variable.
This probably won't work for all cases but I found that as of version 20.2.0 RowNode's have a 'parent' property (Note: I'm not saying that feature was added in 20.2.0, just that I haven't gone and checked previous versions). So I do this:
api.getRowNode('child-row-id').parent.setSelected(true)
Obviously depending on how many levels of grouping you have and how dynamic that is (i.e. can the user change the grouping configuration, can you have n levels of grouping, etc.) you'll need to detect and adjust, but this works well for my particular use case of remembering what was selected and reselecting it on page refresh because my grid always starts out in the same grouping state on page load.
set groupSelectsChildren={false} and use this code onRowClicked={this.onRowClicked}
use any unique data identifier for selecting the node.
onRowClicked = (row) =>{
let that = this;
this.gridApi.forEachNode(node =>{
if(node.data.id === row.data.id) { that.gridApi.selectNode(node,true);}
});
}
I have a UI grid, and I want to give different CSS to my row which header row for group.
Here , I want to give say blue color to entire row which is group row,(has + sign), also, I dont want a cell template to get applied to it in action column.
I can do condition in cell template but how to identify this row.
I found that , group header row gets class 'ui-grid-tree-header-row'
But not sure how to use this information.
I am looking for something like this :
Use ng-if = "row.groupHeader" in your cell template.
I used something like this :
{
name: 'name',
displayName: 'Name',
cellTemplate: '<div class="ui-grid-cell-contents">'+
'<div class="yourHeaderClass" ng-if="row.groupHeader">{{do or print
something only for group row header}}</div>'+
'<div ng-if="!row.groupHeader">{{do something for group children}}
</div>
</div>'
},
you can use ng-class in your UI-grid row template. from row.entity you will get your data and based on data you can determine whether group exist or not and conditionally select your class. by setting external-scope reference to grid you can use controller method for you group exist related calculation
I have a grid.Panel configured as follows:
var myGrid = new Ext.grid.Panel({
id:'myGridID',
layout:'anchor',
title:'My Grid',
border: false,
store:myStore,
frame:false,
columns:[{header: 'ID', hidden:true, hideable:false, dataIndex: 'data_id'},
{header:'Title', flex:0.3, sortable:true, dataIndex:'data_title'},
{header:'Description', flex:0.7, sortable:true, dataIndex:'data_description'}]
....
Its supposed to show columns Title and Description and keep column ID hidden (I have to keep the column there because I need to get the ID of the selected record).
When my web page launches I load the data in the grid perfectly. The first column (the one with header ID) is hidden as its supposed to be and columns Title and Description show just fine.
The problem is that when I reload the store after adding a record to it the grids headers show fine (only Title and Description) but the data of column ID is also shown.
I used this line to reload the store:
Ext.getCmp('myGridID').getStore().load()
I found that if I resize any column (Title or Description), the data from column ID disappears.
Why do you use 'hideable:false'? I don't think you should specify that, seems useless. Try running the code without it.