I think of simplifying the click events and instead of attach them on column renderer (I use React), I tried to attach a single onCellClicked event (where I do get all the data for the row) and do a switch for... column. On first column there will be a delete button, on second something else, etc. I do have some colDef and column, but no index for the column. Instead I have a colId, which isn't what I need. I do have a colDef, where column header could be used, but for my case I don't have headers. I can't imagine how they omitted the column index.
You can get all columns and find its index based on the field property if you don't provide the colId:
<AgGridReact
{...}
onCellClicked={(e) => {
const field = e.colDef.field;
const colIndex = e.columnApi
.getAllColumns()
?.findIndex((col) => col.getColDef().field === field);
console.log(field, colIndex);
}}
/>
Related
I'm using the react-table package. I made a simple table with row selection. The problem is: The row selection result is an object with indexes:
{
0: true,
1: true,
...
}
But I want to be the primary key of my data like this:
{
EXoxMjyd4leYABdpuy8m: true,
2gXlClA38AU8sSM5jnZ7: true,
...
}
Code example
In the documentation, I can't find a configuration where I can set the selection key.
The question is, how can I achieve the second example?
You need to overwrite the table option getRowId.
Example:
const getRowId = (row, relativeIndex, parent) => {
// In row object you have access to data.
// You can choose parameter. In this example I used uniqueId
return parent ? [parent.id, row.uniqueId].join('.') : row.uniqueId;
}
Here is live example:
If you are using version 8 react-table; you can use instance.getSelectedRowModel() in order to get the original (data model of the rows) of the selected rows as well as the row indexes.
For instance:
const arraySelectedUsersId = instance.getSelectedRowModel().rows.map(({ original }) => (original as User).id)
I am working on WPF Datagrid where we are customizing the grid to support functionalities like search, filter, column Hiding/Un-Hiding etc,
For Filter and Search we are using CollectionViewSource to get the ICollectionView and on that list we are performing various operations mentioned above.
For a particular Functionality like search, User had reordered the columns and then performed search operation, i am getting the ICollectionView data using the below function:
ICollectionView objDatacollectionview =
CollectionViewSource.GetDefaultView(DataSource.DataGridSrcCollection);
DataSource.DataGridSrcCollection is my ObservableCollection<DataRowView>.
From the objDataCollectionView object, I get the itemArray of each row and search for the text and start highlighting the cell where the text is found, but the problem I am facing is my CollectionViewSource object always returns the DataRow ItemArray in the original order when the Grid is loaded, as it is not considering the Column Reordering, the search is not pointing to the first column, it is actually pointing to the column which was the first column when loaded for the first match text.
The question I had is , is there a way to get the item array value in the correct order on how the columns are re-ordered, if not can I use any other approach with Collectionview so that I can highlight the correct item when search is done.
Below is the sample code i had
below is the sample code
objDatacollectionview = CollectionViewSource.GetDefaultView(DataSource.DataGridSrcCollection)
// Initially get all the DataRowview ItemArray , Here i get all the rows itemarray text as it is
var temp = (from s in objDatacollectionview.OfType<DataRowView>()
select s.Row.ItemArray).ToList();
for (int i = 0; i < temp.Count(); i++)
{
// Now in each item array , i search for the string and will get the list of the strings that match the searchText
var cellitems = temp[i].Where(x => x.ToString().Contains(searchText, StringComparison.OrdinalIgnoreCase)).
Select(x => x).ToList();
//This is to point to the row where there is first occurance of the searched text.This will execute only for the first time
if (cellitems.Count() != 0 && !IsfirstSelectedRowIndex)
{
DataRowView dv = objDatacollectionview.OfType<DataRowView>().ElementAt(i);
objDatacollectionview.MoveCurrentTo(dv);
int cellIndex = temp[i].Select((Value, Index) => new { Value, Index }).Single(p => p.Value.Equals(cellitems[0])).Index;
DataGridCellInfo cellinfo = new DataGridCellInfo(cellitems[0], batchDataGrid.Columns[cellIndex]);
batchDataGrid.CurrentCell = cellinfo;
IsfirstSelectedRowIndex = true;
}
} `
In the above code as i am moving through each row itemArray data i have is the original order, not the re-ordered columns, i can use the index to column mapping, but after this operation i have to support previous search item and next search item, so i am thinking that would impact the performance if i am doing search with column display index every time.
Each DataGridColumn has a DisplayIndex property, which will tell you the current position of the column. This will allow you to determine the ordering.
I am using slickgrid in an angular application which supports multiple languages. How can I update the column headers when the selected language is changed.
My column definition looks like this and what I basically want is the grid to call myI18N again to update the column title.
{ id: "myid", name: myI18nFn('idKey'), field: "myid", width: 100}
I have an angular event that detects changes and I have access to the grid object there, I am just not sure on what I need to do make it update the column header
You need to update colDef.name property when the language changes and then trigger the grid to rebuild the header row (which occurs in the createColumnHeaders method in the SlickGrid source). The easiest way is to just update the column list with a setColumns call, which triggers a rerender of the entire grid:
function updateColumnHeaders()
{
var cols = grid.getColumns();
for(var i = 0, il = cols.length; i < il; i++)
{
cols[i].name = myI18nFn(cols[i].id);
}
grid.setColumns(cols);
}
I need to allow my users to submit multiple property addresses by clicking a button that will insert a fieldset with extra text fields. I can do this simply with form.insert(index, component); However, that index will change after the user adds an additional property. For example, the index to add the extra properties is after the 7th component, making the index 7. But when you insert it at 7, it's index is now 7 and the next property will be inserted above it. This effect is further compounded when you try to do this with contact emails and numbers in the same form. So my question is, how can I get the index of the component in the form that I wish to insert the extra fields after?
fieldset.items.getCount()
Or am I missing something?
not exactly straight forward, but not too bad either. take a look at the following code: the first part is the button handler to add a set of fields, the second is the actual function that creates the indexed fields.
handler:function () {
var parts = this.up('fieldset'),
index = parts.query('fieldcontainer').length, //calculate existing Part line items
fields = this.up('window').createPartFieldContainer(index);
parts.add(fields);
}
createPartFieldContainer:function (index) {
index = index || 0;
return {
xtype:'fieldcontainer',
items:[
{
xtype:'textfield', fieldLabel:'Item',
name:'lineItem[' + index + '].itemNumber', width:100,
emptyText:'Part Number'
}
]
}
}
in my editorGrid i have one column with dateField editor , when the grid is rendred i set that field to non editable :
myColModel.setEditable(colIdex,false)
it will be editable after the value changed in other cell in the same row
myColModel.setEditable(colIdex,true)
the probleme is : all the cells in the column are editables
how can i do to make only the cell in the selected row editable
and many thanks
Use the 'beforeedit' listener on the EditorGrid - you can inspect the field they are trying to edit. If the other field isn't set, return false to not allow them to edit that field.
Basically you can create conditional logic and hide the edit buttons based on the row model.
dataBound: function (){
var grid = this;
var trs = this.tbody.find('tr').each(function(){
var item = grid.dataItem($(this));
if( item.UnitPrice % 5 == 0) {
$(this).find('.k-grid-edit,.k-grid-delete').hide();
}
});
},
You can do it other way by just overriding the isCellEditable function.
Check the below link.
http://www.sencha.com/learn/Ext_FAQ_Grid#Disable_editing_of_particular_rows.2C_columns.2C_etc