I created an editable grid using ag-grid and I need to highlight the cells that were changed. I added the following code:
(cellValueChanged)="onDemandsCellValueChanged($event)"
And the method:
onDemandsCellValueChanged(params): void {
if (params.oldValue === params.newValue) {
return;
}
params.data.modified = true; // add modified property so it can be filtered on save
const column = params.column.colDef.field;
params.column.colDef.cellStyle = { 'background-color': '#e1f9e8' }; // highlight modified cells
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node],
});
}
The cell is highlighted but when I scroll up and down all the cell from that column are highlighted.
You can check the behavior on stackblitz.
Also if you have a better way of doing this I'm open to new solutions.
I understand your problem You can achieve what you want like this - you should use cellStyle in your column definition as showing in docs and for this code is below
cellStyle: params => {
if (
params.data["modifiedRow" +
params.node.rowIndex +"andCellKey"+
params.column.colDef.field]
) {
return { backgroundColor: "#e1f9e8" };
} else {
return null;
}
},
and after that in this function onDemandsCellValueChanged please add and modify this property modified as true and change your function like this as shown below
onDemandsCellValueChanged(params): void {
if (params.oldValue === params.newValue) {
return;
}
const column = params.column.colDef.field;
params.data["modifiedRow" + params.rowIndex + "andCellKey" + column] = true;
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node]
});
}
Now it should work even when you scroll. Here is complete working Example on stackblitz
I have following grid declaration:
quickSearchGrid = Ext.create('Ext.grid.Panel', {
height: 500,
collapsible: true,
.....
Then, I have input element above it:
<input type="text" id="quickSearch" value="Search" style="height: 25px; width: 100%;" />
I want to pass specific keystrokes - Up, Down, PgUp, PgDown etc from input to grid. So that when user has focus in text field, he'll be able to navigate in the grid with keyboard.
What I'm trying is creating my own KeyNav:
var nav = Ext.create('Ext.util.KeyNav', Ext.get('quickSearch'), {
scope: Ext.get('quickSearch'),
down: function (e) {
console.log(e)
quickSearchGrid.fireEvent('keydown', quickSearchGrid, e)
}
});
Function is being called (it writes to console) but grid does not react.
Found a workaround you could use. Create the text input in extJs instead of declaring it in html:
var quickSearch = Ext.create('Ext.form.field.Text', {
id: 'quickSearch',
name: 'quickSearch',
fieldLabel: 'QuickSearch',
allowBlank: true
});
You can then use it for navigation in the grid with arrows by selecting a record with index 1 higher/lower than the one currently selected:
var grid = quickSearchGrid;
var view = quickSearchGrid.getView();
var nav = Ext.create('Ext.util.KeyNav', Ext.getDoc(), {
down: function(e) {
var selectionModel = grid.getSelectionModel();
var select = 0; // select first if no record is selected
if ( selectionModel.hasSelection() ) {
select = grid.getSelectionModel().getSelection()[0].index + 1;
}
view.select(select);
quickSearch.focus(); // to get focus back to the input
},
up: function(e) {
var selectionModel = grid.getSelectionModel();
var select = grid.store.totalCount - 1; // select last element if no record is selected
if ( selectionModel.hasSelection() ) {
select = grid.getSelectionModel().getSelection()[0].index - 1;
}
view.select(select);
quickSearch.focus(); // to get focus back to the input
},
});
With ExtJS 6, it was really easy to simulate navigation with bufferedRenderer.scrollTo() method:
Here, I'm creating KeyNav but you can rewrite it to pure Javascript/jQuery:
quickSearchKeyNav = Ext.create('Ext.util.KeyNav', Ext.get('quickSearch'), {
scope: Ext.get('quickSearch'),
up: function (e) {
quickSearchGrid.view.bufferedRenderer.scrollTo(
quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) - 1,
true);
},
pageUp: function (e) {
var rowsOnScreen = quickSearchGrid.getNavigationModel().getRowsVisible();
quickSearchGrid.view.bufferedRenderer.scrollTo(
quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) - rowsOnScreen,
true);
},
pageDown: function (e) {
var rowsOnScreen = quickSearchGrid.getNavigationModel().getRowsVisible();
quickSearchGrid.view.bufferedRenderer.scrollTo(
quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) + rowsOnScreen,
true);
},
down: function (e) {
quickSearchGrid.view.bufferedRenderer.scrollTo(
quickSearchGrid.getStore().indexOf(quickSearchGrid.getSelection()[0]) + 1,
true);
}
});
I am creating a webs application like easyquerybuilder using jstree.
i am able to drag and drop submenu items. i want to get the name of the dropped item to new div . this is my jsfiddle
this is my drag and drop code
$('.drag').on('mousedown', function (e) {
return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : true, text: $(this).text() }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');
});
$(document).on('dnd_move.vakata', function (e, data) {
var t = $(data.event.target);
if(!t.closest('.jstree').length) {
if(t.closest('.drop').length) {
data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
}
else {
data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
}
}
}).on('dnd_stop.vakata', function (e, data) {
var t = $(data.event.target);
if(!t.closest('.jstree').length) {
if(t.closest('.drop').length) {
$(data.element).clone().appendTo(t.closest('.drop'));
// node data:
// if(data.data.jstree && data.data.origin) { console.log(data.data.origin.get_node(data.element); }
}
}
You can get the name of the dropped item in $(data.event.target).text().
I have a dataTable object on a page representing a list of releases I need to keep track of with the url /releases I want to add the following functionality
if /releases?query=<query>, the dataTable will initialized with the provided query
The query parameter is updated if the user changes the search term
The back and forward buttons in the browser go the appropriate query
So far I am able to do the first 2, but when I listen for the popstate event, redrawing the table triggers a pushState which I can't figure out how to prevent. Here's my code so far:
$(document).ready(function(){
var prevSearch;
var table = $('#releases').dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"iDisplayLength" : 50,
"oSearch": {"sSearch": '#{params[:query]}'},
"fnDrawCallback": function(oSettings) {
var curSearch = oSettings.oPreviousSearch.sSearch;
if (!prevSearch) {
prevSearch = curSearch;
} else if (curSearch != prevSearch) {
console.log("changed to: " + curSearch);
history.pushState({query: curSearch}, "title", "releases?query=" + curSearch);
prevSearch = curSearch;
}
}
});
window.addEventListener("popstate", function(e) {
if (e.state) {
table.fnFilter(e.state.query);
}
});
});
Note, I am using a rails backend and this is inlined javascript being served in the page.
you have only 2 options here:
move pushState code out of drawCallback. There must be some other code that causes the datatables to draw when user enters something. put your pushState code there. This is the ideal solution
add a hack like this
$(document).ready(function () {
var prevSearch;
var saveState = true;
var table = $('#releases').dataTable({
"bJQueryUI":true,
"sPaginationType":"full_numbers",
"iDisplayLength":50,
"oSearch":{"sSearch":'#{params[:query]}'},
"fnDrawCallback":function (oSettings) {
var curSearch = oSettings.oPreviousSearch.sSearch;
if (!prevSearch) {
prevSearch = curSearch;
} else if (curSearch != prevSearch) {
console.log("changed to: " + curSearch);
if (saveState) {
history.pushState({query:curSearch}, "title", "releases?query=" + curSearch);
}
prevSearch = curSearch;
}
}
});
window.addEventListener("popstate", function (e) {
if (e.state) {
saveState = false;
table.fnFilter(e.state.query);
saveState = true;
}
});
});
I currently have a GridPanel with the Ext.ux.RowEditor plugin. Four fields exist in the row editor: port, ip address, subnet and DHCP. If the DHCP field (checkbox) of the selected row is checked, I need to make the other three fields un-editable.
I've been trying to perform this code when the beforeedit event is triggered, but to no avail... I've only found ways to make the entire column un-editable. My code so far:
this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});
checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
// this function makes the entire column un-editable:
this.getColumnModel().setEditable(2, false);
// I want to make only the other three fields of the current row
// uneditable.
}
}
Please let me know if any clarification is needed.
Any help potentially extending RowEditor to accomplish the target functionality would be greatly appreciated as well!
You can add into RowEditor.js within the function startEditing the call to the function isCellEditable
//.... RowEditor.js
startEditing: function(rowIndex, doFocus){
//.... search for the starting of the below loop into the source code
var cm = g.getColumnModel(), fields = this.items.items, f, val;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
// *** here add a call to isCellEditable *** //
f.setDisabled(!cm.isCellEditable(i, rowIndex));
// ***************************************** //
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
//....
Then override the isCellEditable of your column model and disabled the field based on you condition:
YYY.getColumnModel().isCellEditable = function(colIndex, rowIndex){
if (grid.getStore().getAt(rowIndex).get('dhcp')) {
// you can do more check base on colIndex
// only to disabled the one you want
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}
As the docs state:
If the listener returns false
the editor will not be activated.
So...
this.rowEditor.on({
scope: this,
beforeedit: this.checkIfEditable
});
checkIfEditable:function(rowEditor, rowIndex) {
if(this.getStore().getAt(rowIndex).get('dhcp')) {
return false;
}
}
Simply returning false will be enough to cancel the editing ability.
Gotcha.
Interesting idea - a bit of a hassle to implement, but possible.
You need to approach this from two directions:
1 ) edit starts
2 ) checkbox is checked/unchecked
For the first part, I think you could use almost the same code I have above, remove the 'return false' and use the reference to the rowEditor to loop through the items collection, disabling (call the disable method on them) the fields that are not your checkbox field.
The second part of this is to add a handler to the checkbox which would do the same thing.
The following works to make a specific cell uneditable (add the event to the roweditor):
beforeedit: function (roweditor, rowIndex) {
var data = roweditor.grid.store.getAt(rowIndex).data;
var cm = roweditor.grid.getColumnModel();
// disable the first column (can not be edited)
if (** make your check here ***) {
var c = cm.getColumnAt(0);
c.editor.disable();
}
roweditor.initFields();
}
As of ExtJS 3.4 you can just override isCellEditable, as in the example here:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.ColumnModel-method-isCellEditable
Here's the simpler version :
http://jsfiddle.net/snehalmasne/8twwywcp/
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
,pluginId: 'editing'
})
]
Provide the condition below for the cells to make the un-editable :
grid.on('beforeedit', function(editor, e) {
if (e.record.get('phone') == '555-111-1224')
return false;
});
just set the column in your columnModel/columns to editable:false for fields that should not be editable.
columns: [
{ header: "Ticker", width: 60, editable:false },
{ header: "Company Name", width: 150, id: 'company'},
{ header: "Market Cap."},
{ header: "$ Sales", renderer: money},
{ header: "Employees", resizable: false}
]
I ran into the same problem. Rather than using the GridPanel with the Ext.ux.RowEditor plugin, I used the Ext.grid.EditorGridPanel. In this case, you can specify the editor for each of the other three fields (port, ip address, and subnet) in the column model with a beforeshow event handler as follows:
editor: new Ext.form.TextArea({
height:80,
allowBlank: false,
listeners:{
beforeshow: function(column) {
if (column.gridEditor.record.get('dhcp')) {
column.gridEditor.cancelEdit();
}
}
}
})
Ha!
I made a dirty one, I added an event this.fireEvent('starting', this, fields,record); AT THE END of startEditing
startEditing: function(rowIndex, doFocus){
if(this.editing && this.isDirty()){
this.showTooltip(this.commitChangesText);
return;
}
if(Ext.isObject(rowIndex)){
rowIndex = this.grid.getStore().indexOf(rowIndex);
}
if(this.fireEvent('beforeedit', this, rowIndex) !== false){
this.editing = true;
var g = this.grid, view = g.getView(),
row = view.getRow(rowIndex),
record = g.store.getAt(rowIndex);
this.record = record;
this.rowIndex = rowIndex;
this.values = {};
if(!this.rendered){
this.render(view.getEditorParent());
}
var w = Ext.fly(row).getWidth();
this.setSize(w);
if(!this.initialized){
this.initFields();
}
var cm = g.getColumnModel(), fields = this.items.items, f, val;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
this.verifyLayout(true);
if(!this.isVisible()){
this.setPagePosition(Ext.fly(row).getXY());
} else{
this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
}
if(!this.isVisible()){
this.show().doLayout();
}
if(doFocus !== false){
this.doFocus.defer(this.focusDelay, this);
}
/*I ADDED THIS EVENT ---- contains the fields and record
*/
this.fireEvent('starting', this, fields,record);
}
}
THEN
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners : {
'starting' : function(rowEditor, fields, record){
if(!record.data.equipo_id){
fields[4].setDisabled(false);
}else{
fields[4].setDisabled(true);
}
},
Using Ext JS 4 and the RowEditing plugin i managed to achieve this using something like
rowEditor.on('beforeedit', function (context) {
this.editor.query('textfield')[0].setDisabled(/* your condition here */);
});
the record data is available through context.record.data