I am using a AGGrid (actually via custom wrapper) and I have checkoboxes on each row.
Also, I have a bottom row with buttons. I want to enable/disable the buttons based on selected rows.
<AgGrid
id="dataListGrid"
containerProps={{style: {height: gridData.length * 30, minHeight: 180}}}
className="customGrid"
columnDefs={dataListColumns}
frameworkComponents={{checkboxColRenderer: checkboxColRenderer}}
gridDescription="List"
onGridReady={handleGridReady}
rowData={gridData}
enableBrowserTooltips={true}
pagination
paginationPageSize={100}
onCellClicked={onCellClicked}
onRowSelected={(params) => {
params.api.redrawRows({
rowNodes: [params.api.getPinnedBottomRow(0)],
});
}}
isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
fullWidthCellRenderer={CustomPinnedRowRenderer}
pinnedBottomRowData={[{}]}
{...props}
/>
My data looks like below;
let gridData = [{
fmIdentifier: 'Test data 1',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data',
}, {
fmIdentifier: 'Test data 2',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data X',
rowPinned: 'bottom'
}]
setDataListColumns(DataListColumns);
setGridData(gridData);
Below is how my CustomPinnedRowRenderer looks;
class CustomPinnedRowRenderer {
init(params) {
this.eGui = document.createElement('div');
// QUESTION : I want to access the grid data here...param.api.data shows empty object {}
const selectedNodes = params.api.getSelectedNodes();
this.eGui.innerHTML = finalDOMStr; //finalDOMStr has HTML
}
getGui() {
return this.eGui;
}
refresh() {
return false;
}
}
My question is inside the CustomPinnedRowRenderer (on row select), I want to check the param.api.data (so that I can accordingly render enabled/disabled buttons)
But param.api.data seems to be empty object for some reason ?
UPDATED
I tried adding the property "checked" to my data model and mapped to checked state as below
let gridData = [{
checked: true,
fmIdentifier: 'Test data 1',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data',
}, {
checked: false,
fmIdentifier: 'Test data 2',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data X',
rowPinned: 'bottom'
}]
However, any checked data stays as checked i.e. I cannot uncheck
My checkboxColRenderer looks as below
import React from 'react';
export default (props) => {
return (
<span>
<input type="checkbox" checked={props.data.checked} />
</span>
);
};
Related
In react native application i am using react navigation. I am send a object from one screen to other. After one section i am running a function which makes copy of my route parameter and modifying the copy. But my original parameter is also modifying. I do not want to modify the original object. How to avoid mutating parameters ?
Here is my parameter structure
{
id: 1
name: 'some name',
productOptions: [
{
productOptionId: 1
productOptionName: 'Option name'
options: [
{
name: 'some option name',
value: 12
},
{
name: 'some option name',
value: 12
},
{
name: 'some option name',
value: 12
}
]
},
{
productOptionId: 1
productOptionName: 'Option name'
options: [
{
name: 'some option name',
value: 12
},
{
name: 'some option name',
value: 12
},
{
name: 'some option name',
value: 12
}
]
}
]
}
Here is my screen code
const MyScreen({navigation, route}){
const product = route.params.product
const productOptions = route.params.productOptions
const [newOptionState, setNewOptionState] = useState([])
useEffect(() => {
setTimeout(()=>setPreSelected(), 1000)
}, [])
const setPreSelected = ()=>{
let tempProductOptions = [...productOptions]
tempProductOptions.map((item)=>{
if(item.options.length && item.options.length>1){
item.options.splice(1)
}
})
setNewOptionState(tempProductOptions)
}
}
I am experimenting with React and the react-data-table-component. I have set up a test table like this:
<DataTable
title={'TestTitle'}
columns={[{ name: 'test 1', selector: 'test1' }, { name: 'test 2', selector: 'test2' }, { name: 'test 3', selector: 'test3' }, { name: 'test 4', selector: 'test4' }, { name: 'test 5', selector: 'test5' }]}
striped
responsive
pagination paginationRowsPerPageOptions={[5, 10, 25, 50, 100]} />
I noticed that there is a div generated to the right of the to the title div in the table. It only has some weird classes assigned to it.Is it possible enter data in this div with some property to the DataTable?
I have experimented with the subHeader properties but it puts the new text under he title, making the table slightly higher which is not desirable.
<DataTable
title={'TestTitle'}
subHeader subHeaderComponent={'TestSubHeader'}
columns={[{ name: 'test 1', selector: 'test1' }, { name: 'test 2', selector: 'test2' }, { name: 'test 3', selector: 'test3' }, { name: 'test 4', selector: 'test4' }, { name: 'test 5', selector: 'test5' }]}
striped
responsive
pagination paginationRowsPerPageOptions={[5, 10, 25, 50, 100]} />
Ok, so apparently I am a little bit too impatient for my own good. About one minute after I posted this question I realised that the actions property does exactly the thing I wanted. I guess that I probably should delete this question now. Or is this information usable for others?
I am new to Quasar and Vue. Could someone explain to me how to solve my task?
Briefly about the task:
(1) I have a q-tree element which represents the folder structure at the left side of a screen [ref.1]
(2) Here is a folder structure [ref.2]
(3) When the user clicks on any element in this folder structure, then he will see a new component on the right side with all children elements of clicked one in a grid layout.
This is what do I have now.
[ref.1] treeComponent.vue
<template>
<q-tree
:nodes="documents"
#click="getId"
node-key="id" >
</q-tree>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selectedDoc: x,
documents: documents
}
},
methods: {
getId: function () {
const x = this.getNodeByKey('id')
consol.log(x)
}
}
}
</script>
[ref.2] documents.js
module.exports = [
{
id: '1',
label: 'My Documents',
icon: 'folder',
children: [
{
id: '01',
label: 'Dir 1',
children: [
{ id: '0001', label: 'Doc 1'},
{ id: '0002', label: 'Doc 2'}
]
},
{
id: '02',
label: 'Dir 2',
children: [
{ id: '0003', label: 'Doc 3'},
{ id: '0004', label: 'Doc 4'}
]
},
{
id: '103',
label: 'Dir 3',
children: [
{ id: '0005', label: 'Doc 5'},
{ id: '0006', label: 'Doc 6'},
{ id: '0007', label: 'Doc 7'}
]
}
]
}
]
you need to replace id by key.after this add this handler for each node
handler: (node) => this.onclick(node)
then add this method in methods
onclick(node) {
alert(node.key)
},
this will display id of perticular node
So, the main problem was related to not good enough acquainted with Quasar framework.
Here is my answer to this question:
<template>
<button v-on:click = "showNodeSelected">showClickedNode</button>
<q-tree
:nodes = "documents"
:selected.sync = "selected"
node-key="id"
/>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selected: null,
documents: documents
}
},
methods: {
showNodeSelected: function () {
console.log(this.selected)
}
}
}
</script>
If I have the ids for the following documents that belongs to a big collection and a newBusinessId to update those documents. Something like this:
const newBusinessId = '8abc4cef176aa342154d00c0'
const paymentsIds = ['5aba5cef176aa342154d2345', '5aba5cef176aa342154d6789']
And those ids belong to the following documents in my database:
[
{
_id: '5aba5cef176aa342154d2345',
state: 'MATURE',
comment: 'some comment 1',
startComment: 'some different comment 1',
expense: 2,
startExpense: 2,
businessId: '5aba5cef176aa342154d9876'
},
{
_id: '5aba5cef176aa342154d6789',
state: 'MATURE',
comment: 'some comment 2',
startComment: 'some comment 2',
expense: 3,
startExpense: 1,
businessId: '5aba5cef176aa342154d5432'
},
]
I want to update those documents with the same businessId:newBusinessId, with the state value of INIT
and the fields (comment, expense) to be set with the values of (startComment, startExpense) so I can have the following result after updating:
[
{
_id: '5aba5cef176aa342154d2345',
state: 'INIT',
comment: 'some different comment 1',
startComment: 'some different comment 1',
expense: 2,
startExpense: 2,
businessId: '8abc4cef176aa342154d00c0'
},
{
_id: '5aba5cef176aa342154d6789',
state: 'INIT',
comment: 'some comment 2',
startComment: 'some comment 2',
expense: 1,
startExpense: 1,
businessId: '8abc4cef176aa342154d00c0'
},
]
Any idea how? I appreciate your toughts!
in order to update a field with another field's value in the same object ( expense = startExpense for example ), you have to iterate through, try this :
yourModel.find().forEach(
function (elem) {
yourModel.update(
{
_id: { $in: paymentsIds }
},
{
$set: {
state : 'INIT',
comment : elem.startComment,
expense : elem.startExpense,
BusinessId : newBusinessId
}
}
);
}
);
So I have a list and I am creating cards on that , it looks like this .
JSFIDDLE
var vm = new Vue({
components: {
'card': card
},
el: '#demo',
data: {
customers: [{
id: '1',
name: 'user 1',
amount: '123.24',
profile_pic: 'https://i.stack.imgur.com/CE5lz.png',
email: 'ab#gmail.com',
phone: '+91959657248',
unread: '0'
}, {
id: '2',
name: 'user 2',
amount: '34.44',
profile_pic: 'https://i.stack.imgur.com/CE5lz.png',
email: 'abcd#gmail.com',
phone: '+919456664023',
unread: '0'
}, {
id: '3',
name: 'user 3',
amount: '1.24',
profile_pic: 'https://i.stack.imgur.com/CE5lz.png',
email: 'test#gmail.com',
phone: '+919566565065',
unread: '0'
}, {
id: '4',
name: 'user 4',
amount: '123.24',
profile_pic: 'https://i.stack.imgur.com/CE5lz.png',
email: 'sample#gmail.com',
phone: '+916466004566',
unread: '0'
}],
query: '',
},
computed: {
tableFilter: function() {
return this.findBy(this.customers, this.query, 'name')
}
},
methods: {
findBy: function(list, value, column) {
return list.filter(function(item) {
return item[column].includes(value)
})
},
updateComission(commission, id) {
console.log(id);
alert('I am parent need to update data');
}
}
})
I want to update the amount in the card when the '+' button is clicked, I was doing previously the index of the list , but every time list is filtered the index is changed and it was updating the wrong data .
Any Idea how I can fix this
Just pass the item as prop for the Card component and then to the NumberInputSpinner component.
<card v-for="item in tableFilter" :name="item.name" #commission_change="updateComission" :amount="item.amount" :item="item"></card>
<numberinputspinner :min="0" :max="2" :step="0.0001" #newNumber="updateTable" :item="item" />
then just use the prop to update the list reference
increaseNumber() {
this.numericValue += this.step;
this.item.amount += this.step;
},
https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props
if you want to update the item ref in the card component just emit a update_event form the numberInputSpinner, then update the item reference in the cardComponent
updated fiddle: https://jsfiddle.net/gewsu3yd/19/