I want to trigger a reorder event after I drag and drop two rows data but I cannot see it in the document below:
https://www.primefaces.org/primeng/#/table/reorder
Can anyone help me, thanks!
As per the documentation ,
there are two callbacks available ,
onColReorder - Callback to invoke when a column is reordered
onRowReorder - Callback to invoke when a row is reordered.
They are listed under on the events portion on the same page
https://www.primefaces.org/primeng/#/table
For those wondering where to bind the onRowReorder callback to catch row reorder event.
app.component.html:
<p-table [value]="products" (onRowReorder)="onRowReorder($event)">
...
</p-table>
app.component.ts:
onRowReorder(event){
console.log(event); //{dragIndex: 1, dropIndex: 2}
}
View in StackBlitz
Related
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
I'm facing a problem to get gridContext on save event of a editable subgrid. I need to get the data from editable subgrid and do some operations on the form but while getting the grid from gridContext it shows the error message called:
gridContext.getGrid is not a function
JavaScript code:
I'm referring the below MSDN links to get gridContext and grid data.
https://learn.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/clientapi-grid-context
https://learn.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/reference/grids/gridrowdata
You need to remove the parenthesis "()" in the getGrid, since it is not a function.
The correct code would be:
var myRows = gridContext.getGrid.getRows();
I'm trying to use angularify in a project, but I'm facing the given problem:
I'm not able to get my onChange function called when a dropdown value changes. I have a second dropdown box which the listed values depends upon the first one.
How can I achieve the intended behavior with angularify?
I was looking, debugging and trying, and looks like I will not be able to do this because de dropdown directive writes a bunch of div's to my html. There is no select elmeent in any place of the document. How will a div element fire a onChange event?
Here is my markup:
Parent select
<dropdown title="Selecione" class="col-6" ng-model="novoProcedimento.procedimento" ng-change="buscarLocaisExecucao(novoProcedimento.procedimento)">
<dropdown-group class="meudropdown" title="proc.nome" value="proc.nome" ng-repeat="proc in procedimentosPermitidos">{{proc.nome}}</dropdown-group>
</dropdown>
Child select - Depends on parent's selection
<dropdown title="Selecione" id="dente-regiao" class="col-5" ng-model="novoProcedimento.local" ng-change="buscarFaces(novoProcedimento.procedimento, novoProcedimento.local)">
<dropdown-group title="local" value="local" ng-repeat="local in locaisExecucao">{{local.descricao}}</dropdown-group>
</dropdown>
Controller - Intendend to be fired on parent's change.
$scope.buscarLocaisExecucao = function (procedimento){
selecaoProcedimentoService.buscarLocaisExecucao(procedimento)
.then(function(locaisExecucao) {
$scope.locaisExecucao = locaisExecucao;
});
}
Am I using the wrong framework? Am I missing something?
Thank you.
Previously, I used persistent grid plugin, until I found out that it caused some terrible slowdown - about 3-4 extra seconds of grid rendering (~20 columns and 300 rows). So, I do not want all this plugin functionality, the only thing I want to have is scrolling to a selected record in grid (there may be a lot of records selected, so scrolling to the first one is enough). I try to do it like this:
.... a lot of code ...
rowIndex=grid.store.indexOf(grid.getSelectionModel().getSelection()[0]);
record=grid.getSelectionModel().getSelection()[0];
grid.store.remove(record); // <- I remove it, because its content has changed
grid.store.insert(rowIndex,Ext.create('GridModel',json.items[0])); // <- I insert
// it back with new values
grid.getSelectionModel().select( rowIndex ); // <- This works, I see a checkmark
grid.getView().focusRow( record ); // <- This is not working
....
Instead of what I expect to see, I see scrolling to the top of the grid.
EDIT
This is not working:
Ext.fly(grid.getView().getNode(rowIndex)).scrollIntoView(); // instead of focus
Also not working:
var rowEl=grid.getView().getNode(rowIndex);
rowEl.scrollIntoView(grid.el, false);
So, what to use instead of focus?
EDIT
Setting deferRowRender to false in grid config also has no effect. Still, grid scroll to the very top of its view.
EDIT
Well, as it turned out, focusRow had no effect because of the grid.store.sync call. So, I put this routine inside sync callback function and now it is working.
In extjs 4 the solution might be use method scrollBy() http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.Component-method-scrollBy
In Extjs 5: try the methods getScrollable().scrollTo(...);
http://docs.sencha.com/extjs/5.1.3/api/Ext.grid.Panel.html#placeholder-accessor-getScrollable
http://docs.sencha.com/extjs/5.1.3/api/Ext.grid.Panel.html#method-scrollTo
In Extjs 6: try the methods getScrollable().scrollToRecord(...);
http://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-getScrollable
http://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-scrollToRecord
Although on a different issue, this post may be useful: How to scroll to the end of the form in ExtJS
try below code
grid.getView().focusRow( record );
Try this:
var numIndex=** //this is record index
var x=grid.getView().getScrollX();
grid.getView().scrollTo(x,numIndex*21); //x,y --> unit is pixel
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page