I am using Ag-grid and I need merge particular cells in a row.
How can I do this?
This example demonstrates merging of "First name" and "Last name" fields to form "Name" Field
columnDefs: [
{
headerName: 'Name',
field: 'name',
filter: true,
width: 210,
valueGetter:function(params){
return params.data.fname+" "+params.data.lname
}
},
...
]
ag-Grid calls this "Column Spanning." In the good old' days of HTML tables, we'd call this colspan, and rowspan for the closely-related action of merging cells vertically.
Anyway, here is the ag-Grid reference:
https://www.ag-grid.com/javascript-grid-column-spanning/
You can add this to your colDef for the particular column
cellClass: function(params) {
if(params.data.someConditionForCellsToBeMerged) {
return params.data.someConditionForCellToKeep ? "top-row-span": "bottom-row-span";
}
}
And then in your css:
.ag-neo .ag-cell.top-row-span {
border-bottom: 0px;
}
.ag-neo .ag-cell.bottom-row-span {
border-top: 0px;
text-indent: -100em; // you can use this to hide the content of the bottom cell
}
Related
Please refer to the image shown below. (The highlighted part is the ROW header that I need in AG-Grid)
I am not sure about the functional use case of this first column for you.
Nevertheless you can achieve this by adding it to column definition as shown below.
var gridOptions = {
// define grid columns
columnDefs: [
// using default ColDef
{
headerName: ' ',
field: '__',
width: 15,
sortable: false,
cellStyle: {
// you can use either came case or dashes, the grid converts to whats needed
backgroundColor: 'lightgrey', // whatever cell color you want
},
},
...
}
Created working sample plnkr here.
As far as I know ag-grid doesn't have any built-in support for row headers, but as a workaround you can make your first column appear as row headers. I recommend making the whole column look a little different compared to the other columns (including the column header if it's not blank) so it can clearly be seen they are column headers, not standard row data.
Example column definitions:
ColumnDefs: [
{ headerName: 'Column Title 1', field: 'Column1', minWidth: 100, headerClass: "upperLeftCell", cellStyle: {
backgroundColor: 'AliceBlue', //make light blue
fontWeight: 'bold' //and bold
}
},
{ headerName: 'Column Title 2', field: 'Column2', minWidth: 100 },
{ headerName: 'Column Title 3', field: 'Column3', minWidth: 100 }
]
You can also style in SCSS as shown here with the upper left cell:
::ng-deep .ag-header-cell.upperLeftCell {
background-color: aliceblue;
font-weight: bold;
}
In your data rows: you have to enter in the first column the title you want for each row.
Add this as your first colDef. It will render a index column that is unmovable. I have a separate IndexColumnCellRender so won't look exact the same, fill in cellStyle to fit your needs, or make a dedicated cell render like me.
const rowIndexColumn: ColDef = {
valueGetter: ({ node }) => {
const rowIndex = node?.rowIndex;
return rowIndex == null ? "" : rowIndex + 1;
},
width: columnWidth,
headerName: "",
colId: "some-id",
field: "some-id",
suppressNavigable: true,
suppressPaste: true,
suppressMovable: true,
suppressAutoSize: true,
suppressMenu: true,
lockPosition: true,
cellStyle: { padding: 0 },
};
Is the following format possible with ag-grid:
Merged header with blank name
Merged header with name in 2 lines ("Original Values")
Parent header centered ("Header with children")
Thank you, for the question I know it is been too late for the answer but just to help another people know it.
Yes, it is possible with an updated version of ag-grid, please check it out.
`var columnDefs = [ {
headerName: 'Athlete Details',
children: [
{
headerName: 'Athlete',
field: 'athlete',
width: 150,
suppressSizeToFit: true,
enableRowGroup: true,
rowGroupIndex: 0,
},
{
headerName: 'Age',
field: 'age',
width: 90,
minwidth: 75,
maxWidth: 100,
enableRowGroup: true,
}
]
}];
`
https://plnkr.co/edit/?p=preview&preview
I'm struggling with this for quite a while, but i can not find a good solution. Anyway i figured out a solution (at least for my self).
In my case, the headers are dynamic. Only some headers have children.
Here is the solution:
Figure out how many rowspan should a header have
Apply class to header
In your columnDefs, use 'headerClass'
const rowSpanClass = ..... // This is calculated base on the data you have or set it static
columnDefs = {
....
....
headerClass: rowSpanClass, // In my case, if it is 2 rowspan, i call it 'header-row-span-2'
......
}
Apply style on the custom header class
.header-row-span-2 {
position: fixed;
top: 50px;
height: 100px;
}
.header-row-span-3 {
position: fixed;
top: 100px;
height: 150px;
}
The value of 'top' and 'height' need to be changed accordingly (ag-grid header height is 50px by default)
Just to share. I think this is not possible using the headers in ag-grid. So, instead, I set the headerheight to 0 and use the row cells to achieve the header format.
I made some modifications in the given example in the website:
ag-Grid row spanning example
specifically, I added the following:
} else if (athlete === "Jenny Thompson") {
return 500;
...
cellClassRules: { "cell-span": "value==='Jenny Thompson' || value==='Aleksey Nemov' || value==='Ryan Lochte'" },
At first look, it seems that 'Jenny Thompson' spans properly. However, when you scroll a little bit further, the spanning stops. But if you click on 'Jenny Thompson' and scroll, the spanning continues up to the 500th cell.
The issue is that when you scroll down, the previous rows are removed and replaced by new ones. Thus, the rowSpan is removed. I did a workaround for this.
In rowData, I added these new properties: rowSpan-<index> and grpSpan-<index>. rowSpan-<index> will indicate how many rows a cell span to. I have to calculate the rowspan for the other rows under the main group cell. For example, my cell spans 50 rows. Therefore, it has a rowspan of 50. The cell below it will have a rowspan of 49, the next cell will have 48, and so on. This is so when the rows above got removed from viewport, the new cells still know how many rows it need to span. These other cells that have a rowspan less than the main (50 in this example), will have another property grpSpan-<index>. This is just to identify that they are part of the main group. By the way, index is the column index.
Then I added the following property to columnDefs:
column['rowSpan'] = (params) => {
return params.data[`rowSpan-<index>`] ? params.data[`rowSpan-<index>`] : 1;
};
column['cellClassRules'] = {
'cell-span': (params) => {
return params.data[`rowSpan-<index>`] ? true : false;
},
'cell-group': 'true',
'cont-span': (params) => {
return params.data[`grpSpan-<index>`] ? true : false;
}
};
In css:
.cell-span {
border-bottom: 1px solid #d9dcde !important;
}
.cell-group {
background: white;
}
.cont-span {
color: white;
}
I hope this helps others struggling with this issue.
I'm using the jeditable plugin for making some values editable. I noticed that when a value is empty the default text 'Click top edit' appears which I don't want. But I still want to make that field editable too. How to manage this?
I noticed a suggestion at http://www.datatables.net/forums/discussion/5865/jeditable-and-default-click-to-edit/p1, but that does not seem to work - at least not for me; when using the placeholder : "" the field is not editable anymore.
My related code:
$('.edit').editable('edit_save.php', {
cancel : 'Cancel',
submit : 'OK'
});//$('.edit').editable('jeditable_save.php', {
Without any text to fill it, the editable element needs to be an inline block with height and width like this:
.edit {
border: 1px solid red;
display: inline-block;
min-height: 20px;
min-width: 100px;
}
and set a blank placeholder like you mentioned:
$('.edit').editable(function (value, settings) {
return value;
}, {
cssclass: 'editing',
placeholder: '',
});
See this fiddle http://jsfiddle.net/chrisdillon/37JqF/
I tried add this row: placeholder:'
&
nbsp;' and it works.
If you can add this row, you see your input is empty.
$('.edit').editable('Something', {
something,...
placeholder:' ',
})
I'm hoping someone can offer help in this. I have a Kendo grid in a html document (no MVC), and am wanting to change the class of the entire row on row select. I have tried various approaches, still with no luck. I am currently at:
// within kendo grid definition - grid called '#grid'
change: function (e) {
$("#grid tbody").find("tr[k-state-selected]").css("color", "black");
var id = $("#grid").closest("tr").css("color", "black");
CallDocument(this._data[0]);
},
The function CallDocument is being fired, and so I know I can at least get to the function.
EDIT: Here is the solution that I came up with, and thanks to everyone
change: function (e) {
$("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");
},
I needed to use the 'tr.k-state-selected' form, and change using attr in order to change the set of classes.
To mark every visited row as selected, you might add a CSS class on change event.
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
selectable: true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
],
change : function (e) {
this.select().addClass("ob-selected");
}
}).data("kendoGrid");
The class ob-selected stays when you move to another cell since this does nothing to do with KendoUI.
Example here : http://jsfiddle.net/2TGLp/1/
The only question is that it does not stay selected if you apply filters, change to a different page... but not sure if this is important for you.
I override my Kendo styles using both css and javascript (depending on the scenario).
CSS:
.k-state-selected {
color: black;
}
Javascript/jQuery:
$('k-state-selected').css('color', '#000000')