We Keep Coding

ag-grid version upgrade issue: count not find matching row model for rowModelType virtual

I upgraded my ag-grid version from v7.0.2 to v11.0.0.
After this upgraded suddenly all the tables having infinite scrolling started failing.
I get this error on my browser console:
ag-Grid: count not find matching row model for rowModelType virtual
I checked there changelog here https://www.ag-grid.com/change-log/changeLogIndex.php#gsc.tab=0
But I could not find anything related to this. So I believe this is not been removed.
Also I tried to change rowModelType to 'infinite'. Changing this, I was able to see some data on my UI, though it was not behaving as expected (Rows were fluctutating)
Can any one please help me here to point out the equivalent class I can use if rowModalType: 'virtual' is depracaded.
My ag-grid option:
$scope.gridOptions = {
headerHeight: 25,
rowHeight: constants.height,
rowModelType: 'virtual',
paginationPageSize: constants.ag_grid_page_size,
virtualPaging: true,
enableServerSideSorting: true,
enableSorting: false,
enableColResize: true,
angularCompileRows: true,
onGridSizeChanged: function () {
$scope.gridOptions.api.doLayout();
$scope.gridOptions.api.sizeColumnsToFit();
},
columnDefs: [..]

The virtual row model was renamed to infinite. It was a name change, the row model is the same one. You did jump a lot of versions, so there must be another breaking change. I cannot say what's wrong from the code you posted, I suggest you look at the examples online for the version you want and compare what you have to a working example.

In the latest version (17.1.1) you can use pagination:true
$scope.gridOptions = {
columnDefs: $scope.columnDefs,
rowData: $scope.rowData,
rowHeight: 48,
components: {
childMessageRenderer: $scope.childMessageRenderer
},
angularCompileRows: true,
enableFilter: true,
pagination: true,
paginationPageSize :3
};

Shopware 5, open BatchProcess window from Own Plugin

I hope its not to harsh to ask not to mince matters.
Here we go:
I have a problem developing a custom Plugin for Shopware 5.
I already have a working plugin which lists orders for certain criteria.
Now I want a Button (which i already have) in the toolbar of this grid-window.
The Button should open the Batch Process Window which is already available in the native "Order" Window of shopware.
Q: How Can I open this app with the selected Ids of my grid?
Heres what I have:
[...]
createToolbarButton: function () {
var me = this;
return Ext.create('Ext.button.Button', {
text: 'Batch Processing Orders',
name: 'customBatchProcessButton',
cls: 'secondary',
handler: function () {
me.onClickCustomBatchProcessButton(me);
}
});
},
onClickCustomBatchProcessButton: function(me){
var thisGrid = me.getTransferGrid();
var records = thisGrid.getSelectionModel().getSelection();
console.log("Grid");
console.log(thisGrid);
console.log("records");
console.log(records);
Shopware.app.Application.addSubApplication({
name: 'Shopware.apps.Order',
action: 'batch',
params: {
mode: 'multi',
records: records
}
});
}
[...]
It always opens the normal view of the order window. (no error in console)
Anybody has a suggestions?
That would be great!
Thanks for your time :)
Greetings
EDIT:
Hey, thank you for your reply so far.
I managed to open the Batch-process-window like this:
me.getView('Shopware.apps.Order.view.batch.Window').create({
orderStatusStore: Ext.create('Shopware.apps.Base.store.OrderStatus').load(),
records: orderRecords,
mode: 'multi'
}).show({});
But now the Problem ist, the Event for the Batch-Process isn't applied on the button on the form...
I am still on try and error.

Many Shopware ExtJS SubApplications can be executed from another app with certain parameters exactly the way you're trying to. Unfortunately I don't see any code in the Order plugin that might lead to the desired result. You can see what actions/params a Shopware SubApplication supports by reading the init function of the main controller -> Shopware.apps.Order.controller.Main
Shopware.apps.Customer.controller.Main from the Customer plugin for example accepts an action like you are using it – it is checking for this:
if (me.subApplication.action && me.subApplication.action.toLowerCase() === 'detail') {
if (me.subApplication.params && me.subApplication.params.customerId) {
//open the customer detail page with the passed customer id
...
In the Order plugin there is similar code, but it just takes an order ID and opens the detail page for the corresponding order. It apparently doesn't feature the batch.Window
You might be able to reuse this class somehow, but that might be a ton of code you need to adapt from the actual Order plugin. If you really need this feature, you can carefully read how the Order plugin is initializing the window and its dependencies and have a try.
I'd rather go for developing a lightweight module in this scenario (It's a frame within a backend window that just uses controllers and template views with PHP/Smarty/HTML)

Handsontable is not fully rendered when using Chrome's built in search function

Weird, inconsistent problem I am running into when using Chrome's built in search function. I have some 250 lines of data to be rendered in a handsontable, more than can be displayed on your screen without scrolling or zooming out.
http://jsfiddle.net/hU6Kz/3723/
var myData = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["lots of data begins here"],
];
$("#exampleGrid").handsontable({
data: myData,
startRows: 5,
startCols: 5,
minSpareCols: 1,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
Observe that when you first pull up the page, you can scroll down and all the data is rendered in the handsontable.
Now hit control + f to pull up the Chrome's built in search function. Search for any character in the handsontable. Much of the data in the handsontable is no longer rendered! Occasionally the data will get rendered again if I search for something else, but it seems inconsistent and I can't find a common cause..
This does not seem to be a problem in firefox, but my company is decidedly in the Chrome camp. Help me, o wizards of the internet.

This is because Handsontable uses a wonderful technique called "Virtual Rendering" which only renders the rows you are currently looking at plus a few more. It makes it possible to display "infinitely" many rows. The problem with ctrl+f is that it searches the HTML text so you won't be able to search using this.
This is why there is a search plugin available which returns to you a list of all matching cells. From there you can do many things like on enter, scrollTo the next available matching cell (search). Another very famous application is to filter rows by recreating the table with less data (filter).

Here there is a working demo using the search feature of handsontable.
In the search input write Test and then hit Enter.
This is the method that does what I described above.
var searchField = document.getElementById('search_field');
Handsontable.Dom.addEvent(searchField, 'keyup', function (event) {
if (event.keyCode == 13) {
var queryResult = hot.search.query(this.value);
hot.selectCell(queryResult[0].row, queryResult[0].col);
}
});
http://jsfiddle.net/pdivasto/hp8ge8kk/

Angular ui.grid. Moving rows between two grids

I recently started to use angular-ui-grid (http://ui-grid.info/) and tried to create solution for moving rows between two different grids (exactly this solution but this is done on kendo grid - http://jsfiddle.net/OnaBai/2qXKy/).
Since I'm pretty new to java script I failed to recreate this in angular-ui-grid. Have some troubles to assign selected rows of grid1 to grid2 and remove selected rows from grid1.
Does anyone have this solution ready?
Thanks in advance.
EDIT: I added quick NOT working jsfiddle (http://jsfiddle.net/LimoJoe/n9h7xmw3/4/)

Here's a JSBin of how you could manage it with two controllers and a service. It's using ngGrid but should still be similar enough to ui.grid in this case.
Not that I think your problems are in how you are setting up the gridOptions, in your example I didn't see where you had set the gridOptions's '`selectedItems' property:
See edits:
this.gridOptions = {
data: 't2.items',
/** NG Grid way
selectedItems: []
*/
/** UI Grid way */
enableRowSelection: true,
enableSelectAll: true,
multiSelect: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
});
}
};
Edit:
Based on your comments, here's a fork of the article you referenced's plunkr which is the upgraded version. Hopefully you can use that as your starting point.
Basically to use ui-grid, starting from that article, you need to upgrade the version of angular and ui-grid.
Edit:
Ok, your JsBin was really close, I edited it, here's the new version, now it's an upgraded version of my original JsBin, I think we're there now!

Final solution here JSBin with added callback function gridApi.selection.on.rowSelectionChangedBatch that user can use Select All button and selected list will be updated.

Extjs 4 grouped columns header dynamic text modification

I have the following grouped headers grid :
var lestore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory'
},
autoDestroy: true,
data:objstore
});
thegrid = Ext.create('Ext.grid.Panel', {
store: lestore,
columnLines: true,
columns: [{text:'date'},{text:'TV',columns:{text:'400',columns:[{text:'tt1'},{text:'tt2'}]}] ,
title:'my title' ,
selModel: {
selType: 'cellmodel'
},
renderTo: 'gridmpoff',
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1}
)
],
listeners: {'edit': function(editor,e) {updtitle(editor,e);}
},
viewConfig: {
stripeRows: true
},
});
I need to change the columns texts (tt1,tt2 etc) after the grid creation, without changing the header grouping.
I Tried modifying the columns property, but that doesn't help, only thing that worked so far is a reconfigure which messes with the editor.
Please advice

ExtJS provides setText method fo changing the header text.
Refer http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column

After so many searches i came up to the idea that ExtJS 4.1 "reconfigure" is buggy and has never been fixed, as it messes with the plugins (the editor in particular), and every fix i found so far targets only a particular use case, mine was just updating the grouped headers labels without touching anything else.
The solution i used is to simply update the dom (while at same time update the columns headers structure for the extjs so that if at some point their bugs are fixed it is simple to switch to reconfigure, settext or whatever), via : thegrid.container.dom.childNodes ....
I hope this helps gettings someone else from this struggle.
This is related : Using Ext.grid.Panel.reconfigure() breaks the grids RowEditing plugin

Try below code:
grid.columns[0].ownerCt.setText('Total Number');

I know this is an old thread but you can use the code Michael posted :
grid.columns[0].ownerCt.setText('Total Number');
and then use the column name in your groupHeaderTpl and have something like this :
{columnName}: {name}
This way it will dynamically change it to the values you want.