I've got a SelectInput with two choices:
<SelectInput source="existing_user" choices={[
{ id: 'existing', name: 'Existing'},
{ id: 'new', name: 'New User' },
]} validate={required} />
I also have a DependInput component that renders other fields, depending on the value of existing_user. I would like the first option ('existing') to be selected by default. However the SelectInput field is always empty when the form loads, so no other fields are visible:
I tried setting the underlying SelectField's value property to 'existing' through options, but then I'm unable to edit the SelectInput (clicking the second option does nothing).
I'm probably missing something simple since this should be elementary, but I couldn't find anything helpful in the documentation about it.
Using defaultValue either on the SelectInput or on the form containing it should do the trick:
https://marmelab.com/admin-on-rest/Inputs.html
https://marmelab.com/admin-on-rest/CreateEdit.html#default-values
Related
I have a 7 field grid set up in jsgrid. For one of the fields I need to create an insert template to control entry. Unfortunately, as soon as I add the code, the field no longer appears on the form. None of the fields before and after are affected.
Even if I just create the template like this:
insertTemplate: function() {
return;
}
The field disappears.
Here are the field parameters entered just before the insertTemplate:
{ title: "Kab Cost",
name: "kab_cost",
type: "text",
align: "right",
editing: true,
readOnly: false,
css: "grid_small",
validate: "required",
width: 5,
I get no javascript errors in the console. If I remove the insert template, the field appears.
I have other fields that are using insert templates with no issue.
Any ideas?
Arrghh,
To display the field, the insertTemplate needs a return of the contents (even if blank) I had all of the returns within if statements that could not resolve on initialization of the grid.
Moved the return outside of the if statement and everything went back to normal.
Slapping forehead with hand.
I have a dropdown field and text field. Based on the value selected in the dropdown, the text field gets auto-populated with a value. But, this auto-population in the text field happens only if I tab out from the dropdown field.
cy.get('app-screen').find('#MLM-Code').select('I2301').should('have.value', 'I2301');
cy.get('app-screen').find('#MLM-Name').should('have.text', 'NBOOKS');
Now, the second statement gets failed as I am not sure how to tab out of the dropdown field.
Is there any option available in Cypress for tabbing out of a field?
I am guessing cypress-plugin-tab
cy.get('app-screen').find('#MLM-Code').select('I2301')
.should('have.value', 'I2301')
.focus()
.tab() // from plugin library
or if you find the plugin a bit flaky (see discussion),
Cypress.Commands.add('typeTab', (shiftKey, ctrlKey) => {
cy.focused().trigger('keydown', {
keyCode: 9,
which: 9,
shiftKey: shiftKey,
ctrlKey: ctrlKey
})
})
cy.get('app-screen').find('#MLM-Code').select('I2301')
.focus()
.typeTab()
or cypress-real-events has a lot of success
cy.get('app-screen').find('#MLM-Code').select('I2301')
.realPress("Tab")
In a NativeScript Core app, I have a dynamically rendered list of users, and foreach user there are two Switch elements; one for involvement and one for assignment.
Firstly, how can I bind an "checkedChange" event to all the Switch elements in that list at once, after the list has been loaded or reloaded (and not to any other Switch elements on that page)?
Secondly, the assignment switch should only be enabled if the involvement switch is checked, or disabled and unchecked elsehow. How can this be achieved in a good way?
Thirdly, the event triggers a function that is suppose to save the change. How should I retrieve info about type (involve or assign) and user id?
Example screenshot
To clarify:
I know about the method of giving the switch element an ID and bind it statically, like:
const mySwitch = page.getViewById("mySwitch");
mySwitch.on("checkedChange", (args) => {
// Do something
});
and
<Switch id="mySwitch" .../>
But in this case, I'm loading a list of users from an API, using a ViewModel and ObservableArray. Each record contains two Switch elements, and giving them unique ID's and binding each one seems like a bad solution.
If it was a web app, I would have added extra attributes to the Switch element, like:
<Switch data-type="user-involvement" data-uid="10" .../>
and the collectively bind changes to all elements where data-type is "user-involvement".
Is there any way to do something similar in {N} Core?
If you are using {N} Core flavour then you should be able to add
checkedChange listener upon loaded event of Switch.
Within the checkedChange event of Switch you could update the checked property of other Switch by updating the Observable attribute it's in bound with.
I have created a sample playground for you here. On Initial load, in youe XML, you can have 2 switches and can control the second switch based on first switch's state.
<Switch checked="{{involved}}" loaded="switchLoaded" />
<Switch checked="{{assigned}}" isEnabled="{{involved}}" />
while in your js file.
countries: [
{ name: "User 1", involved: true, assigned: false },
{ name: "User 2", involved: true, assigned: false },
{ name: "User 3", involved: false, assigned: false },
{ name: "User 4", involved: true, assigned: false },
{ name: "User 5", involved: true, assigned: false },
],
Also you can bind listeners on loaded method.
function switchLoaded(args) {
console.log(args.object.bindingContext);
args.object.on("checkedChange", (args) => {
console.log("checkedChange ", args.object.checked);
});
}
In args.object.bindingContext , you have the access of data that you can control.
Is it possible to use a dropdown column in a HandsOnTable without the editable textbox?
I know you can set the type to dropdown and it will validate/highlight red when you enter an invalid value, but is there a way to completely disable text entry for dropdown columns? It seems just using the readOnly property on the column blocks the dropdown altogether.
As you said, the readOnly option will disable you dropdown. So I believe the closest solution you can use is the allowIndvalid = false (true by default) :
allowInvalid: true (optional) - allows manual input of value that does not exist in the source. In this case, the field background highlight becomes red and the selection advances to the next cell
allowInvalid: false - does not allow manual input of value that does not exist in the source. In this case, the ENTER key is ignored and the editor field remains opened.
Documentation Link
You can use this JSFiddle to quickly check this option
I have the same issue and was able to resolve it with such steps. Maybe this could help:
1 when creating columns add a special className to the necessary column type:
{
data: 'priceUnitsName',
type: 'dropdown',
invalidCellClassName: 'colored',
source: Object.keys(unitNames),
width: 100,
className: 'disable-edit',
}
2 Subscribe to events to handle cancel editing:
private targetCell: HTMLTableCellElement;
public settings: GridSettings = {
// your settings
afterOnCellMouseDown: (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement) => {
this.targetCell = TD;
},
afterBeginEditing: (row: number, column: number) => {
if (this.targetCell.classList.contains('disable-edit')) { // this handle only necessary columns with special class
setTimeout(() => {
const inputCollection: HTMLCollection = document.getElementsByClassName('handsontableInput');
Array.from(inputCollection).forEach((input: HTMLTextAreaElement) => {
input.blur(); // this calls blur on element manually
});
});
}
},
Maybe this is not the best decision, but by default, handsontable can't make dropdown elements readonly with leaving open-close dropdown functional and I can't find any workable suggestion with this.
Checked on 'dropdown' and 'date' types, and it works.
Validating a form w/ jQuery. For simplicity, user selects from three options: "A_or_B", "C", or "D" from a drop down list. If A_or_B is chosen then the "Name" field is required. If C or D, then it isn't. This was done like so:
$("#form").validate({
rules: {
Name: {required: "#Letter[value=A_or_B]"}
}
});
Now I am required to make "A_or_B" into two seperate entries, where either choice still makes the "Name" field required. How would I change the validation line for the Name field now that A and B are seperate entries on the drop down list?
Not sure if this will work but it might be worth a try.
$("#form").validate({
rules: {
Name: {required: "#Letter[value='A'], #Letter[value='B']"}
}
});