Good day all, I have a table in which I use the rowediting feature, and I have this column:
{
text: 'CPL Object',
dataIndex: 'CPLObj',
flex: 1,
editor: {
allowBlank: false
}
}
now, I'd like to make this column editable, only if another column has a certain value, let's say if the 'model' column has 'CPU' as value. Otherwise I'd like to Not have the editor for this value.
Is that possible?
do you mean your using grid? Have you tried adding a formula on your viewModel for checking if the model column you wish to check do have a value? Maybe something like:
Viewmodel:
checkvalue: function(get){
var x = true;
if (get('current.model' !== ''){
x = false
}
return x;
}
ViewController: (on your binding)
column: {
readonly: '{checkvalue}'
}
Related
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);
}
}
In AgGrid multi-group column scenario, how to display first column to have count number of second column.?
In a below example, United states shows (1109) rows in it, but i want to show (7), count of years in it.
So it should show United States (7) .How to achieve this ?
Seems like defining a custom innerRenderer inside the group settings might be right solution here.
Add autoGroupColumnDef attribute inside gridOptions as configuration used by the auto group columns
var gridOptions = {
autoGroupColumnDef: {
width: 200,
headerName: 'Group', //header name of the group
cellRenderer: 'agGroupCellRenderer', //default cell renderer for groupings
// provide extra params to the cellRenderer
cellRendererParams: {
suppressCount: true, // turn off the row count (in order to skip default stack counting)
innerRenderer: customInnerRenderer, //our inner renderer in charge of child nodes counting
}
},
//other settings
columnDefs: columnDefs,
animateRows: true,
enableRangeSelection: true,
rowData: null
};
Define customInnerRenderer that will handle the counting display
function customInnerRenderer(params){
//this verification is necessary, otherwise the grid will brake down
//when last level without grouping will be reached (if exists)
if (params.node.group) {
var label = params.value ? params.value : '-';
return label + ' (' + params.node.childrenAfterFilter.length + ')';
}
}
when using ag-grid, I want to set the first column header to be a checkbox,and do the select all or deselect all column action on all rows other than only groups.
Should anyone come here looking for answers this feature is already in ag-grid, just place headerCheckboxSelection: true in your column's definition.
See docs here
In gridOptions:
angularCompileHeaders: true
Where you are defining your columns, define the first column as such:
{
field: 'RowSelect',
headerName: ' ',
checkboxSelection: true,
suppressMenu: true,
suppressSorting: true,
headerCellRenderer: selectAllRenderer
},
In that file define the renderer:
function selectAllRenderer(params) {
var cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
var eHeader = document.createElement('label');
var eTitle = document.createTextNode(params.colDef.headerName);
eHeader.appendChild(cb);
eHeader.appendChild(eTitle);
cb.addEventListener('change', function (e) {
if ($(this)[0].checked) {
params.api.selectAll();
} else {
params.api.deselectAll();
}
});
return eHeader;
}
Please note that the creator is currently working on making this a feature, but this is the current work-around. Check here for updates and a more generic non-angular version: selectAll Feature Discussion
I have a table in which data is coming from back end. Based on particular condition(data coming from back end (gateway service)), if that condition is true then that particular row will have different color and will have a link on full row. And if condition is false then it will be a normal row.
So how to achieve it ?
Semantic colors for rows are now supported which can be leveraged by using the property highlight
on sap.m.ColumnListItem when using sap.m.Table (since 1.44):
<Table xmlns="sap.m">
<!-- ... -->
<ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
</Table>
on sap.ui.table.RowSettings when using sap.ui.table.Table (since 1.48):
<table:Table xmlns:table="sap.ui.table">
<table:rowSettingsTemplate>
<table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
</table:rowSettingsTemplate>
<!-- ... -->
</table:Table>
Samples
Demo Kit sample (sap.ui.table.Table)
JSBin sample with indication colors (sap.m.Table and sap.ui.table.Table)
How to switch applying a property binding using ternary operator in Expression Binding?
I think there are few different ways to change the colour, the easiest would be to change the style of the associate control
<control>.addStyleClass(myClass);
<control>.toggleStyleClass(myClass, true);
in the following example JsBin - alert overdue rows i use the following on a table row
row.$().addClass("overdue");
it adds the css style "overdue" to the domRef of the row
I assume you've got regular HTML table, then:
$("table tr").each(function(){
if( condition ){ //your condition eg. $(this).children("td:eq(1)").val() == sth
$(this).css("background":COLOR);
}
});
#Ashish its very difficult using only sapui5. you need to use jquery in that case. If that condition is true get the row's index and have a selector of that and then use like
$('.myTable tr:nth-child('+rowindex+')').css("background-color","red")
Try this. not sure
In UI5, I'm not sure if you can do this for a row at once, but you can certainly do this for a single cell using the valueState property:
var oConditionalColumn = new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Some label"
}),
template: (new sap.ui.commons.TextField({
value : "{myfield}",
valueState : {
parts : [myfield],
formatter : function(oValue) {
return (oValue === undefined || oValue == null || oValue == "" || isNaN(oValue) || parseInt(oValue) == 0) ? sap.ui.core.ValueState.Error : sap.ui.core.ValueState.None;
}
},
}))
});
Or, when you load the model, set an extra calculated property in advance based on your condition, and use that property to render each cell in your row in a different color for the current row context with a mior modification of the above code.
Instead of using CSS we can use sap.m.ObjectStatus to apply colors.
var iDtemplate = new sap.m.ColumnListItem("idTemplate", {
type: "Navigation",
visible: true,
selected: true,
cells: [
new sap.m.ObjectStatus({
text: "{SlNo}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
new sap.m.ObjectStatus({
text: "{Name}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
],
pressListMethod: function(event) {
var bindingContext = event.getSource().getBindingContext();
}
});
function getStatusColor(status) {
if (status === '') {
return "Error";
} else {
return "Success";
}
}
Based on the number field we are giving colors to columns Slno and Name.
I am using Kendo Column Menu option for kendo grid.I want that while hiding/showing the columns through the third option i.e Column I want to hide the Menus if the title of that column is blank.
Here I want to Hide the RefValue4 and RefValue5 since it corresponding values are coming null from the database.so there is no need of showing these.
I am doing this way:
if (grid.dataSource.data()[0].RefName4==null) {
grid.hideColumn(18);
}
but not able to achieve the result.
Is enough checking the content of the first row of the grid (as you propose in your code sample(? If so, you can define a dataBound handler that hides columns as:
dataBound : function (e) {
// Get reference to the grid
var grid = e.sender;
// Get reference to received data
var data = e.sender.dataSource.data();
// Check that we actually received any data
if (data.length > 0) {
// Iterate on columns hiding those that in the first row have no data
$.each(grid.options.columns, function (idx, elem) {
if (!data[0][elem.field]) {
grid.hideColumn(idx);
}
});
}
}
This runs anytime that you receive data from the server but as I said, only checks for the content of the first but you can easily modify for checking all. What this does not implement is hiding the column title from the menu.
See a running example here: http://jsfiddle.net/OnaBai/XNcmt/67/
EDIT: If you need that columns with no data are not displayed but also do not show up in the menu, you need to configure columns in the grid without those columns. You can do it in runtime once the data is received doing something like:
// Fetch data from the DataSource
ds.fetch(function (d) {
// By default, no column in the grid
var columns = [];
// List of available column definitions
var definitions = [
{ field: "Id", hidden: true },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "City" },
{ field: "Position" }
];
// For each column in the definition check if there is data
$.each(definitions, function(idx, elem) {
if(d.items[0][elem.field]) {
// If there is data then copy the definition to columns
columns.push(elem);
}
});
// Use received data plus the columns definition computed
$("#grid").kendoGrid({
dataSource: d.items,
editable : false,
pageable : true,
columnMenu: true,
columns : columns
}).data("kendoGrid");
});
Where ds is the DataSource definition.
See it here : http://jsfiddle.net/OnaBai/XNcmt/69/