I am using a Ag-grid and have a requirement to set the last row (kind of total) to be bold and some background.
How can I achieve considering that we define columns ?
Also while the last row label (i.e. 1st column last row of grid) can be identified by checking params.value === 'Total', the other columns of that row can have dynamic total values (so cannot compare their actual text)
Below is how the config looks like (just for one of the columns)
[ {
headerName: '',
field: 'Status',
width: defaultWidth,
tooltipField:'status',
headerTooltip: 'Status',
sortable: false,
resizable: false,
cellStyle: params => {
if (params.value === 'Total') {
return { backgroundColor: color.orange,"font-weight":"bold" };
} else {
return null;
}
}
}, {.....}]
You can style the last row by using the Grid Option getRowStyle:
getRowStyle: (params) =>
params.node.lastChild
? { backgroundColor: 'orange', 'font-weight': 'bold' }
: null
Relevant Documentation: https://www.ag-grid.com/javascript-grid/row-styles/
See this implemented in the following sample: https://plnkr.co/edit/Vu32lW7jROiN0h5Q
Related
I have a grid that returns various types of data with filtering activated. One column is filtered based on three distinct options.
I need to load the grid with filtering enabled on one specific option. How Do I load a grid with one specific option already filtered?
var columns = [{
text: 'Title',
width: 260,
dataIndex: 'Title',
filterable: true
}, {
text: 'Description',
flex: 1,
dataIndex: 'Description',
filter: {
type: 'string'
}
}, {
text: 'Modified',
width: 90,
dataIndex: 'Modified',
xtype: 'datecolumn',
format: 'm/d/Y',
filter: true
}, {
text: 'Status',
width: 90,
dataIndex: 'TopicStateValue',
filter: {
type: 'list',
options: ['Open/Current', 'Archived/Closed', 'Hold']
}
}];
I need to load the grid with Open/Current items set to active.
Just perform the filtering on the store.
If you want to perform filtering in the background that is usually the way to go.
Another option is to activate the filter and the set it's value.
See your other question (https://stackoverflow.com/a/45380759/333492) for details on how to do that.
Row sum should calculated if price or quantity is changed.
Formatter is created according to How to access other row data from a cell's custom formatter in JqGrid
In inline and row editing modes row sum doesnt change.
Row sum column is read only and does not have id assigned. So it is difficult to create script to change it.
How to fix this so that row sum is calculated on edit ?
Testcase is in http://jsfiddle.net/ex6158L1/4/ containing
javascript
var serverResponse = {
"page": "1",
"records": "3",
"rows": [
{ "Id": "1", Quantity:4, Price : 23.33 },
{ "Id": "2", Quantity:4.55, Price : 76.66 }
]
},
$grid = $("#categorysummary");
function sumFmatter (cellvalue, options, rowObject) {
return options.rowData.Quantity *
options.rowData.Price;
}
$grid.jqGrid({
url: "/echo/json/", // use JSFiddle echo service
datatype: "json",
mtype: "POST", // needed for JSFiddle echo service
pager: '#pager',
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
//colNames: ["Quantity", "Price"],
colModel: [
{ name: 'Id', hidden: true },
{ name: 'Quantity', editable: true},
{ name: 'Price', editable: true },
{ name: "Sum", formatter: sumFmatter, editable: "readonly" }
],
jsonReader: {
id: 'Id',
repeatitems: false
},
sortname: 'Id',
viewrecords: true
})
.jqGrid("navGrid",'#pager')
.jqGrid("inlineNav",'#pager');
and css
<div class="container">
<div id="pager"></div>
<table id="categorysummary"></table>
</div>
The first problem, which you have, is the bug in free jqGrid, which follows that options.rowData was not filled inside of setRowData. I posted the corresponding fix to GitHub to eliminate the problem.
The next problem is the requirement to reformat the data of editable: "readonly". Form editing do this, but not inline editing. One can use either editable: "hidden" or to add the option
inlineEditing: {
extraparam: { Sum: "" }
}
which extend the results of inline editing with the dummy value "" for Sum column. It force reformatting of the value in the Sum column.
I would recommend you additionally to change the formatter sumFmatter which you use to
function sumFmatter (cellvalue, options, rowObject) {
var quantity = parseFloat(options.rowData.Quantity || 0),
price = parseFloat(options.rowData.Price || 0);
return (quantity * price).toFixed(2);
}
see the demo http://jsfiddle.net/OlegKi/ex6158L1/7/ or to
function sumFmatter (cellvalue, options, rowObject, action) {
var quantity = parseFloat(options.rowData.Quantity || 0),
price = parseFloat(options.rowData.Price || 0);
return $.fn.fmatter.call(this, "number", quantity * price,
options, rowObject, action);
}
where I called formatter: "number" to format the results of the multiplication (quantity * price).
See the resulting demo http://jsfiddle.net/OlegKi/ex6158L1/10/
I'm using a DGrid editor column to edit the contents of a store. Of the fields that I want to be able to edit, one is an object. When I click on the field to edit it, what I want is for the value displayed in the editor to match the value displayed by the grid when not editing. The cell formatting just shows the value of the object, but when I click on the field to edit it, instead of the object's value, I instead the field is populated with '[object Object]'. I can still edit it (though the results of doing so is that the field will display 'undefined' until I refresh the page, but I could just force a refresh after the change), but can't seem to get it to show what I want.
Here's the set up code:
// build the store
this.postStore = Observable(Memory({
data: posts
}));
var formatCategory = function(object, data, cell) {
cell.innerHTML = object.category.value;
};
var formatAuthor = function(object, data, cell) {
cell.innerHTML = object.author.value;
};
var formatDate = function(object, data, cell) {
cell.innerHTML = new Date(object.dateCreated).toISOString();
};
// the columns displayed in the grid
var columns = [
selector({
field: 'checkbox',
label: ' ',
selectorType: 'radio',
width:33
}),
{
label: "Author",
field: "author",
width: 120,
renderCell: formatAuthor
},
editor({
label: "Title",
field: "title",
editor: "text",
editOn: "click",
width: 200
}),
editor({
label: "Text",
field: "text",
editor: "text",
editOn: "click",
width:500
}, Textarea),
editor({
label: "Category",
field: "category",
editor: "text",
editOn: "click",
width: 150,
renderCell: formatCategory
}),
{
label: "Date",
field: "date",
renderCell: formatDate,
width: 120
}
];
if (this.postGrid) {
this.postGrid.set("store", this.postStore);
} else {
var SelectionGrid = new declare([OnDemandGrid, Selection, Keyboard, editor, selector, DijitRegistry, ColumnResizer]);
this.postGrid = new SelectionGrid({
store: this.postStore,
columns: columns,
selectionMode: 'none',
sort: [{attribute: "date", descending: false}]
}, this.postGridDiv);
this.postGrid.startup();
this.postGrid.on("dgrid-select, dgrid-deselect", lang.hitch(this, this._postSelected));
this.postGrid.on("dgrid-datachange", lang.hitch(this, function(evt){
var cell = this.postGrid.cell(evt);
var post = cell.row.data;
if (cell.column.field === "title") {
post.title = evt.value;
} else if (cell.column.field === "text") {
post.text = evt.value;
} else if (cell.column.field === "category") {
post.category.value = evt.value;
}
this._updatePost(post);
}));
Instead of defining a renderCell function, define a get function (which is used to transform the value before it is even sent to renderCell) and a set function (which is used to transform data back before it's sent to a store when saving edits).
Something like:
get: function (object) {
return object.category.value;
},
set: function (object) {
return { value: object.category };
}
See also the documentation.
I have a tree grid and there are two columns Duration and a checkbox column.
What i want is when i select / deselect checkbox I should get Duration column value.
This is the code i have tried
But dont know as how do I access the Duration value.
{
xtype: 'nacheckcolumn', //only display checkbox on leaf items(tasks)
header: 'N/A',
dataIndex: 'NA',
menuDisabled: true,
width: 60,
sortable: false,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
'checkchange': function (column, recordIndex, checked) {
console.log(checked);
if(checked === true) {
}
}
}
}
Get the record from the recordIndex :
var record = column.up('grid').getStore().getAt(recordIndex)
Then get the value of the desired column :
var duration = record.get('duration')
Together :
'checkchange': function (column, recordIndex, checked) {
console.log(checked);
if(checked === true) {
var record = column.up('grid').getStore().getAt(recordIndex),
duration = record.get('duration')
}
}
I am using IgniteUI to place a grid on a site. The grid is bound using KnockoutJS. I've used this setup for many grids in my application, but I've run into a weird issue.
I need to have a grid that has a multi column header, and another column after that. I've used multi column headers and they work fine. In this instance, though, the grid will place the info from the column that should be after the group into the first column of the group, as seen in this fiddle: http://jsfiddle.net/rc5a4vbs/3/. The ColumnY column should have a bunch of Ys in it on both rows, as seen in the Javascript.
function ViewModel() {
var self = this;
self.value = ko.observable(false);
self.data = ko.observableArray([
{ "ColumnA": ko.observable(1), "ColumnD": ko.observable(21), "ColumnE": ko.observable("dkifhugb"),
"ColumnF": ko.observable(true), "ColumnG": ko.observable("false"),
"Procedure": ko.observable("Final Column"),
"TestConditionGroup": {
"ColumnY": ko.observable("YYYYYYYYYYYY"), "ColumnZ": ko.observable("ZZZZZZZZZ")
}
},
{ "ColumnA": ko.observable(2), "ColumnD": ko.observable(14), "ColumnE": ko.observable("5347347"),
"ColumnF": ko.observable(false), "ColumnG": ko.observable("string"),
"Procedure": ko.observable("Final Column"),
"TestConditionGroup": {
"ColumnY": ko.observable("yyyyyyyyyyyy"), "ColumnZ": ko.observable("zzzzzzzzzzz")
}
}
]);
self.getColumns = function() {
//debugger;
var columns = [
{ key: 'ColumnA', headerText: '', width: '0px', hidden: true },
{ key: 'ColumnD', headerText: 'Sequence', width: '100px' },
{ key: 'ColumnE', headerText: 'Iteration', width: '100px' },
{ key: 'ColumnF', headerText: 'Risk', width: '100px' },
{ key: 'ColumnG', headerText: 'Sub-Chapter Title', width: '200px' }
];
var columns2 = [
{ key: 'TestConditionGroup', headerText: 'ColumnY', width: '100px',
formatter: function(val){
return val[this.headerText];
}
},
{ key: 'TestConditionGroup', headerText: 'ColumnZ', width: '100px',
formatter: function(val){
return val[this.headerText];
}
}
];
columns.push({ key: 'TestConditionGroup', headerText: 'Test Conditions', group: columns2 });
columns.push({ key: 'Procedure', headerText: 'Procedure', width: '200px'});
return columns;
}
}
The grid was working correctly until I made the data that is in the grouped columns into an object within the row object. This is how the server will be sending me the info. When all of the columns were on the top level it worked fine.
How can I get the data to appear correctly with this set up for the supplied data? Any help would be greatly appreciated.
The problem is not caused by the Multi-Column Headers, but from the complex object property that you have in your data.
If you want to bind the ColumnY and ColumnZ then you have to declare them as unbound columns and in the formatter function extract their values from the TestConditionGroup property of the data. You do that by using a second parameter in the formatter function which will give you a reference to the current row data.
var columns2 = [
{ key: 'ColumnY', headerText: 'ColumnY', width: '100px', unbound: true,
formatter: function(val, row){
return row["TestConditionGroup"][this.headerText];
}
},
{ key: 'ColumnZ', headerText: 'ColumnZ', width: '100px', unbound: true,
formatter: function(val, row){
return row["TestConditionGroup"][this.headerText];
}
}];
Also to make the data from the TestConditionGroup column available in the formatter functions you have to configure localSchemaTransform to false.
The last thing you need to do is to set the autoGenerateColumns to false, because it's true by default.
Here is the link to the updated fiddle:
http://jsfiddle.net/rc5a4vbs/4/