My problem is if I have a single row and that row all column is empty I want to hide the row count of the row-group else how many children are there then it has to count each row-group has to calculate this count dynamically. I tried so many ways but was not able to solve this problem because we are using the client-side model in ag-grid#25.2.1 and vue2
<ag-grid-vue
style="width: 100%; height: 100%;"
class="ag-theme-alpine-dark"
:columnDefs="columnDefs"
#grid-ready="onGridReady"
:rowData="getRowData()"
>
</ag-grid-vue>
computed:{
getRowdata(){
if(true){
return diffdata
}else {
return rowdata
}
}
}
created(){
this.colHeaders = this.myheaders(condition)
}
methods:{
onGridready(params){
this.gridApi = params.api;
}
}
problem image :
expected behavior :
Here i showed one row for example it will be many rowgroup and i want to hide in specific row group which is have count 1 with empty rows.
any help that will be appreciated , Thanks
Finally, I found a solution to the above problem here I try to solve the problem I need to hide the row group count based on the condition so I have to change surrpressCount to true or false for this I didn't get any method to do that dynamically.
we can change suprrescount in gridOption directly it will effect changes in all rows conditionally we can't, after a lot of struggle I found one thing we can disable count and override group name using the below method.
valueFormatter this method will help you override group name
columnDefs : [{
field: 'country',
rowGroup: true,
valueFormatter:checkHideCondtion
hide: true
}]
function checkHideCondtion(value, data){
let isValid = checkCondition()
if(isValid){
return `${value}${data.allChilderenCount}`// show count
}else {
return `${value}` // don't show count
}
}
Related
So, I have some data coming in and rendering a table with an indeterminate number of columns. I would like to count those columns to correctly display a colspan td in the footer. I initialize a variable called footerCallspan with a value of 2...
var app = new Vue({
el: '#order-products',
data: {
footerColspan: 2, // default to 2 for title and quantity
},
//...
My footer table cell looks like ...
<td v-bind:colspan="footerColspan" class="summary">some text</td>
Each of the columns in the main table check a function to determine whether or not they should display ...
<th v-if="checkShowField(null, 'field_name')"scope="col">Name</th>
Finally, that function looks like ...
checkShowField(p, field) {
let pTest = p;
if (p == null) {
pTest = this.products[Object.keys(this.products)[0]];
}
if (pTest.hasOwnProperty(field)){
if (p == null) { // only increment on header row
// let span = this.footerColspan + 1;
// alert(span);
// this.footerColspan = span;
// alert(this.footerColspan);
}
return true;
}
return false;
},
No matter how I try to increment footerColspan inside that function, it seems to create an infinite loop.
I'm new to Vue, so I'm not sure if trying to increment that variable causes the table to re-render therefore triggering more calls to that function or what.
Anyone have any guidance here? If not, any other suggestions for counting the number of columns for my purpose?
Thanks!
I suspect your infinite loop issue is caused by incrementing this.footerColspan inside a v-if check. Basically footerColspan is reactive and the redraw happens every time it is changed and then v-if changed it again, and thus the infinite loop.
if there is a sample of your products structure and what determines the columns to be displayed, it will be easier to try and come up with a solution to count the columns
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.
Is there a property or a method that will prevent Vuetify Autocomplete to filter items to display until a certain condition is met, such as 3 character typed? I have a basic solution but I really hope that there is another solution. I don't want anything to show until the end user types a minimum of three characters. I have a solutions such as:
watch: {
search (val) {
if(val.length > 2){
this.minimumCharacter = 'show'
}else{
this.minimumCharacter = 'null'
}
And in my HTML:
<template
v-if="minimumCharacter === 'show'"
slot="item"
slot-scope="{ item, tile }"
>
Surely the Autocomplete has a property somewhere that will handle this. When you have thousands and thousands of records you don't really want everything to show as soon as you type one character. But I've search https://vuetifyjs.com/en/components/autocompletes#autocomplete and unless they call it something that I can not relate its not there.
Surely the Autocomplete has a property somewhere that will handle this. When you have thousands and thousands of records you don't really want everything to show as soon as you type one character. But I've search https://vuetifyjs.com/en/components/autocompletes#autocomplete and unless they call it something that I can not relate its not there.
I cannot find such property, but for me works fine this variant:
watch: {
search (val) {
if(val.length > 2){
//search code
}
P.S. Filter starts working after search, so it doesn't solve current task to prevent search.
You can use filter prop to implement your own filter function that always returns false if text length is less then 3:
(item, queryText, itemText) => {
const hasValue = val => val != null ? val : ''
const text = hasValue(itemText)
const query = hasValue(queryText)
if(queryText < 3) return false;
return text.toString()
.toLowerCase()
.indexOf(query.toString().toLowerCase()) > -1
}
I am creating a simple inventory system that will have various categories for the items, as well as the option to display all items.
Going from the 'all' category to the 'general' category will remove the unnecessary item, but leaves a gap for a significant period of time and there is not animation of the item after the gap sliding into place.
I am doing this using Vuejs and vue2-animate.
computed:
{
active_items: function()
{
var _self = this;
if(_self.active_category === 'all')
{
return _self.items;
} else
{
return _self.items.filter(function(i)
{
return i.category === _self.active_category;
});
}
}
},
https://jsfiddle.net/Crotanite/cn07tmho/8/
The gap that is left in place of disappearing list items is because an element that transition is being applied to, stays in place until leave-active animation phase is finished.
Simple fix, is to add position: absolute; to a leaving element. This will allow sibling list items to take it's position.
Below is updated version of your example with additional class zoomOut__absolute added to leave-active-class attribute. Additional class is added to avoid overwriting styles of animate.css:
JSFiddle
I have Problem with Store in ExtJS 4. In my application I want to use two combo. A store values are displaying in both combo. But the problem is the value selected in first combo should not get shown in next combo. Due to single store I'm unable to make it happen..What should have to do ?
This Works for me
listeners : {
expand: function() {
boxerListStore.filter(function(r) {
var value = r.get('id');
var getValue = Ext.getCmp('boxer2').getValue();
return (value != getValue);
});
}
}
You can use select event of first combo like -
listeners: {
select: function(combo, records, eOpts){
Ext.getCmp('secondCombo').select(records[0]);
}
}