I need to add data-test attribute to column header for automated testing of different operations, such as sorting, filtering etc., so that scripts could find where to click.
How it can be done? I would like to keep all the functionality of default headers, just add the attribute.
Thanks!
You can use the renderHeader and pass the attributes you want like below:
columns={[
{
field: "name",
renderHeader: (params) => (
<span data-testid="header-test-id"> // Here pass your data-testid
{"Header with attr "}
</span>
)
}
]}
Related
I am working with the ag-grid rowDrag capabilities and would like to enable and disable rowDrag based on the data in each row. It looks like rowDrag can contains a condition, but its unclear how to access the fields.
<AgGridColumn field="myOffer" rowDrag={fieldMyOffer === 'test' ? rowDrag : undefined} />
It is possible to dynamically control which rows are draggable by providing a callback function as shown below:
const athleteRowDrag = params => params.data.athlete === "Michael Phelps";
<AgGridReact>
<AgGridColumn field="athlete" rowDrag={athleteRowDrag} />
</AgGridReact>
Documentation on Row Dragging
I would like to add to Shuheb's answer, since I ran into this:
If the cell you are checking is BLANK
rowDrag: params => params.data.type === "",
will not work. You have to do:
rowDrag: params => params.data.type.length > 1,
Ag-grid seems to insert a space in there somewhere so checking for an empty string or checking that length > 0 doesn't work. I spent several hours trying to get this to work.
Might file a git issue on this one, as my data clearly shows it's an empty string.
I have a Material-UI <Autocomplete /> component I am using where you can type in someone's name and it will provide a list of people to select from. This is a pretty standard use case, however I need the selected item in the form to be different than the label.
Currently if you pick the entry labelled "John Smith", the text field will be filled with "John Smith". Instead, I want to fill the text field with that user's ID.
The data for autocomplete is an array of objects like this:
{ "name": "John Smith", "id": 123456789 }
How can I make the autocomplete component put the user ID in the text field instead of the user label?
You can customize renderOption props in Material-UI Autocomplete
Render the option, use getOptionLabel by default.
Signature: function(option: T, state: object) => ReactNode
option: The option to render.
state: The state of the component.
As for the code
getOptionLabel={option => option.name}
renderOption={(option) => <span>{option.name}</span>}
Refer to the demo in an official document
If you just want to display name in Textfield, You could try this
getOptionLabel={option => option.id}
renderOption={option => <>{option.name}</>}
If you want to display name in TextField and OptionLabel but want to get id as value of TextField in order to store id after form submission.
You could try this
getOptionLabel={(option) => option.name}
renderOption={(option) => (
<>
{option.name} ({option.surname})
</>
)}
onChange={(event, newValue) => {
setValue(newValue);
setCustomValue(newValue.id);
}}
using onChange event you could select any field of the option you want to get as value.In this example I stored id of the option in the state.
Complete working example is here https://codesandbox.io/s/material-demo-forked-wlzr8?file=/demo.js:804-1084
I populated a select input field with a collection in aldeed:autoform.
Field Declaration
{{> afFormGroup name="patientID" type="select" options=patientIDs}}
Helper
patientIDs:function () {
return Meteor.users.find({}).map(function (user) {
return {label: user.profile.firstName, value: user._id};
});
}
But it turned out to be the drop down too large to select an option. Therefore I need to implement a functionality similar to HTML datalist in the autoform. How to implement this in meteor aldeed:autoform?
There is a select2 add-on for autoform, which might help get you what you want. See here.
I Have this code
{{Form::select('area_id', Area::lists('area_description','area_id') ,'',array('class' => 'form-control'))}
How do I get the current value of Select box from database. BTW I'm using Laravel with Blade Template.
You can use use something like this:
{{
Form::select(
'area_id',
Area::lists('area_description','area_id'),
old('area_id'), // or Input::old('area_id')
['class' => 'form-control']
)
}}
In this case, instead of using Area::lists('area_description','area_id') inyour template use pass it from your controller, for example (in your controller):
$area_ids = Area::lists('area_description','area_id');
return view('view_name')->with('area_ids', $area_ids);
Then use the following in your template:
{{ Form::select('area_id', $area_ids, old('area_id'), ['class' => 'form-control']) }}
For Laravel-5.1.x
The lists method now returns a Collection instance instead of a plain
array for Eloquent queries. If you would like to convert the
Collection into a plain array, use the all method:
$area_ids = Area::lists('area_description','area_id')->all();
Check the upgrade guide for details.
I Have already solved my own problem wew.
with this code:
{{Form::select('area_id', $area_ids , $person->area_id ,array('class' => 'form-control'))}}
I forgot that it should be the id or the option value not the option content. The option that I mean is the <option> tag.
I'm writing this question cause I have difficulties setting up default values for a _MultiCheckbox element of a Zend Framework 1.9.3.
I create Zend_Form_Element_MultiCheckbox with multiple options like this:
$multiCheckbox = new Zend_Form_Element_MultiCheckbox( 'elId',
array ( 'disableLoadDefaultDecorators' =>true ) );
$multiCheckbox ->setName( 'elId' )
->setLabel('elId')
->setRequired( false )
->setAttrib('class', 'inputtext')
->setDecorators( array( 'ViewHelper' ) )
->setMultiOptions( $options );
where the $options array is an associative array 'key' => 'value'. The field is displayed just fine and I can get all the checked values for that element.
When returning to that page I need to restore from the DB the whole list of options again and mark the checked ones. I have tried to do it like that:
$multiCheckbox ->setValue( $defaults );
where $default is array, containing elements of type 'checked_option_field_id' => true(eg. array( '1222' => true, '1443' => true ) ). That action checks ALL the checkboxes and not only the once I need and I have passed to the setValue() method.
I have tried to pass just an array containing elements of type 'checked_option_field_id', (eg. array( '1222', '1443' ) )but that also doesn't work - NONE of the checkboxes is checked.
I have used the form setDefaults() method with those two kinds of arrays, but the results are same - as this method uses again setValue() for each element.
MultiCheckbox element is rendered like that ( result when try to set checked value for only one option ):
<label for="elId-1222"><input type="checkbox" name="elId[]" id="elId-1222" value="1222" checked="checked" class="inputtext">BoRoom </label><br />
<label for="elId-1443"><input type="checkbox" name="elId[]" id="elId-1443" value="1443" checked="checked" class="inputtext">BoRoom Eng2 </label><br/>
That element populates the checked option values in the elId[] array. That is the element name.
setDefaults() form method gets all form elements by name and commit their default values by calling setDefault() form method and after that setValue() element method. So my multicheckbox element has name elId ( it does not get all the element options one by one ) and set default values for all options instead of just the given in the array.
That is how I see it and I can't find solution how to set default values only for some of the options of a multicheckbox element.
Chris is correct that setValue() expects an array of values to be 'checked' (not an array of bool values keyed by your option IDs).
If you are looking for the logic behind the form generation, don't look at the Zend_Form_Element object (or the many extended elements from it), look at the Zend_View_Helper objects. Specifically the Zend_View_Helper_FormRadio object.
When generating the HTML the options array is looped, then the value is checked against the value array - the array passed to setValue(), using in_array().
From Zend_View_Helper_FormRadio line: 150
// is it checked?
$checked = '';
if (in_array($opt_value, $value)) {
$checked = ' checked="checked"';
}
Not sure what that's not working for you, but if you're passing:
$element->setMultiOptions(array('1111' => 'Some Label',
'2222' 'Some Other Label',
'3333', 'Not Selected Label'));
$element->setValue(array('1111','2222');
It should work. Maybe if you could include some code it would be easier to see what's going on?
The setValue() expects a array with those values that need to be checked, in this case for example you need to pass a array with values 1222, 1443 for them to be marked as checked.
You need to serialize the checkbox value before insert in database. To show the database value selected again you have to unserialize the data to show.
The details you can read from following link
http://abser-web-tips.blogspot.com/2010/09/zend-framework-multiple-check-box.html
Thanks