I know this may seem as a dupplicate and by all means, show me which one, 'cause I have spent 2 days looking for a similar question but to no avail.
I have a table in which the user can select rows by checking them and the option "View Record".
My problem is the navigation buttons inside the "View Record"-pane are disconsidering the selected rows completely.
If I have four rows and check rows 1 and 3 because I want to see the records of only those two, I click on the next button after I saw record 1 and row 2 is then showed, not the thrird. This is not the wanted behaviour.
Anyone has an ideea how to make it so that the navigation buttons of the "view record" only allows the navigation between the selected rows?
Many thanks in advance.
Oh, here is my code:
var resultItems = [
{
customerId: 20000001,
customerName:"Customer 1",
},
{
customerId: 20000002,
customerName:"Customer 2",
},
{
customerId: 20000003,
customerName:"Customer 3",
} ,
{
customerId: 20000004,
customerName:"Customer 4",
}
];
var fields = [
{name: "Id", label: "Id", search: true, key: true}, //, hidden:true
{name: "customerName", label: "Kunde", search: true, sortable: true,prefix:null,},
{name: "customerId", label: "Customer-ID", search: true, sortable: true,prefix:null,}
];
$(function () {
"use strict";
$.jgrid.guiStyles.jQueryUI.dialog.window = "dijitPopup ui-jqgrid-jquery-ui ui-widget ui- widget-content ui-corner-all ui-front";
$("#enhancedReportingGrid").jqGrid({
datatype:"local",
colModel: fields,
data: resultItems,
iconSet: "fontAwesome",
loadonce: true,
viewrecords: true,
width: 780,
height: 200,
multiselect:true,
pager: "#enhancedReportingGridPager",
});
$('#enhancedReportingGrid').jqGrid('navGrid', '#enhancedReportingGridPager',
{add: false, edit: false, del: false, search: false, view: true}, {width: 500});
});
I suggest you to switch to the supported commercial Guriddo jqGrid version.
I have just added in Guriddo jqGrid a option viewselected in viewGridRow method, which allow you to view only selected rows in multiselect mode. The option editselected do the same for edit mode. This option (editselected) also exists in older releses.
This feature will be available in the upcoming release which is scheduled for a September 1, 2020
Here is a working Guriddo demo
Related
Setup Summary: We have two aggrids where we drag from one grid to the second grid. This works perfectly.
Issue: We have some lines we don't want to enable drag on. So we want a conditional drag based on a cell value.
Currently our table settings (we use reactjs) are as follows:
Table 1 and 2 have these properties:
rowData={rowData}
ref={fileGridRef}
columnDefs={columnDefs}
gridOptions={gridOptions}
rowDragManaged={true}
rowDragEntireRow={true}
animateRows={true}
onRowDragEnd={(params: any) => addToFilesGrid(params)}
suppressClickEdit={true}
gridOptions are (for both grids)
rowSelection: "single",
rowMultiSelectWithClick: true,
Column defs are (for both grids)
{
field: "name",
headerName: "File Name",
sortable: true,
filter: true,
editable: true,
cellStyle: { textAlign: "center", marginLeft: "-10px" },
cellRenderer: EditCellRenderer,
rowDrag: (params: any) => {
params.data.type !== ""; //HERE IS THE CONDITION WE HAVE
},
},
{
field: "type",
headerName: "Type",
sortable: true,
filter: true,
editable: false,
}
When the params.data.type is "" we want it not to move.
I tried playing around with rowDragManaged=false, but then nothing moved. I thought about making handlers for onDragEnter/Leave/Move/End, but I would rather avoid that if I can.
Anyone know what the issue is?
Do I have to do unmanaged dragging if I want this to work?
Finally found a solution!
I had seen that rowDrag could be set to a conditional statement but had issues getting it working, and there is one example on ag-grid docs that wasn't helpful in my use case.
So, I have a table, and if a cell is BLANK I don't want the row to drag.
So in the ColDef I had:
rowDrag: params => params.data.type === "",
Because that is what it was in the rowData. Also when I printed out params in other row changing functions (onRowSelected, onRowDragMove, etc...) this field was an empty string -> "".
It seems like for this conditional however it may be treated as an undefined or have a space. Not exactly sure, but I was able to do this:
params => params.data.type.length > 1,
And it worked! This leads me to believe the tags in the aggrid cell or something in their code inserts a space somewhere.
This was shown when I tried
rowDrag: params => params.data.type.length > 0,
and I could still drag the rows where my type field was "".
I have an agGrid populated with Employee records in JSON format from my web service.
[
{
id: 123,
firstName: 'Mike',
lastName: 'Jones',
countryId: 1001,
DOB: '1980-01-01T00:00:00',
. . .
}
I have a second web service returning a list of country codes:
[
{ id: 1000, name: 'France' },
{ id: 1001, name: 'Spain' },
{ id: 1002, name: 'Belguim' }
]
What I'm trying to do is get my agGrid to have a column showing the user's details, including the name of their country, and when they edit this cell, a list of country codes will appear, where they can select one, and it'll update the record with the id of that country.
Basic stuff, no ?
But has anyone managed to get agGrid to successfully use the "agRichSelectCellEditor" to do this successfully ?
{ headerName: 'Country', width: 120, field: 'countryId', editable: true,
cellEditor:'agRichSelectCellEditor',
cellEditorParams: {
// This tells agGrid that when we edit the country cell, we want a popup to be displayed
// showing (just) the names of the countries in our reference data
values: listOfCountries.map(s => s.name)
},
// The "cellRenderer" tells agGrid to display the country name in each row, rather than the
// numeric countryId value
cellRenderer: (params) => listOfCountries.find(refData => refData.id == params.data.countryId)?.name,
valueSetter: function(params) {
// When we select a value from our drop down list, this function will make sure
// that our row's record receives the "id" (not the text value) of the chosen selection.
params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
return true;
}
},
My code seems to be almost correct.. it manages to:
display the country name in each row of the agGrid
display a popup, listing the country names, from our "list of countries" array
when I select an item in the popup, it successfully updates the countryId field with the (numeric) id value of my chosen country
The only problem is that at the top of the popup, it shows the countryId value, rather than the user's current country name.
Has anyone managed to get this to work ?
The only workaround I could come up with was to override the CSS on this popup and hide that top element:
.ag-rich-select-value
{
display: none !important;
}
It works... but you no longer get to see what your previously selected value was.
(I really wish the agGrid website had some decent, real-life, working Angular examples... or at least let developers post comments on there, to help each other out.)
The solution was to use a valueGetter, rather than a cellRenderer:
{
headerName: 'Country', width: 120, field: 'countryId', editable: true,
cellEditor:'agRichSelectCellEditor',
cellEditorParams: {
// This tells agGrid that when we edit the country cell, we want a popup to be displayed
// showing (just) the names of the countries in our reference data
values: listOfCountries.map(s => s.name)
},
valueSetter: function(params) {
// When we select a value from our drop down list, this function will make sure
// that our row's record receives the "id" (not the text value) of the chosen selection.
params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
return true;
},
valueGetter: function(params) {
// We don't want to display the raw "countryId" value.. we actually want
// the "Country Name" string for that id.
return listOfCountries.find(refData => refData.id == params.data.countryId)?.name;
}
},
I hope this is useful...
I was able to get my similar situation (id:name pairs in a list, but not using Angular though) working without the problem you mentioned above, and without a valueGetter/valueSetter and only a renderer. The benefit is that you don't need to double click the cell to see the list, the cell appears as a selection box always, and you avoid a bug should the user double click the cell when the list is displayed.
The renderer is a lot clunkier than I was wanting (one line like yours) and it didn't seem that aggrid had built in support for this pretty basic function (and I already have spent enough time on this).
Anyway, this is what I had, which at least works, but keen to see further improvements on it. (You will need to at least change 2 lines for the option related code since my defaultValue object is specific to me).
The column definition:
{field: 'defaultValueID', headerName: "Default Value", cellEditor:'agRichSelectCellEditor', cellRenderer: defaultValueRenderer}
And the renderer code:
function defaultValueRenderer(params) {
var input = document.createElement("select");
// allow it to be cleared
var option = document.createElement("option");
option.innerHTML = '[None]';
option.value = null;
input.appendChild(option);
for (var i=0; i < defaultValueList.length; i++) {
var option = document.createElement("option");
option.innerHTML = defaultValueList[i].name;
option.value = defaultValueList[i].gltID;
input.appendChild(option);
}
input.value = params.value;
input.onchange = function() {
params.setValue(this.value);
params.data.defaultValueID = this.value;
}
input.style="width: 100%; height: 100%"; // default looks too small
return input;
}
Here Is Example Of agRichSelectCellEditor...
{
headerName: 'Dropdown', field: 'dropdown',
cellEditor: 'agRichSelectCellEditor',
width: 140,
editable: true,
cellEditorParams: (params) => {
values: Get All Dropdown List Like ["Hello","Hiii","How Are You?"]
},
valueSetter: (params) => {
if (params.newValue) {
params.data.dropdown= params.newValue;
return true;
}
return false;
}
}
Much simpler solution: use cellEditorParams formatValue, along with valueFormatter
{
field: 'foo',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {
values: [1,2,3, 4, other ids... ],
formatValue: (id: number): string => this.getLabelFromId(value)
},
valueFormatter: (params: ValueFormatterParams): string => this.getLabelFromId(params.value as number)
}
I am using agSelectCellEditor to imlement a dropdown menu in a particular column cells.
This is the column definition:
{
headerName: "Rattachement",
field: "rattachement",
editable: true,
headerTooltip:
"Choisissez l'entité de rattachement parmi les choix présents dans la liste déroulante",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: [
"",
"Audit",
"RA",
"Consulting",
"FA",
"Tax&Legal",
"ICS",
"Taj"
]
}
}
This is how ag-grid renders it:
I have to doubl-click on it in order for the dropdown list to show-up this way:
And then I can select any of the available options.
As you notice, this is really poor rendering and may cause the user to be confused and unable to use the tool that I am building.
So my question is:
Is there any way to make ag-grid show the dropdown menu from the beginnig without having to double-click on the cell so that the user actually knows what to do?
Thanks!
PS: I don't want to use a custom cell renderer, because the options in the cell depend on other variables and the whole thing may get messy if I choose to implement the dropdown list using a customcellRenderer (which I did with other columns where it doesn't cause me any of the mentioned trouble)
This is the same issue which i encountered :).
By default AgGrid doesnt show dropdown columns. If you wish to show it as a dropdown you will have to use cellRenderer just to show the image to notify user that this is dropdown column.
Double click edit can be changed to singleclick or no click edit that option is avaiable.
Set columndef option singleClickEdit : true,
var columnDefs = [
{field: 'name', width: 100},
{
field: 'gender',
width: 90,
cellRenderer: 'genderCellRenderer',
cellEditor: 'agRichSelectCellEditor',
singleClickEdit : true,
cellEditorParams: {
values: ['Male', 'Female'],
}
},]
var gridOptions = {
components: {
'genderCellRenderer': GenderCellRenderer
},
columnDefs: columnDefs,
}
function GenderCellRenderer() {
}
GenderCellRenderer.prototype.init = function (params) {
this.eGui = document.createElement('span');
this.eGui.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"/></svg>' + params.value;
};
GenderCellRenderer.prototype.getGui = function () {
return this.eGui;
};
DEMO
Hope this helps.
I developed two tree panels in ExtJs (Tree-1 and Tree-2). These trees are working with drag and drop in between two of them in all the cases. I want drag and drop in the following cases
(From Tree-1 to Tree-2), (From Tree-1 to Tree-1) and (From Tree-2 to Tree-2) only. That is want to restrict drag and drop from Tree-2 to Tree-1. The following is my source code.
/*Tree1*/
Ext.create('Ext.tree.Panel', {
title: 'From Agent:',
collapsible: true,
collapseDirection: Ext.Component.DIRECTION_TOP,
frame:true,
width: 310,
minHeight: 50,
margin: '0 0 0 0',
store: store1,
listeners:{
checkchange:function( node, checked, eOpts){
node.cascadeBy(function(n){n.set('checked', checked);} );
}
},
rootVisible: false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
sortOnDrop: true,
containerScroll: true
}
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
/*Tree2*/
Ext.create('Ext.tree.Panel', {
title: 'To Agent:',
frame: true,
collapsible: true,
collapseDirection: Ext.Component.DIRECTION_TOP,
width: 310,
margin: '0 0 0 20',
minHeight: 50,
store: store2,
listeners:{
checkchange:function( node, checked, eOpts){
node.cascadeBy(function(n){n.set('checked', checked);} );
}
},
rootVisible: false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
sortOnDrop: true,
containerScroll: true
}
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
These codes are working as cut and paste while drag and drop. I want to make these code as copy and paste while drag and drop. Please, help me.
Thanks in advance.
Take a look at this example from the docs:
http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/tree/custom-drop-logic.html
Basically it uses nodedragover event to control when one can drop or not.
Return false when you don't want to allow the drop.
As far as making it copy instead of cutting, the documentation mentions the following (although I've never tried it myself):
This plugin provides drag and/or drop functionality for a TreeView.
It creates a specialized instance of DragZone which knows how to drag
out of a TreeView and loads the data object which is passed to a
cooperating DragZone's methods with the following properties:
copy : Boolean
The value of the TreeView's copy property, or true if the TreeView was
configured with allowCopy: true and the control key was pressed when
the drag operation was begun.
Try setting copy: true to the two views.
Let's say I have a grid with multiselect option on, when user selects 4 lists and wants to get the values ( alerted on screen) how would I do that? And how would I disable buttons untill at least one list is selected?
All questions you've asked are answered many times already. Also there are good ExtJS examples on sencha.com. For example list view grid shows multiple select and editable grid with writable store shows button enable on click. But THE MOST important is documentation! Let me explain functionality on following code. Most of it is from list view example.
This grid gets JSON from list.php which has following structure
{"authors":[{"surname":"Autho1"},{"surname":"Autho2"}]}
And the grid:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
// Here i've definned simple model with just one field
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['surname']
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'list.php',
reader: {
type: 'json',
root: 'authors'
}
}
});
store.load();
var listView = Ext.create('Ext.grid.Panel', {
id: 'myPanel', // Notice unique ID of panel
width:425,
height:250,
collapsible:true,
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No authors to display'
},
columns: [{
text: 'File',
flex: 50,
// dataIndex means which field from model to load in column
dataIndex: 'surname'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
// This button will log to console authors surname who are selected
// (show via firebug or in chrome js console for example)
text: 'Show selected',
handler: function() {
// Notice that i'm using getCmp(unique Id of my panel)
// to get panel regerence. I could also use
// this.up('toolbar').up('myPanel')
// see documentation for up() meaning
var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();
for (var i=0; i < selection.length; i++) {
console.log(selection[i].data.surname);
}
}
},{
text: 'Disabled btn',
id: 'myHiddenBtn', // Notice unique ID of my button
disabled: true // disabled by default
}]
}]
});
// Here i'm waiting for event which is fired
// by grid panel automatically when you click on
// any item of grid panel. Then I lookup
// my button via unique ID and set 'disabled' property to false
listView.on('itemclick', function(view, nodes){
Ext.getCmp('myHiddenBtn').setDisabled(false);
});
});
I didn't knew how to do this from top of my head, but I used documentation and the result works ;-). See Grid panel docs for more information.