When text is selected in a v-data-table row, the click:row event is fired.
Is there any way to prevent this?
Replicate sandbox
https://codesandbox.io/s/pedantic-nightingale-fbyk2
Instructions
Select any value in the table and watch the console
A workaround would be to check if there was some selected text at the time you clicked. Your rowClick method would be:
rowClick(item) {
if (window.getSelection().toString()) {
return;
}
console.log(item);
}
Related
I've written an onRowClick function to change the rows tableData.checked value when the row is click as seen in the answer here #300
I can see the checked state updating in a console log but the checkbox itself does not change visibly until I actually click another rows checkbox. It will then show all the checkboxes that had their tableData.checked values updated. I'd like to be able to have the checkbox actually display this change to the user onRowClick.
Here is my current code:
<MaterialTable
onRowClick={(event, rowData) => {
console.log(event.target, rowData);
console.log(
"Row Selection State Before: " + rowData.tableData.checked
);
rowData.tableData.checked = !rowData.tableData.checked;
console.log(
"Row Section State After: " + rowData.tableData.checked
);
}}
options={{ selection: true}}
/>
This is the state of the UI on my first row click:
Console Log on first row click:
UI After selecting one checkbox (clicking directly on the checkbox of another row):
Console Log after clicking the initial row again:
Is there any way to make sure the UI updates for the MaterialTable component without resetting anything when the checked state is updated programmatically?
I've also gotten tableRef.onRowSelected working properly but the UI still doesn't re-render with the rows checkbox selected.
Here is the codesandbox with the fix I've attempted
Figured this one out with some help from #orestes22 in the official material-table Gitter chat.
Add tableRef to state:
state = {
tableRef: React.createRef(),
}
Then add the tableRef prop to your Material Table
<MaterialTable
tableRef={this.state.tableRef}
/>
Then on the onRowClick prop/function use tableRef to access dataManager and onSelectionChange
<MaterialTable
tableRef={this.state.tableRef}
onRowClick={(event, rowData) => {
// Update the clicked rows checked state
rowData.tableData.checked = !rowData.tableData.checked;
// pass dataManager the current rows checked state and path/ID, the path/ID needs to be an array, ex: [1]
this.state.tableRef.current.dataManager.changeRowSelected(
rowData.tableData.checked,
[rowData.tableData.id]
);
// call the onSelectionChange and pass it the row selected to ensure it updates your selection properly for any custom onSelectionChange functions.
this.state.tableRef.current.onSelectionChange(rowData);
}}
/>
I have created a component that allows users to select objects from a list and put them into another "selected list" lets say. So there are 100 items in the main list and however many in the users selected list. They can of course remove and add items as they want.
There are two buttons at the bottom of the modal. Cancel and Update. Where Cancel forgets anything they have added or removed (essentially an Undo of when they popped up the modal) and Update technically does nothing because when you are adding and removing, I am actually updating the real selected list.
So my data has these two properties (among others of course):
originalSelections: [],
selectedMedications: [],
There is a method that only gets called one time to set the selectedMedications property to whatever the current state of originalSelections is. I have a console.log to prove I am not running this method more than once and it NEVER gets hit again.
console.log('Post Initing');
let Selected = [];
for (let med of this.value.OtherNotFromEpic) {
let match = this.otherMedications.find(x => { return x.value === med });
if (match) {
Selected.push(JSON.parse(JSON.stringify(match)));
this.originalSelections.push(JSON.parse(JSON.stringify(match)));
this.selectedMedications.push(JSON.parse(JSON.stringify(match)));
}
}
I was baffled at why the selectedMedications was changing, so I added a watch to let me know if it was:
watch: {
originalSelections(newValue) {
console.log(' ** Original Selection Changed', this.init, newValue);
},
},
The Cancel method is as follows:
cancel() {
$('#' + this.modalID).modal('hide');
console.log('Cancel: this.originalSelections', JSON.parse(JSON.stringify(this.originalSelections)));
this.selectedMedications = this.originalSelections;
this.$nextTick(() => {
console.log(' Cancelled: this.selectedMedications', JSON.parse(JSON.stringify(this.selectedMedications)));
});
},
You can see that I am setting selectedMedications to whatever it was originally.
The odd thing is... This WORKS 100% the first time I bring up the modal. So I pop up the modal, remove an item, cancel the modal and it brings back the item I removed. Perfect!
If I bring the modal up again, remove that same item or any other item, cancel the modal and that item stays removed and the watch is actually hit. I have NO other place in the code where originalMedications = … or originalMedications.push or even originalMedications.slice ever happen. And it is my understand that the JSON.parse(JSON.stringify(match)) code I use to set it is making a new object and not a reference in any way.
Another odd thing I have found is that if I refresh the page, open the modal, cancel out without doing any adding or removing. Then I bring up the modal again and try either add or remove, then cancel the modal, those items do not revert back to the originalMedications state because originalMedications is the same as selectedMedications. Aargh!
So HOW can a property get altered when I never do anything to it after the initial setting of it?
In the cancel method, when below direct assignment is done here after both data is referring to same (since its array). So any time after the first cancel both originalSelections and selectedMedications array would have same reference and hence same data.
this.selectedMedications = this.originalSelections;
instead better to use concat as below? This will create a copy of originalSelections and assign that to selectedMedications. So any operations on selectedMedications will not affect the originalSelections.
this.selectedMedications = [].concat(this.originalSelections);
I did not find keydown event in Table Methods. I tried to add
#keydown.native="test"
in a table but is doesn't work.
How to solve this problem?
Thanks all. Here, my req is to monitor Shift keydown event, to implement batch rows selection in a table. That's why I wanna find keydown event for table. However, el-table has not the event. So, I find we need to implement it in the document element.
created:function(){
document.onkeydown=function(e){
var key=window.event.keyCode;
if(key==16){
alert('Shift down')
}
}
document.onkeyup=function(e){
var key=window.event.keyCode;
if(key==13){
alert('Enter up')
}
}
},
I have an ExtJS 4 grid with GroupingSummary Feature. ExtJs Default is grid is expanded when user clicks on any cell in grouping row. I want to disable this feature, no expansion should take place except when user clicks on designated 'expand' icon. How do I accomplish this?
There is the 'groupclick' event, is there a way to override its default behaviour and do nothing / remove it?
Thanks in advance
The method for it appears to be inherited from Grouping rather than GroupingSummary, so I suspect you need to override this method to prevent the current behaviour:
onGroupClick: function(view, group, idx, foo, e) {
var me = this,
toggleCls = me.toggleCls,
groupBd = Ext.fly(group.nextSibling, '_grouping');
if (groupBd.hasCls(me.collapsedCls)) {
me.expand(groupBd);
} else {
me.collapse(groupBd);
}
So you will need another file with something similar to the following:
Ext.require('Ext.grid.Grouping');
Ext.define('your.class.here', {
override: 'Ext.grid.Grouping',
onGroupClick: function() {
//do nothing
});
)};
Then you should be able to write a function that mimicks it was doing on groupclick, but instead on your icon click. Hope that helps.
How do you make a fireEvent itemclick after the store loads.
I have this but it doesn't work:
pcfstore.on('load', function(){
//auto select first row;
Ext.getCmp('pcf_grid').getSelectionModel().select(0); // this works
//fire itemclick event
var grid= Ext.getCmp('pcf_grid');
grid.fireEvent('itemclick', grid, 0); //this doesnt work
});
Here is my itemclick event in grid view:
viewConfig: {
listeners: {
itemclick: function(dv, record, item, index, e) {
alert(record.data.code);
}
}
}
Basically when the grid loads, it should fire the alert window of the selected first row
of the grid.
itemclick is event of View but not of Grid. Try to use:
grid.getview().fireEvent('itemclick', grid, 0);
And by the way why not use selectionchange instead.
UPDATE
If you have both itemcontextmenu and selectionchange handlers it can be a little bit confusing. In this case I recommend back to square one and use itemclick event.
But your code need to have some modifications:
Assign itemclick event to grid, NOT to it's view.
When firing itemclick pass actual record, NOT an index
like this:
grid.getSelectionModel().select(0);
grid.fireEvent('itemclick', grid, grid.getSelectionModel().getLastSelected());
And here is fiddle to demonstrate what I'm talking about.
After hours of search, I found a solution. It looks like there is an issue with ExtJs4 that make the following functions impossible to work for me:
grid.getSelectionModel().select(0);
or
grid.getView().select(0); // note that this function is deprecated in ExtJS4!!
In my controller, I use this code instead:
store.load({
callback: function (records, operation, success) {
var rowIndex = this.find('id', myRecord); //where 'id': the id field of your model. You can replace 'id' with your unique field.. And 'this' is your store.
grid.getView().select(rowIndex);
}
})
Where myRecord is the record to highlight and select.
It then worked like a charm. I got the row 0 highlighted and selected. However, the itemclick listeners were not fired when the row is select with this code.