Angular ui.grid. Moving rows between two grids - javascript

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.

Related

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)

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.

EXTJS 4.2 implementing multiple Editor xtypes for RowEditing a grid?

I'm using Extjs 4.2 and am currently using the RowEditing plugin on a gridpanel so the user can edit records in the grid. The editor xtype for a given column needs to be 'textfield' for all but one record. It has to be a combobox editor for the other record. How do I implement this?
It almost sounds like a need a custom editor but I haven't seen many examples of that and certainly, no example that switches editor types for a column based on record information. the use of property.Grid ALMOST seems like the solution I need, except I'm looking at the same key for multiple records and I don't think that's what property.Grid is meant for.
A solution or any useful help is appreciated. Thanks.
You need 2 editors, one for textfield, one for combo, and utility function that will determine and return the correct editor based on record value. The utility function would then be bound to your column's http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-method-getEditor method.
More info here: https://stackoverflow.com/a/7026075/1038593
Also check: http://www.sencha.com/forum/showthread.php?139440-changing-columnEditor-per-row-basis&p=637831&viewfull=1#post637831
Is this instead, the right approach to take:
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
listeners: {
beforeedit : function(editor, context, eOpts){
if (context.record.getData().aliasName == 'document' && context.column.dataIndex == 'value')
//setEditor to combobox with column.setEditor()
else
//setEditor to textfield with column.setEditor()
}
}
})
],

misleading jqgrid documentation : Client side sorting, but server side paging

this question has already been answered multiple times. but here I want to site that if the code provided in the documentation can't be achieved without additional codes, why it has been given there in first place. Its simply misleading. The code given in the documentation achieves paging, but while sorting, the grid data simply disappears.
Correct me if I am wrong.
jQuery("#gridid").jqGrid({
...
datatype: 'json', // can be xml
loadComplete : function () {
jQuery("#gridid").jqGrid('setGridParam',{datatype:'local'});
},
onPaging : function(which_button) {
jQuery("#gridid").jqGrid('setGridParam',{datatype:'json'});
},
...
});
You don't posted the exact reference to the documentation where you get the code. I found it here.
jqGrid is open source product which you get for free. It's practical, but you should understand, that in the case the product and its documentation could not be perfect. The part of code which you referenced could work probably in some very old version of jqGrid, but it's wrong code in the current version of jqGrid. The sense of implementing "Client side sorting, but server side paging" is very suspected at all. My old answer about the subject you would find here. I would rewrite some part of the answer now, but in general the code tested with old versions could be not full compatible with the new version of jqGrid.
I can say there is no place where intentional misleading has happened. They are giving the pluging for free though it is a very huge plugin. And the work done by people like Oleg is making it more perfect. For you question, the code related to "client side sorting and server side paging" here is the code that can solve your problems. And this was taken with the help of some old answer given by Oleg.
This is my version of code,
loadComplete: function(data) {
var $this = $(this);
if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
// because one use repeatitems: false option and uses no
// jsonmap in the colModel the setting of data parameter
// is very easy. We can set data parameter to data.rows:
$this.jqGrid('setGridParam', {
datatype: 'local',
data: data.userdata,
pageServer: data.page,
recordsServer: data.records,
lastpageServer: data.total
});
// because we changed the value of the data parameter
// we need update internal _index parameter:
this.refreshIndex();
if ($this.jqGrid('getGridParam', 'sortname') !== '') {
// we need reload grid only if we use sortname parameter,
// but the server return unsorted data
$this.triggerHandler('reloadGrid');
}
} else {
$this.jqGrid('setGridParam', {
page: $this.jqGrid('getGridParam', 'pageServer'),
records: $this.jqGrid('getGridParam', 'recordsServer'),
lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
});
this.updatepager(false, true);}
}
onPaging:function(){
/*this code is to fix the issue when we click on next page with some data in filter tool bar
* along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event
* */
var data = $(this).jqGrid("getGridParam", "postData");
data._search = false;
data.filters=null;
data.page=$(this).jqGrid("getGridParam","page");
/* comment this line if you disable filter toolbar*/
$(this)[0].clearToolbar();
//Here making _search alone false will not solve problem, we have to make search also false. like in below.
$(this).jqGrid('setGridParam', { search: false, postData:data });
var data = $(this).jqGrid("getGridParam", "postData");
/*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click
* on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records
* where in i am expecting only 3 records to be sorted out.along with this there should be a modification in source code.
*/
$(this).jqGrid("clearGridData");
/* this is to make the grid to fetch data from server on page click*/
$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
}
For the modification that you have to do in source code is , see this answer..

Dojo Enhanced Grid won't work properly in IE 9

I have an enhanced grid which is connected to an Object Store (which contains a Memory Store). The structure is quite simple, i.e. it just shows rows with no "no scroll" or something like this.
In Opera, Chrome and FF everything works just fine, but in IE the positioning of the content from the grid is totally wrong. Unfortunatly, I can't post pictures, but I've asked this question also on the dojo mailing list, where I have uploaded the pictures. Here is the link:
http://dojo-toolkit.33424.n3.nabble.com/Problem-with-the-positioning-of-the-grid-in-ie-9-td3989165.html
I have searched a lot, and tried quite a few things, but nothing has changed anything so far... . Any help would really be appreciated.
Here is the code how I set up the grid:
var grid = new EnhancedGrid({
id: "grid",
store: dataStore,
query: filter,
autoWidth: true,
autoHeight: true,
keepRows: '5',
rowCount: '60',
plugins: {
nestedSorting: true,
cookie: {expires : 10},
exporter: true,
indirectSelection: { headerSelector:true, width:'30px', styles:'text-align: center;'} ,
menus: { rowMenu:"row_menu" }
},
structure: grid_structure
}, "grid");
grid.startup();
Thx in advance,
Gernot
hey you can't directly catch the error. Do some trail and error development for IE. I have also faced so many issues with IE and Dojo DataGrid.
Remove all cookie, selection and extra features from your grid and keep it very simple. Try to make the basic one working on IE.
Then one by one add the features and verify that they are working fine, you will get the culprit in the process.
In the process, remember to clear browser cache frequently.
Its tedious job you will have a lot of satisfaction after resolving the issue.
All the best.

Categories