I have a grid with one column, which when the user selects, is used to display information in various textfields, checkboxes which are embedded in a panel on the right. I have implemented a delete feature at the row level in the grid. Now I wish either of these two things to happen.
1) Either the default selection is such that the first row is by default selected after deletion of any row.
OR
2)The information in the various components in the panel on the right is cleared.
Currently what happens is that the information which corresponds to the deleted row stays after deletion since nothing is selected in the grid so the previous selected option is used to display information on the right.
As removing the record from the grid implies deselecting it, you really just need to listen for changes to the selection in your grid and implement the desired behaviour when no selection exists.
I'd recommend the selectionchange event, as you can cover both selection and deselection by inspecting the new selection state:
grid.on({
'selectionchange': function(sm, selectedRecords) {
if (selectedRecords.length === 0) {
// no selection -> clear fields or select the first row
} else {
// selection exists -> load data into fields
}
}
});
(assuming you're using single selection, i.e. either one or no row can be selected)
Related
I'm using material-table to show some data, now I want to select one row at the time to pass the row's data to another component, so being able to select multiple rows at the time isn't what I'm looking for and the main suggestion is to go for a radio button. So is there a way to replace the checkbox on the table with radio buttons or make the selection option to only allow one row to be selected at the time?
According to documentation your hands are tied. But, this might work:
Add selectedRow key to the component which uses MaterialTable
Create some method or function e.g. handleSelection and pass it to onSelectionChange prop. Argument to this func is an array which handleSelection returns
When user select some row, set selectedRow to that row object
If user click on "slelect all" checkbox (top left) - show notification that action is not supported. If there is no way to unselect all checkboxes programatically - unmount and than mount MaterialTable (to reset checkboxes)
If one row is already selected, than another one get selected (which makes two selected rows) - repeat step "4"
I know this is a bit complicated, but it's a best I could think of at the moment
n.b. Another thing you can do (to force users to select only one row) is to hide table on multiple selection and show message about what they can do. Message could be closable. When message get closed fresh table could appear (mount aggain).
Update
Just have found another option that might work for you. Take a look at this page at the "Simple Action Example". There you have buttons instead of checkboxes. I am starting to think that:
options={{
selection: true
}}
is not the right option for you.
I've got an Ext.view.View that has a list of templates rendered. When I select a row on the view, I want the previous one selected to be unselected. Currently, I have an onchange event that deselects everything (see below), but that causes problems when I have items filtered.
How can I DeSelect just the currently filtered rows. below is my unselect everything code.
Ext.Array.each(this.query('dataview'), function (v) {
v !== sm.view && v.getSelectionModel().deselectAll();
});
Want I'm wanting is to just deselect the rows that are filtered in the associated store. The problem with the above code is that when it runs, the filter gets removed and all the rows in the view show back up again.
For better overview and to use the available screen space, I want two grids next to each other, but only one toolbar with buttons. The two grids are bound to different ChainedStores, but the underlying source store of the chained stores is the same. The ChainedStores have filters to create a partition of the records in the underlying store - one half on the left, the other on the right.
Clicking the buttons in the toolbar should perform actions on the selected record in either of these grids.
Is there a way to tell the selectionModels that I want only one record selected, in either the right or the left grid, but not one in each?
You can try around here: https://fiddle.sencha.com/#view/editor&fiddle/1vs4
ExtJS does not support same selection model for two different grid.You have to handle it manually by code.
you can write select event listeners on each grid and on that event you can deselect record of another grid.
for grid1,
listeners :{
select : function(sel, record, index, eOpts){
sel.view.up('panel[name=main]').down('grid[name=grid2]').getSelectionModel().deselectAll();
}
}
for grid2,
listeners :{
select : function(sel, record, index, eOpts){
sel.view.up('panel[name=main]').down('grid[name=grid1]').getSelectionModel().deselectAll();
}
}
Please refer fiddle
I am using checkboxmodel grid in extjs for display values.
after selecting multiple row checkboxs, if i click different column all selected checkbox are unselecting. how to stop this.
https://fiddle.sencha.com/#fiddle/18bj
Use checkOnly: true on the selection model:
True if rows can only be selected by clicking on the checkbox column,
not by clicking on the row itself. Note that this only refers to
selection via the UI, programmatic selection will still occur
regardless.
https://fiddle.sencha.com/#fiddle/18bo
I have a grid and when I click on a button in the toolbar of the panel I want to check if a row in the grid is selected.
If true I need de value of one cell of that row, so I can put it behind a url.
But I have no idea how I can use the selection model to get the cell value of a selected row in EXT JS 4.
Perhaps try something like:
grid.getSelectionModel().getSelection()
This will return an array of all selected records withing the grid.
Then, you can iterate over the selection, find your row and call row.get('PropName') to get the value.
Hope this helps.
You're approaching the issue backwards though. You want to register for the 'selectionchange' event from the grid.
thisController.control ({'#mygrid':
{
selectionchange:onSelectionChange}
});
function:onSelectionChange(model, selected, eOpts )
{
//do work here
}
So basically you want to create an event driven model.