How can I make a modal warning user to save changes (in the Grid) before they leave site? Here is my example code (just an example!)
return (
<Grid container direction="column" alignItems="center">
<Grid item>
<TextField
fullWidth
variant="outlined"
label="First Name"
size="small"
value={fname}
onChange={e => handleChange(e.target.value, 'fname')}
/>
</Grid>
<Grid item>
<TextField
fullWidth
variant="outlined"
label="Last Name"
size="small"
value={lname}
onChange={e => handleChange(e.target.value, 'lname')}
/>
</Grid>
);
Related
I want to create a visual layout according to this picture:
Code:
<>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Grid className={classes1.color}
container
direction="column"
justifyContent="flex-start"
alignItems="center"
>
<Grid item>
<Box m={2}>
item link 1
</Box>
</Grid>
<Grid item>
<Box m={2}>
item link 2
</Box>
</Grid>
<Grid item>
<Box m={2}>
item link 3
</Box>
</Grid>
<Grid item>
<Box m={2}>
item link 4
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid className={classes2.color}
container
direction="column"
justifyContent="space-around"
alignItems="center"
>
<Grid item>
<Box m={10}>
item 11
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 11
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 13
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 14
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 15
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 16
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid className={classes3.color}
container
direction="column"
justifyContent="space-around"
alignItems="center"
>
<Grid item>
<Box m={15}>
item area 1
</Box>
</Grid>
<Grid item>
<Box m={15}>
item area 2
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</>
Full code:
https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx
The issues that I can't solve are how I can add vertical scrollbar for the second column(item 1-6).
I also want to autosize item 'area 1' and 'item area 2' to fit the rest of the horizontal area and add vertical scrollbar.
for using vertical scrollbar in second column you can separate the parent <Grid container> to three Grid and then use style={{ height: "100%", overflow: "auto" }} inside middle <Grid container>
base on material-ui documentation at "xl" and "xs" props, you can use xs={12} in <Grid item xs={12}> to fit the rest of the horizontal area
check this codesandbox that look like your code
My primary objective is an edit form with two columns. I understand I can do this with a custom form, but I'm wondering if there's an easier way to do it using the existing SimpleForm or (better yet) TabbedForm.
I'm able to get the data to display in two columns using Grid or Box, but it's all crammed into a small column on the left side, instead of using the full width. I've tried playing with fullWidth, changing the component, etc. but I can't get it to work. Any help would be very much appreciated!
Updating with current code:
<SimpleForm >
<Grid container spacing={1}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Old</Typography>
<TextField source="id" />
<TextInput source="foo" fullWidth />
<TextInput source="bar" fullWidth />
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>New</Typography>
<TextField source="id" fullWidth />
<TextInput source="newFoo" fullWidth />
<TextInput source="newBar" fullWidth />
</Grid>
</Grid>
</SimpleForm>
Try this add custom style to grid to take full width
<SimpleForm >
<Grid container spacing={1} style={{ width: "100%" }}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Old</Typography>
<TextField source="id" />
<TextInput source="foo" fullWidth />
<TextInput source="bar" fullWidth />
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>New</Typography>
<TextField source="id" fullWidth />
<TextInput source="newFoo" fullWidth />
<TextInput source="newBar" fullWidth />
</Grid>
</Grid>
</SimpleForm>
I'm trying to produce the following layout using the Material-UI grid... and have only managed so far to expose just how little I understand the whole thing.
What I'm looking to create is this:
Which I think equates to this design:
So my thinking was this structure...
<Grid container xs={12} spacing={3}>
<Grid item xs={12} >
<Paper className={classes.paper}>
Top Bar
</Paper>
</Grid>
<Grid container xs={12} spacing={3}>
<Grid container spacing={3}>
<Paper className={classes.paper}>
<Grid item xs={4}>
Main Field
</Grid>
<Grid container xs={8}>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 1
</Grid>
<Grid item xs={4}>
field 2 row 1
</Grid>
</Grid>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 2
</Grid>
<Grid item xs={4}>
field 2 row 2
</Grid>
</Grid>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 3
</Grid>
<Grid item xs={4}>
field 2 row 3
</Grid>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
... which was nothing like it. I can't get it to show at full width to start with.
I've tried adding width={1} props to various elements to no avail. Can some one point me in the right direction, or better yet is there some dev tool I'm missing for composing 'layouts' with Material-UI grid, or something similar?
I managed to create your layout by starting to use the Grid references on the complex grid section of the documentation.
By combining the row and column directions as props on the innermost Grids and putting inside the child Grids outer Paper components as placeholders, we could achieve what you are looking for.
The code would look something like this:
export default function ComplexGrid() {
return (
<div>
<Paper>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper>xs=12</Paper>
</Grid>
<Grid item xs={12} container>
<Grid item xs container direction="column" spacing={3}>
<Grid item xs={4}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={8}>
<Paper>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
);
}
Here is a codesandbox with a working example of the code along with some not so good styles for the paper, but to serve only as a proof of concept. Then of course you can change the margins, paddings, sizes and anything else to your needs.
I have data source which, getting bind to grid in WPF. Data source is
array of students, with following fields
Name, Grade
Grid have 3 columns
Name, Grade, Settings
Settings column contains simple button for settings as below
<DataGridTemplateColumn Header="Settings" Width="75" CanUserResize="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Name="cSettings" Click="cSettings_Click" Style="{DynamicResource EditSettingsButton}" Width="50" >
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Now, If grade is equal to one then only,Settings Button should get displayed.
Can I write condition in XAML itself ? i.e. Visibility of button should be on some condition ?
Tried below approach but not working
<DataTemplate>
<Button Name="cSettings" Click="cSettings_Click" Style="{DynamicResource EditSettingsButton}" Width="50" >
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Grade}" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Grade}" Value="2">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button>
</DataTemplate>
Thanks
You could try using a converter instead. See this link
I've come across an issue with the Panorama Control on Windows Phone 8.
Created a project to test the issue using simple code based on the WP Panorama Project template.
So I'm binding to an Observable Collection using INotifyPropertyChanged interface (MVVM).
<phone:PhoneApplicationPage
<! ... >
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama ItemsSource="{Binding PageTitles}"
Title="Panorama Test">
<phone:Panorama.HeaderTemplate>
<DataTemplate>
<Grid Width="410" Margin="-2,0,0,0">
<TextBlock d:DataContext="{Binding}" Text="{Binding Title}" HorizontalAlignment="Left" Style="{StaticResource PanoramaItemHeaderTextStyle}" />
</Grid>
</DataTemplate>
</phone:Panorama.HeaderTemplate>
<phone:Panorama.Background>
<ImageBrush ImageSource="/Assets\PanoramaBackground.png"/>
</phone:Panorama.Background>
<phone:PanoramaItem Name="Screen1">
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
<phone:PanoramaItem Name="Screen2">
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
<phone:PanoramaItem Name="Screen3">
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
<phone:PanoramaItem Name="Screen4" >
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
When in the Visual Studio 2013 Design View, in place of the page content I see I single line that reads:
_.di28.Induction.Viewmodels.ItemViewModel
and when run in the Emulator, it reads:
Induction.Viewmodels.ItemViewModel
I've restructured the Binding in all the ways I can think of and find, but the problem remains.
Is this a bug with the Panorama Control under Windows Phone 8?
Not sure if it will resolve your issue but you're misunderstanding something :
The ItemsSource property is not only there for the titles but for the whole PanoramaItems collection.
You should not redefine every PanoramaItem after that but use a datatemplate instead : just like for the HeaderTemplate :
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama ItemsSource="{Binding PageTitles}"
Title="Panorama Test">
<phone:Panorama.HeaderTemplate>
<DataTemplate>
<Grid Width="410" Margin="-2,0,0,0">
<TextBlock d:DataContext="{Binding}" Text="{Binding Title}" HorizontalAlignment="Left" Style="{StaticResource PanoramaItemHeaderTextStyle}" />
</Grid>
</DataTemplate>
</phone:Panorama.HeaderTemplate>
<phone:Panorama.Background>
<ImageBrush ImageSource="/Assets\PanoramaBackground.png"/>
</phone:Panorama.Background>
<phone:Panorama.ItemTemplate>
<DataTemplate>
<phone:PanoramaItem>
<Grid Margin="0,-6,0,12">
<Border BorderThickness="1" Width="420" Height="500" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
</Grid>
</phone:PanoramaItem>
</DataTemplate>
</phone:Panorama.ItemTemplate>
</phone:Panorama>
I cannot test right now but at least you get the idea. Hope this helps !