I have a filter that has a SelectInput inside a ReferenceInput and it has only one option.
I really need that first option to be selected.
<ReferenceInput source="BranchID" reference="branches" allowEmpty alwaysOn perPage={1000}>
<SelectInput optionText={choice => `${choice.number +" "+ choice.address}`} />
</ReferenceInput>
You can achieve that using default values on your form: https://marmelab.com/admin-on-rest/CreateEdit.html#default-values
Related
I'm using on react-admin and try to add a filter options to a list.
My problem is how to add a filter input based on another filter input?
I want to filter the list by organization and by project bu project is associated to an organization so I want to enable select a project only after organization is selected and and only of projects associated tothe selected organization.
That is waht I try to do:
const ProjectInputs = () => {
const { values } = useFormState();
const translate = useTranslate();
const classes = useStyles();
return (
<ReferenceInput
label={translate("resources.projects.name", { smart_count: 1 })}
source="projectId"
reference="projects"
filter={{ organizationId: values.organizationId }}
disabled={!values.organizationId}
alwaysOn
variant="standard"
>
<SelectInput
optionText="name"
resettable
alwaysOn
/>
</ReferenceInput>
);
}
export const Paymentilter: FC<Omit<FilterProps, 'children'>> = props => {
const classes = useFilterStyles();
return (
<Filter {...props}>
<ReferenceInput
source="organizationId"
reference="organizations"
variant="standard"
>
<AutocompleteInput
optionText={(choice?: Organization) =>
choice?.id // the empty choice is { id: '' }
? `${choice.name}`
: ''
}
/>
</ReferenceInput>
<ProjectInputs />
</Filter>
);
};
It works but there are some problems:
I cant define the project input to be always on.
In the add filter button there is no name for this input only blank shrink space.
The position of the project input is unordered input is popping up.
after choosing this filter I cant close it.
Do you have an idea for me?
How to fix my problems?
Sholud I solve my issue in another way?
Thank you!
EDIT:
I did like #doctoragon way,
and that is ok. in this way the project input cant be choosen from the add filter button only when we choose an organization it apears and when we cancel it disaper.
That ok for me but the second input still looks different as you can see on the picture it is upper then al the others inputs, and the cancel button is overirded by the chosen option.
You might be able to solve this using a FormDataConsumer inside your Filter.
<Filter {...props}>
<ReferenceInput source="organizationId" ... />
<FormDataConsumer source="projects" alwaysOn>
{
({ formData, ...restOfTheProps }) => organizationId && <ProjectInputs />
}
</FormDataConsumer>
</Filter>
I am new to ViewMappingRepository. I need to hide one user property in ATG BCC user screen tab. how to hide the property? .
<property name="lastPurchasedCost" data-type="string" display-name="Last Purchased Cost" />
First need to create a new attribute value for hide a property in ViewMappingRepository.
<add-item item-descriptor="attributeValue" id="AmAvHideUsersGeneralProp">
<set-property name="value"><![CDATA[lastPurchasedCost]]></set-property>
</add-item>
My property is shown under the user general category. So print that category ItemViewMapping and update your created new attributeValue id set to excludedProperties value.
<add-item item-descriptor="itemViewMapping" id="AmIvmUsersGeneral">
<set-property name="attributeValues"><![CDATA[excludedProperties=AmAvHideUsersGeneralProp]]></set-property>
</add-item>
Note: If already set any of the attributeValue to excludedProperties you need to add only you property name to the existing attributeValue inside set-property value.
This is the code I am using present, tried in many ways like used placeholder tags but nothing worked out. Help me
<kendo-grid-column field="food" title="foods">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell
[showOperators]="false"
[column]="column"
[filter]="filter">
</kendo-grid-string-filter-cell>
I tried this approach working now
Just put this piece of code in your component file
public placeHolders(){
$(".k-textbox").eq(0).attr("placeholder", "column 1");
$(".k-textbox").eq(1).attr("placeholder", "column 2");
$(".k-textbox").eq(2).attr("placeholder", "column 3");
}
There is no solution to write default placeholder in kendo-UI > kendo-grid-string-filter-cell as per my understanding.
I have the same problem with you and I cannot find an easy way to do it. The only way i can think to achieve this is below:
1) Create a Reusable Custom Filter Component from Kendo -> https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
2) Then add a TextArea Input as your filter input and there's the floatingLabel html element in order to use it like placeholder.
#Component({
selector: 'my-app',
template: `
<kendo-textbox-container floatingLabel="First name">
<textarea kendoTextArea></textarea>
</kendo-textbox-container>
`
I cannot find a way to do this by using the Built-In Filter Templates that Kendo UI provides.
I'm not 100% sure of your question. I'm using Vue, but here is how I am setting placeholder text when there are no records by setting the noRecords attribute.
<kendo-grid ref="gridComponent"
...
:no-records="noRecords"
...
v-on:change="rowSelected"
:sort="sortFilter">
In Vue, noRecords is a reactive data field, defined as:
data () {
return {
noRecords: {
template: '<br /><br/> Please start typing a Policy Number, Insured Name, or Address to show results <br /><br /><br />'
}
}
I've an issue with ReferenceArrayInput that I try to use for a group membership representation.
Here the code related to a group editing UI
export const UserGroupEdit = (props) => (
<Edit title={<UserGroupTitle />} {...props}>
<SimpleForm>
<TextInput label="Common Name" source="commonName" />
<TextInput label="E-mail" source="email" type="email" />
<TextInput label="Shortname (UNIX purpose)" source="shortname" />
<ReferenceArrayInput label="Members" source="members" reference="users">
<SelectArrayInput optionText="fullName" />
</ReferenceArrayInput>
<DisabledInput label="Record UUID" source="id" />
<DisabledInput label="Record ID" source="numericID" />
</SimpleForm>
</Edit>
);
I've two issue.
First, if the related property in the represented object is empty, the UI does not display the input field. It show the title of the field, a whitespace with no input possible and the next one. When I pass the mouse over the whitespace, I get the same icon attached to the mouse as a DisabledInput, the forbidden sign.
Second, if there is already one value, I can add new one, I've the text input available and the autocompletion is working well. However, once I select one value to add, it immediately disappear. It does not stay in memory until the save or cancel action.
And if in the second case, I remove existing values, they get properly removed and once I remove everything I'm back to the first issue.
Is there something I'm doing wrong?
About your first issue, you can try to add a allowEmpty prop to your ReferenceArrayInput :
<ReferenceArrayInput label="Members" source="members" reference="users" allowEmpty>
It's a bug indeed. This issue has been fixed on master which will be released soon as version 1.4.0.
We have a need where 3 different menu items perform CRUD operations to the same resource ("assets"), but with just the category_id being different on all CRUD operations (until you press again a different menu item).
In order to do this, we introduced a query param, called kind, which is the only practical difference among these 3 links:
<MenuItemLink
to={{
pathname: '/assets',
search: stringify({page: 1, perPage: 25}),
}}
primaryText="Assets"
onClick={onMenuTap}
leftIcon={<AssetsIcon />}
/>
<MenuItemLink
to={{
pathname: '/assets',
search: stringify({
page: 1,
perPage: 25,
kind: 'printers'
}),
}}
primaryText="Printers"
onClick={onMenuTap}
leftIcon={<AssetsIcon />}
/>
<MenuItemLink
to={{
pathname: '/assets',
search: stringify({
page: 1,
perPage: 25,
kind: 'vehicles'
}),
}}
primaryText="Vehicles"
onClick={onMenuTap}
leftIcon={<AssetsIcon />}
/>
Through the following code, the List fetches records only for these assets:
// NOTE: 'parsedKind' is parsed grom query params with previous code, it gets one of these values: '' OR 'printers' OR 'vehicles'
<List
title={<TitleList location={props.location} />}
{...props}
filters={<AssetFilter location={props.location} key={parsedKind} />}
perPage={15}
filter={{cat_id: dbIds[parsedKind]}}
sort={{field: 'name', order: 'ASC'}}
actions={<OurCustomListActions parsedKind={parsedKind} {...props} />}
key={parsedKind}
>
In order for this to work we had to customize the "actions" with custom Buttons, so that the parsedKindis following through. For example, the CreateButton now needs a prop ourQuery:
<FlatButton
primary
label={label && translate(label)}
icon={<ContentAdd />}
containerElement={<Link to={`${basePath}/create?${ourQuery}`} />}
style={styles.flat}
/>
I have 3 questions here:
This was a tedious work (all buttons have been customized) and I wonder if there was another solution to cover this need.
Still, the "SaveButton" causes headaches, because it uses a handleSubmitWithRedirect function that comes from props and the parameter is just the name of the view ('list' for example). So how can I add the query param on the final URL there? I used an ugly setTimeout to do this after 2 seconds (window.location.hash = window.location.hash + '?' + this.props.ourQuery;) but obviously this is very wrong. The DeleteButtonis also problematic because it redirects to a subview.
Using the above approach I get NaN-NaN from 19 in the List pagination. Why? Can this also be solved somehow?
Thank you!
So I think your best bet would have been to simply create three resources: Assets, Vehicles and Printers.
Than in your restClient/dataProvider, create logic to route these three resources to the assets endpoint with the correct parameter. I simple middleware would suffice, something in the line off:
// MyAssetResourceMiddleware.js
export default restClient => (type, resource, params) => {
switch(resource){
case 'Assets':
case 'Vehicles':
case 'Printers':
return restClient(type,'assets',{...params,kind:resource});
default:
return restClient(type,resource,params);
}
}
And wrap your provider with it
<Admin dataProvider={MyAssetResourceMiddleware(dataProvider)} .../>