I have a React app that is using the Algoia InstantSearch library. This one https://community.algolia.com/react-instantsearch/
<InstantSearch
appId="KJH78673IUH"
apiKey="e55e048w7fh8wh8wrgh834c3ea51e3"
indexName="Events"
>
<Configure hitsPerPage={10} />
<SearchBox />
<h3>Latest Events</h3>
<Hits />
<Index indexName="Venues">
<h3>Latest Venues</h3>
<Hits />
</Index>
<Index indexName="Users">
<h3>Latest Users</h3>
<Hits />
</Index>
</InstantSearch>
This works fine and pulls the results as I type. However. On each of the Event, Venue and User records I have an attribute site_id. I am struggle to figure out how I can set the site_id to be like a default scope on the search query. Along the lines of how default_scope works in Rails. I am sure this is possible but failing to figure it out.
Any help would be appreciated!
I figured out how to do this using VirtualWidgets.
https://community.algolia.com/react-instantsearch/connectors/connectMenu.html
The scope an index to a particular attribute I used the following method:
import { connectMenu } from 'react-instantsearch/connectors';
const VirtualMenu = connectMenu(() => null);
// RESET OF COMPONENT CODE
<InstantSearch
appId="KJH78673IUH"
apiKey="e55e048w7fh8wh8wrgh834c3ea51e3"
indexName="Events"
/>
<Configure hitsPerPage={10} />
<VirtualMenu attribute="site_id" defaultRefinement="1" />
<SearchBox />
<h3>Latest Events</h3>
<Hits />
<Index indexName="Venues">
<h3>Latest Venues</h3>
<Hits />
</Index>
<Index indexName="Users">
<h3>Latest Users</h3>
<Hits />
</Index>
</InstantSearch>
You can also add the VirtualWidget to the Index block itself too.
Related
So basically, how do I get the new data from the DevExtreme Chart after making an update? I just want to get the the task data so that I can then upload it to my database. The
DevExtreme documentation isn't helping at all in relation to listening to changes made and getting the new data when the change has been made. I tried using onOptionChanged but the only outputs I can get ar HTML elements.
import React from 'react'
import { dependencies, tasks } from '#/data/data'
import Gantt, { Tasks, Dependencies, Toolbar, Item, Column, Validation, Editing } from 'devextreme-react/gantt'
const GanttChart = () => {
return (
<div>
<h5 className="font-medium leading-tight text-xl mt-0 mb-2 text-blue-600">Set Timeline Chart</h5>
<p className="italic">Edit by clicking either the chart or the the table values</p>
<Gantt
taskListWidth={500}
scaleType="quarters"
onOptionChanged={e => console.log(e)}
height={700}>
<Tasks dataSource={tasks} />
<Dependencies dataSource={dependencies} />
<Toolbar>
<Item name="undo" />
<Item name="redo" />
<Item name="separator" />
<Item name="collapseAll" />
<Item name="expandAll" />
<Item name="separator" />
<Item name="addTask" />
<Item name="deleteTask" />
<Item name="separator" />
<Item name="zoomIn" />
<Item name="zoomOut" />
</Toolbar>
<Column dataField="title" caption="Subject" width={300} />
<Column dataField="start" caption="Start Date" />
<Column dataField="end" caption="End Date" />
<Validation autoUpdateParentTasks />
<Editing enabled />
</Gantt>
</div>
)
}
export default GanttChart
I'm create a custom toolbar for my Data Grid with the following structure :
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
All the components work normally but the GridToolbarExport is now telling this :
error from typescript
i updated my version to this one :
"#material-ui/core": "^5.0.0-alpha.37",
"#material-ui/data-grid": "^4.0.0-alpha.32",
am i missing something ?
thanks!
I upgraded to Material-UI v5 and ran into this issue as well. I managed to get it working by passing in "props: any". I'm still not sure the correct type Module Augmentation to get this going for Typescript. Additional help would be great.
function CustomToolbar(props: any) {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton {...props} />
<GridToolbarDensitySelector />
<GridToolbarExport {...props} />
</GridToolbarContainer>
);
}
I am using react-admin v2.9.6 with firebase.
But it is not showing the search bar even if I added it in my code.
Seriously there is a bug which I can see in my console logs.
Here is my code and anyone who can help me contact me if you like.
const SearchFilter = props => (
<Filter {...props}>
<TextField label="Search" source="name" alwaysOn />
</Filter>
)
export const SearchList = props => (
<List {...props} filters={<SearchFilter />}>
<Datagrid>
<TextField source="name" />
<TextField source="avgRating" />
<TextField source="numReviews" />
<EditButton label="" />
<DeleteButton label="" redirect={false} />
</Datagrid>
</List>
)
I love react.js but react-admin is the first time.
Thanks. :)
In your SearchFilter component, try using <TextInput /> instead of <TextField />
Like this:
const SearchFilter = props => (
<Filter {...props}>
<TextInput label="Search" source="name" alwaysOn />
</Filter>
)
In case this issue/problem is still active for you. Doctor Agon is right, use TextInput instead of TextField as a Field only can read already defined value which comes from TextInput.
I am having the following Kendo-UI PanelBar:
<PanelBar expandMode="multiple">
<PanelBarItem title={'Home'} />
<PanelBarItem title={'something'} />
<PanelBarItem title={'something1'} />
<PanelBarItem title={'something2'} />
</PanelBar>
But as soon as I add the Link react-router-dom component my PanelBarItem lost it design:
<PanelBar expandMode="multiple">
<Link to="/home"><PanelBarItem title={'Home'} /></Link>
<PanelBarItem title={'something'} />
<PanelBarItem title={'something1'} />
<PanelBarItem title={'something2'} />
</PanelBar>
The code is working but I want to maintain the KendoUI desing while my code keeps working.
I have found the solution:
Basically you need to create function and call it by the same PanelBar. So inside the class you create the following function:
onSelect = (event) => {
this.props.history.push(event.target.props.route);
}
and then asign it to the PanelBar and give it a route to each PanelBarItem:
<PanelBar expandMode="multiple" onSelect= {this.onSelect}>
<PanelBarItem title={'Home'} route='/home'/>
<PanelBarItem title={'something' route='/something} />
<PanelBarItem title={'something1' route='/something1} />
<PanelBarItem title={'something2' route='/something2} />
</PanelBar>
Nutshell:
<layout direction="horizontal"> <!--ParentX -->
<layout>ChildA</layout>
<layout>ChildB</layout>
<layout direction="vertical"> <!--ParentY -->
<layout>ChildC</layout>
<layout>ChildD</layout>
</layout>
</layout>
How can I know ParentY's direction from ChildC link-function?
Plunker