Develop Reference

Is it possible to deselect a particular row in Aggrid?

I am trying to deselect a specific row in aggrid.
I have gone through the documentation but couldn't find one.
gridOptions.api.deselectAll();
This is what I am using to deselect all rows.But is there any way to deselect specific rows in Aggrid
I tried so many ways.Please help me to get through this.

You can use the row node api to deselect a node.
Based on docs -
setSelected(newValue: boolean, clearSelection: boolean)
Select (or deselect) the node. newValue=true for selection, newValue=false
for deselection. If selecting, then passing true for clearSelection
will select the node exclusively (i.e. NOT do multi select). If doing
deselection, clearSelection has no impact.
You need to first get the id of the node you want to deselect and do something like -
const node = gridOptions.api.getRowNode(id);
node.setSelected(false);

ag-Grid doesn't have toggling for the single row selection out of the box. That's just my understanding based on official docs, I sure can be wrong about this.
So for the multiple row selection it's easy and supported out of the box:
you just need to set rowMultiSelectWithClick to true and rowSelection to 'multiple' in the gridOptions (or whatever you call the config object).
For the single row select/deselect I've come up with the following (working plunker):
const gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'continent' },
{ field: 'language' },
],
defaultColDef: {
flex: 1,
resizable: true,
},
rowData: rowData,
// here i'm just checking for the right selection mode
// and firing my custom little function when the row is clicked
onRowClicked: this.rowSelection === 'single' && toggleRowSelection,
rowMultiSelectWithClick: true,
rowSelection: 'single'
};
let selectedRow = null;
// this function is just for keeping track of selected row id
// and programmatically deselecting the row by doing node.setSelected(false)
function toggleRowSelection({ node }) {
if (selectedRow !== node.id) {
selectedRow = node.id;
} else {
selectedRow = null;
node.setSelected(false);
}
}

Updating based on checkbox selection

I placing some xml data in grid using extjs. Now I'm trying to build an update function,
that worked fine, however I'm trying first to extract the data to be updated, so that the user won't have to insert the whole data again.
I managed to extract the data depending on the position in the grid, but not on the selection of checkbox next to each entry in the grid.
Code:
if (btn.id == "btn_update") {
var selection = grid.getSelectionModel().getSelection();
if(selection.length == 0){
alert("Please select an item to update");
}
else if(selection.length > 1){
alert("Please only select one item to update");
}
else{
Ext.getCmp('update_name').setValue(gridStore.getAt(0).get("FirstName"));
Ext.getCmp('update_lastname').setValue(gridStore.getAt(0).get("LastName"));
Ext.getCmp('update_email').setValue(gridStore.getAt(0).get("Email"));
winupdate.show();
}
}
How can I achieve that?

Hope this will help you.
You can use checkboxSelectionModel in grid and when you click on checkbox select event will be fired and that will give you current record, index and many other.
xtype:'grid',
selModel: Ext.create('Ext.selection.CheckboxModel',{
listeners: {
select: function (el, record, index, eOpts) {
//Get current record from record variable
}
}

Hide a Kendo ui command column using JQuery

I can hide a regular column in Kendo UI...
var grid = $("#MyGrid").data("kendoGrid");
grid.hideColumn("Id");
but I cannot seem to hide a command column such as this one...
columns.Command(command =>
{
command.Custom("Edit").Text("<span class=\"glyphicon glyphicon-pencil\"></span>").SendDataKeys(true).Click("ShowEditModal");
});
Thanks in advance!

You need to add the field property to your command column.
{ field: "coms", command: ["edit", "destroy"], title: " ", width: "250px" }
The hideColumn/showColumn actions use either the column number or column field "name".
Kendo API Reference
So, for example, using a button, you can do either:
$('#hide-col1').click(function () {
var col = grid.columns[4];
//var col = "coms";
if (col.hidden) {
grid.showColumn(col);
} else {
grid.hideColumn(col);
}
});
Or
$('#hide-col2').click(function () {
grid.hideColumn("coms");
});
Here's a working example: http://dojo.telerik.com/#nsnadell/uTeZu
If you wanted to only use the field property for a Show/Hide toggle, you'll need to put the field values in an array that has the same order as your columns and write a couple functions. But, not sure if that is a requirement for you.

EXTJS 5 - tagfield or combobox - show & hide form fields

I want to dynamically show and hide fields in a form according to the items selected in a multiselect combobox (tagfield).
Each item selected in the combobox has several associated hidden form fields (to be show).
The fields have the property "hidden:true";
I can show the fields, but I can not hide them when i delete the items from the combobox field or de tagfield.
listeners:{
select:function( combo, records, eOpts) {
var combo = Ext.ComponentQuery.query('#combo')[0];
var field = Ext.ComponentQuery.query('#A')[0];
var field1 =Ext.ComponentQuery.query('#B')[0];
var field2 =Ext.ComponentQuery.query('#C')[0];
var records = combo.getValue();
console.log(records);
for (var i = 0, count = records.length; i < count; i++) {
switch(records[i]) {
case 'itemone':
if(field.isHidden()) {
field.show();
}
else {
field.hide();
}
break;
case 'itemtwo':
if(field1.isHidden()) {
field1.show();
}
else {
field1.hide();
}
break;
case 'itemthree':
if(field2.isHidden()) {
field2.show();
}
else {
field2.hide();
}
break;
}
}
}
}
console.log(records) provides the following result:
Show:
["itemone"]
["itemone", "itemtwo" ]
["itemone", "itemtwo", "itemthree"]
Hide:
["itemone", "itemtwo"]
["itemone"]
Can you give me, please, suggestions to correct the code.
Note: sorry for the next post previously in the wrong place
I tried to implement your sugestions, but without success (beginners difficulties).
My code:
listeners:{
select:function( combo, records, eOpts) {
var combo = Ext.ComponentQuery.query('#combo')[0];
var fields = Ext.ComponentQuery.query('[autoHideTag]');
var records = combo.getValue();
console.log(records);
for (var i = 0, count = records.length; i < count; i++) {
fields.setVisible(records.indexOf(fields.autoHideTag) !== -1 );
switch(records[i]) {
case 'itemone':
if(field.isHidden()) {
field.show();
}
else {
field.hide();
}
break;
case 'itemtwo':
if(field1.isHidden()) {
field1.show();
}
else {
field1.hide();
}
break;
case 'itemthree':
if(field2.isHidden()) {
field2.show();
}
else {
field2.hide();
}
break;
}
}
}
}
Firebug says:
TypeError: fields.setVisible is not a function
Can you help with more suggestions, please.
Merci.

Indeed, your code has a logical flaw. You make all field visible, but when you then remove the 3rd tag, what happens? You loop on currently selected tags in the combo, and as you show it, you have ["itemone", "itemtwo"], no "itemthree" in there. So your last case, the one that could hide the 3rd field is note executed. And so on for the second and first tag.
What I would do instead is looping through each field, show it if the tag is selected and hide it if it isn't. You can use records.indexOf('itemone') !== -1 for example, to test if the tag is selected.
Another tip, I would use a custom property with a distinctive name for the fields, allowing both to simplify the component query, and mindlessly knowing the tag to test against the selected ones.
Here's what I mean... If you define your fields this way:
{
xtype: 'textfield'
,autoHideTag: 'itemone' // custom marker
}
You can them get all the fields in one query:
// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');
You can make the query more specific if you want and if applicable, something like "textfield[autoHideTag]" or "field[autoHideTag]".
And, finally, you'll know the tag to test for this field:
// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );
Voilà. Have fun with Ext!

how to undeline sorted column header in jqgrid

Answer in
how to make sort icons visible in all column headers in jqgrid regardless on sort status
describes how to add sortable indication to columns.
It is difficult to distinguish sorted and unsorted column by default sort indicator.
How to underline sorted column header text in addidion to sort indicator ?

I modified the demo from the previous answer to the following which display now
I used for the demo the CSS class where I additionally to underlining changed the color of the text
.sortedColumnHeader > div { text-decoration: underline; color: blue; }
If we play forward we can use just the 'ui-state-highlight' for the highlighting (see another demo). The column header will be probably even too much distinguish from the standard column:
The corresponding code is
var $grid = $("#list"), colModel, sortName;
// create the grid
$grid.jqGrid({
// all typical jqGrid parameters
onSortCol: function (index, idxcol, sortorder) {
if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
&& this.p.colModel[this.p.lastsort].sortable !== false) {
// show the icons of last sorted column
$(this.grid.headers[this.p.lastsort].el)
.find(">div.ui-jqgrid-sortable>span.s-ico").show();
$(this.grid.headers[this.p.lastsort].el).removeClass('sortedColumnHeader');
}
$(this.grid.headers[idxcol].el).addClass('sortedColumnHeader');
}
});
// show sort icons of all sortable columns
colModel = $grid.jqGrid('getGridParam', 'colModel');
sortName = $grid.jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID($grid[0].id) +
' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
var cmi = colModel[i], colName = cmi.name;
if (cmi.sortable !== false) {
// show the sorting icons
$(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
// change the mouse cursor on the columns which are non-sortable
$(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
}
if (cmi.name === sortName) {
$(this).addClass('sortedColumnHeader');
}
});
At the end I want to reference one more old answer where it's shown another sophisticated method to highlight the sorted column.