I'M using the ag-grid react rowSelection={"single"} it works fine but when try the select a row from the fist field of the column that has an icon rendered by ag-group-cellRender it doesnt't select the row
enter image description here
`
<AgGridReact detailCellRenderer={'detailCellRenderer'} masterDetail={true} isRowMaster={isRowMaster} rowSelection={"single"} detailRowHeight={270} editType={'fullRow'} tooltipShowDelay={500}
onGridReady={onGridReady} rowData={rowData} suppressClickEdit={true} rowClassRules={rowClassRules} pagination={true}>
``
<AgGridColumn headerName='Line Item' headerTooltip="Line Item's name" headerClass="greyHeader"
field='Name' tooltipField='Name' cellEditor='lineItemEditor' cellRenderer="agGroupCellRenderer"
cellClass={cellClass} resizable={true} minWidth={150} flex={1}
editable={editable == "addLineItem" ? true : editable == "editLineItem" ? true : editable == "addChangeOrder" ? true : editable == "editChangeOrder" ? true : false} />
t`
Related
I am using Ag-Grid for displaying tabular data, is there a way we can add a placeholder in the dropdown options which are displayed in a column where we have an agSelectCellEditor?
Problem Statement:
Sample Code:
for(const [key,value] of countryCodes ) {
if (key !== ' ') {
countryNames.push([value.countriesCd]);
}
}
console.log(this.countryNames) = [['France'], ['Belgium'], ['USA'], ['UAE']]
For eg: The column filed = 'country'
country.cellEditor = 'agSelectCellEditor',
country.singleClickEdit = true,
country.cellEditorParams = {
values.countryNames,
}
When clicking on the country column, it shows the select dropdown with the countryNames list and without making any selection it defaults the dropdown to France, its confusing for the users as an option is displayed in the editorCell without selection
I'm using ANT Design's Select component in multiple select mode. After two options are selected (see screenshot) I'd like to prevent any more from being selected. The field should not be disabled, so that you can deselect an option and select another.
I've tried the onFocus event, but it doesn't provide an event that I could use to preventDefault or otherwise keep from opening the dropdown. I've also tried adding a ref and calling blur() whenever the onFocus event is called. This closes the dropdown, but it's still visible for a second.
Does anyone know of a way to accomplish this?
If 3 or more options selected then with a simple condition you can disable other options.
Store selected options in state and while displaying options disable them based on condition.
https://codesandbox.io/s/happy-leftpad-lu84g
Sample code
import React, { useState } from "react";
import { Select } from "antd";
const { Option } = Select;
const opts = ["a11", "b12", "c13", "d14", "e15"];
const Selectmultiple = () => {
const [optionsSelected, setOptionsSelected] = useState([]);
const handleChange = value => {
console.log(`selected ${value}`);
setOptionsSelected(value);
};
return (
<div>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
onChange={handleChange}
>
{opts.map(item => (
<Option
disabled={
optionsSelected.length > 1
? optionsSelected.includes(item)
? false
: true
: false
}
key={item}
>
{item}
</Option>
))}
</Select>
</div>
);
};
I solved this problem using "open" prop:
const isMaxValues = value.length === limit;
<Select
mode="multiple"
disabled={false}
{...(isMaxValues && { open: false, onDropdownVisibleChange: handleShowError })}
>
{renderOptions()}
</Select>
So you still able to remove/deselect some options
Also you can provide isMaxValues option to renderOptions method and disable Options to be selected(if you need dropdown to be visible)
What's the best way to toggle status? I have this data sample below. The status field is to track when a user becomes active online. This is a referral program. The person who referred a user should be able to know when the user creates an account by the status changing from red to green. How do I make these status to toggle.
From the DB when status.active === true that means the user is active, the status should turn green. If status.active === false, this means the user is inactive, it should turn to red.
The is the Blade template
<h4 class="media-heading">
{{#if equals 'status.active' 'true' }}
<div> class="circle active"></div>
{{else}}
<div class="circle not-active"></div>
{{/if}}{{firstname}} {{lastname}} <small class="pull-right">{{ createAt}}<label><input type="checkbox" name="eachstudents" value="{{_id}}">Add to Module</label></small></h4>
Sample data
{
"_id" : "5jW9gcLaKg83LynML",
"registra" : "kadeoya",
"status" : {
"active" : true,
"activedate" : ISODate("2017-09-16T08:59:55.062+0000")
},
"userId" : "n5rqFSHbhm7zqADyB",
"createdAt" : ISODate("2017-09-05T18:45:14.804+0000")
}
{
"_id" : "MbNoqW2ZYhZco3My5",
"registra" : "kadeoya",
"status" : {
"active" : true,
"activedate" : ISODate("2017-09-11T08:49:08.830+0000")
},
"userId" : "n5rqFSHbhm7zqADyB",
"createdAt" : ISODate("2017-09-05T18:45:14.824+0000")
}
You simply have to make a helper to check the status "online" or "offline". You can use below code,
Template.Template_Name.helper({
isActive(){
var document = Collection.find({}).fetch()[0]; // add ur conditions in find({})
return document && document.status && document.status.active;
}
});
then you can call this helper in blade template as below,
{{#if isActive }}
<div class="circle active"></div>
{{else}}
<div class="circle not-active"></div>
{{/if}}
In this way, your helper will be reactive and will toggle as and when the value for "status.active" changes in the particular document.
I can quite handily change a button in the view using it's property 'type' in an expression..
type="{= (${Orders>SupplierNote} && ${Orders>SupplierNote} !== '') ?
'Reject' : (${Orders>InternalNote} && ${Orders>InternalNote} !== '') ?
'Emphasized' : 'Default'}"/>
The problem is, how do I do this for a Text component?
I can't overwrite the class and it doesn't have a type.
Here's how I implemented CustomData to add a class with expression Binding...
In the View....
<Text text="{Orders>EmailAddress}" tooltip="{Orders>EmailAddress}">
<customData>
<core:CustomData key="mydata" value="{= (${Orders>Status} === '2' ) ? 'Red' : (${Orders>Status} === '1') ? 'Green' : (${Orders>Status} === '0') ? 'Amber' : ''}" writeToDom="true" />
</customData>
</Text>
Now the CSS.....
.sapMText[data-mydata="Red"] {
color:#cc1919;
}
.sapMText[data-mydata="Green"] {
color:#007833;
}
.sapMText[data-mydata="Amber"] {
color:#d14900;
}
It's quit understandable that the Text control does not have something like the type property. In the context of a Button it has a clear semantic (Accept, Reject, ...) while it would be hard to achieve the same for a Text control. However, the type of a Button is just used by the renderer to apply a specific style class. You can do something similar with a Text as well:
<Text class="customStyleClass" text="Hellow World!"/>
Now your custom style class is applied. Unfortunately expression binding does not work here. If you need to make the style dependent on your data you can write custom data to DOM and use it in your custom style class. However, this should be used sparsely.
You could use two text controls, each carrying one of your class options, then use conditional control on the visible attribute.
<Text class="customStyleClass_1" text="Hellow World!" visible="{= ${somevalue} > '0' ? false : true }"/>
<Text class="customStyleClass_2" text="Hellow World!" visible="{= ${somevalue} > '0' ? true : false }"/>
There are weaknesses in this approach, for example the overhead if there are many such text controls, and also if you have to refer to the text on code then you would need to determine the visible version etc.
I want to have the selection checkbox for ag-grid with the option below:
But didn't see the checkbox on the left. Have any idea what else needs to be settings to make the selection checkbox works.
self.appliancesInGroupGridOpts = {
angularCompileRows: true,
enableColResize : true,
rowData: null,
checkboxSelection: true,
enableSorting: true,
columnDefs: [
{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
checkboxSelection: true,
width: 200
} ,
{
valueGetter: 'data.updated',
headerName: $filter('translate')('APPLIANCE_GROUP.PUBLISH.MODIFICATION_TIME'),
suppressSizeToFit : true,
template: '<span class="appliance-updated">{{data.updated}}</span>',
checkboxSelection: true,
width: 200
}
] ,
http://www.ag-grid.com/angular-grid-selection/index.php
Checkbox selection can be used in two places:
row selection
group selection.
To include checkbox selection for a column, set the attribute
columnDefs: [{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
width: 200,
checkboxSelection: true
...
on the column definition.
You can set this attribute on as many columns as you like, however, it doesn't make sense to have it in more one column in a table.
To enable checkbox selection for groups, set the attribute:
groupColumnDef: {
headerName: "Athlete",
field: "athlete",
width: 200,
cellRenderer: {
renderer: "group",
checkbox: true
}
}
for the group renderer. See the grouping section for details on the group renderer.
Selecting groups can have the effect of selecting the group row, or selecting all the children in the group. This is done by setting the attribute:
groupSelectsChildren: {true || false}
When set to false, then selecting the group will select the group node.
When set to true, then selecting the group will either select or deselect all of the children.
The example below shows checkbox selection with groups. Selecting the group has the effect of selecting the children. Likewise selecting all the children automatically selects the group. In this scenario the group itself will never appear in the selectedRows list.
The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than two columns for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping.
In Addition: you could add this on the col definition
checkboxSelection:
Set to true to render a selection checkbox in the column.
What say einav is true however i think he forgot the very base :
set the property rowSelection:'single' or rowSelection:'multiple' on gridOptions if you want to have selection enabled :)
The attribute checkboxSelection is only for columns not grid options.
The following properties are relevant to selection:
rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection.
rowDeselection: Set to true or false. If true, then rows will be deselected if you hold down ctrl + click the row. Normal behaviour with the grid disallows deselection of nodes (ie once a node is selected, it remains selected until another row is selected in it's place).
suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection, and don't want to also select when the row is clicked.
From the same link given by Einav