we are trying to add copy paste feature to our ag-grid cell.Without using cellEditor for a column we are able to copy value from grid but we require cellEditor for some validation purpose.
Could any one give a solution for where i can use cellEditor and still achieve the copy feature of ag-grid cell.
we are using ag-grid-enterprise 19.1.2 version.
app.component.ts
this.frameworkComponents = {
numericCellEditor: NumericCellEditorComponent,
gridheader: GridHeaderComponent
};
app.component.html
<ag-grid-angular style="width: 100%; height: 400px;"
(gridReady)="onGridReady($event)"
[columnDefs]="columnDefs"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
[suppressMovableColumns]="true"
[suppressContextMenu]="true"
[overlayLoadingTemplate]="overlayNoRowsOrLoadingTemplate"
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
[frameworkComponents]="frameworkComponents"
(cellValueChanged)="onCellValueChanged($event)"
[rowClassRules]="rowClassRules"
[rowBuffer]="rowBuffer"
[singleClickEdit]="true"
[stopEditingWhenGridLosesFocus]="true"
[suppressScrollOnNewData]="true"
[enableColResize]="true">
service.ts
{
headerName: '%',
field: 'abc',
editable(params) {
return false;
},
width: this.colwidth,
cellClass: 'non-editable-color',
cellClassRules:this.cellclassfornumericdata,
cellEditor: 'numericCellEditor',
cellEditorParams:this.getParams.bind(this),
suppressNavigable(params) {
return true;
},
}
Related
Hi am trying to style a div dynamically in VueJs.But facing this problem that the this.currentProgressLevel is not applied to the width property inside the currentStyle object.I am attaching the screenshot of code i am using. The width property is not working when i use ${this.currentProgressLevel *75}px Why it might not be working?When i change the this.currentProgressLevel with 0.33 manually it works but then it will be hardcoded, why the value is not taken from the data variable currentProgressLevel? Below is the code i am using:
In script :
data(){
return{
currentProgressLevel:.33,
currentStyle:{
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}}
You should turn currentStyle into computed like this:
computed: {
currentStyle () {
return {
width: `${this.currentProgressLevel *75}px`,
height:‘6px’,
background:‘green’
}
}
}
For reactive data, you should move 'currentStyle' to computed. in this case, you just catch the initial value of 'currentProgressLevel'.
computed:{
currentStyle(){
return {
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}
}
I have a dashboard which is built using dc.js and i'm using the chart types dc.rowChart and dc.dataTables.
Working Scenario with without conditional formatting:
dc.rowChart - displays Top 50 Customers
dc.dataTable - displays all the fields required and filters the data based on the rowChart.
Working Scenario with conditional Formatting (on datatable rows)
In my HTML, i'm calling the jquery plugin for DataTable (for conditioanl formatting) and here is the code below:
<script>
$(document).ready(function() {
$("#Table").DataTable( {
/*
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if ($(nRow).find('td:eq(7)').text()<'0') {
$(nRow).find('td:eq(7)').addClass('color');
}
}
*/
columns : [
{ title : "Customer Name" },
{ title : "YoY Rank Change" ,
render: function ( data, type, row ) {
if (data > '0') {
return '<p class="positive">'+data+'</p>';
} else {
return '<p class="negative">'+data+'</p>';
} } },
{ title : "Jan'19 Qty" },
{ title : "Dec'18 Qty" },
{ title : "Nov'18 Qty" },
{ title : "Oct'18 Qty" },
{ title : "Sep'18 Qty" },
{ title : "Aug'18 Qty" }
]
} );
} );
$.extend( true, $.fn.dataTable.defaults, {
"searching": true,
"ordering": false,
"paging": false,
"info": false,
} );
</script>
CSS:
.negative {
background-color:rgba(255,0,0,1.00);
color: #fff;
text-align: center;
}
.positive {
background-color:rgba(50,205,50,1.00);
color: #fff;
text-align: center;
}
ISSUE HERE
When i render the page first time, everything with the datatable with conditional formatting works fine
But when i click on Row Chart to filter datatable based on Customer's, Conditional formatting is gone...
Any help is much appreciated to fix this.
I have tried almost all the stack answers but i'm not able to achieve it.
references used below:
1. How to color code rows in a table dc.datatable?
2. How do I apply conditional formatting using datatables.js?
3. Color code a data table in dc.js
4. How to color code rows in a table dc.datatable? ( This is opted out as i dont want to color code entire row)
#Gordon my survivor at all times.. Looking for your inputs please!!
I see that you are still on dc.js 2.0, so I didn't attempt to port this to dc.datatables.js or dc-tableview. I still think that would be more maintainable.
As I noted in the comments, $.DataTable is a one-way transformation: once you have done this, there is no way to update the table, because dc.dataTable doesn't recognize the DOM structure anymore, and DataTable doesn't have a way to reinitialize.
There might be some smart way to get DataTables to update the data (and this is what the libraries do). It's also madly inefficient to first build a table and then construct a DataTable using the DOM as a data source.
But whatever, let's just get this working by building the DataTable from scratch every time the dc.dataTable is drawn.
The way to do this is to listen for the table's pretransition event, remember if we've already initialized DataTable, and if we have, destroy the old instance:
var dt = null;
table.on('pretransition', function() {
if(dt)
dt.destroy();
dt = $("#dc-data-grid").DataTable( {
// as before
} );
});
Fork of your fiddle. I had to fix a few other things, but I won't go into the details.
I'm using w2ui grid, and the template column generated like so:
{ field: 'TableCards', caption: 'Table cards', size: '10%', sortable: true ,
render:function(record, index, column_index) {
let html = '';
if (record.TableCards) {
record.TableCards.forEach(function(card) {
html += `<div class="card-holder" style="width: 12%; display: inline-block; padding: 0.5%;">
<div class="poker-card blah" poker-card data-value="${card.value}"
data-color="${card.color}"
data-suit="&${card.suit};"
style="width: 30px;height: 30px">
</div>
</div>`;
});
}
return html;
}
},
poker-card as u can see is a custom attribute. and it's not get rendered in the grid.
any other way?
You can use the TemplatingEngine.enhance() on your dynamic HTML.
See this article for a complete example: http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
Important note: based on how your custom attribute is implemented, you may need to call the View's lifecycle hooks such as .attached()
This happened to me, when using library aurelia-material, with their attribute mdl.
See this source where the MDLCustomAttribute is implemented, and now see the following snippet, which shows what I needed to do in order for the mdl attribute to work properly with dynamic HTML:
private _enhanceElements = (elems) => {
for (let elem of elems) {
let elemView = this._templEngine.enhance({ element: elem, bindingContext: this});
//we will now call the View's lifecycle hooks to ensure proper behaviors...
elemView.bind(this);
elemView.attached();
//if we wouldn't do this, for example MDL attribute wouldn't work, because it listens to .attached()
//see https://github.com/redpelicans/aurelia-material/blob/5d3129344e50c0fb6c71ea671973dcceea14c685/src/mdl.js#L107
}
}
I'm using the Dgrid Selection grid for a grid that uses check boxes for selecting the content. However, only child node of the tree should show the checkbox as the parents are just categories and can't be selected. Previously I used the editor plugin for this, but it created difficulty with clearing selections (specifically, the "clearSelection" method of the grid did nothing). I switched to the selector plugin, so now selecting and deselecting rows works fine, but now I can't seem to figure out a way to hide the check box on some rows and not others.
Original code
var columns = [
editor({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
canEdit: function(object) {
// only add checkboxes for child objects
return object.type === "child";
}
}, "checkbox"),
tree({
label: "Item",
field: "shortItemId",
width: 150,
shouldExpand: function() {
return 1;
}
}),
{
label: "Grouping Name",
field: "groupingName"
}
];
var itemGrid = new SelectionGrid({
store: itemStore,
style: {
width: '99%',
height: '99%'
},
columns: columns,
sort: [{attribute: "shortItemId", descending: false}]
});
I used the "editOn" parameter of the editor to hide the check box, but the selector plugin only has the "disabled" parameter, which doesn't hide the field at all.
Is there a way I can get the check box hidden using the selector like I did with the editor?
Looking at the dgrid/selector source, it seems that the input is always created and added to the DOM, regardless of whether it has been disabled. Presumably this is to allow it to be flexible enough to enable and disable checkboxes on the fly without the need to constantly re-create DOM nodes. While it is not possible to prevent these nodes from being rendered, it is possible to hide them with CSS, since the cell node is given a class with the format field-{fieldName} (or in this particular case, field-itemSelected):
// JavaScript
var columns = [
selector({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
// Disable any checkbox that is not of type "child"
disabled: function (item) {
return item.type !== 'child';
}
}),
...
];
/* CSS */
.field-itemSelected input[disabled] {
display: none;
}
I am having trouble attempting to change the structure of a datagrid after new information is received. I need to be able to change the number of columns everytime a query is made.
The javascript code I use to create the grid
function setgrid(){
var gridLayout = [];
var key, i;
for(i = 0; i < 10; i++) {
key = i + "";
gridLayout.push({
field: key,
name: key,
editable: false
});
}
// create a new grid:
billsGrid = new dojox.grid.DataGrid({
query: {},
//store: store,
clientSort: true,
rowSelector: '20px',
structure: gridLayout,
columnReordering: true
}, gridContainer);
// Call startup, in order to render the grid:
billsGrid.startup();
}
and the html:
<div id="gridContainer" style="width: 650px; height: 600px; border: 1px solid silver;" />
How would I change the grid to have a new layout of say 5 columns?
Found it, just needed to know what to call to apply a new layout to the existing grid. In this case:
billsGrid.setStructure(newLayout);
In the latest version of dojo, there is no method setStructure. You might want to use:
grid.set('structure', newStructure);