Demos: Minor Improvements to Sample Pages (#5867)

* Removing duplicate EmployeeData.Genders column * Minor improvements to Sample pages * Formating * Formating --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Nov 22, 2024 · 090479a · 090479a
1 parent dd6df15
commit 090479a
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 5 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/GroupSinglePage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/GroupSinglePage.razor
@@ -19,7 +19,8 @@
                           Responsive
                           ShowPager
                           ShowPageSizes
-                          Groupable>
+                          Groupable
+                          GroupBy="x => x.Gender">
                     <DataGridColumns>
                         <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" />
                         <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name">

diff --git a/Demos/Blazorise.Demo/Pages/Tests/ListViewPage.razor b/Demos/Blazorise.Demo/Pages/Tests/ListViewPage.razor
@@ -1,4 +1,5 @@
 @page "/tests/listview"
+@using System.Linq
 
 <Row>
     <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
@@ -20,18 +21,71 @@
             </CardBody>
         </Card>
     </Column>
+    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>With custom item content</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <ListView TItem="Country"
+                          Data="Countries"
+                          TextField="(item) => item.Name"
+                          ValueField="(item) => item.Iso"
+                          Mode="ListGroupMode.Static"
+                          MaxHeight="300px">
+                    <ItemTemplate>
+                        <Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
+                            <Heading Margin="Margin.Is2.FromBottom">@context.Item.Iso</Heading>
+                            <Small>@context.Item.Capital</Small>
+                        </Div>
+                        <Paragraph Margin="Margin.Is2.FromBottom">@context.Text</Paragraph>
+                    </ItemTemplate>
+                </ListView>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+<Row>
+    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Styling Individual Items</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <ListView TItem="Country"
+                          Data="Countries"
+                          TextField="(item) => item.Name"
+                          ValueField="(item) => item.Iso"
+                          Mode="ListGroupMode.Selectable"
+                          MaxHeight="300px"
+                          ItemTextColor="((item) => Countries.IndexOf( item ) % 2 == 0 ? TextColor.Danger : TextColor.Success)"
+                          ItemBackground="(item) => Background.Default"
+                          ItemPadding="(item) => Padding.Is4"
+                          ItemClass="@((item) => $"country-{item.Iso}")"
+                          ItemStyle="@((item) => "border: 1px solid red")"
+                          @bind-SelectedItem="@selectedListViewItem">
+                </ListView>
+
+                <Field Horizontal>
+                    <FieldBody ColumnSize="ColumnSize.Is12">
+                        Selected Item: @selectedListViewItem?.Name
+                    </FieldBody>
+                </Field>
+            </CardBody>
+        </Card>
+    </Column>
 </Row>
 
 @code {
     [Inject]
     public CountryData CountryData { get; set; }
-    public IEnumerable<Country> Countries;
+    public List<Country> Countries;
 
     private Country selectedListViewItem { get; set; }
 
     protected override async Task OnInitializedAsync()
     {
-        Countries = await CountryData.GetDataAsync();
+        Countries = (await CountryData.GetDataAsync()).ToList();
         await base.OnInitializedAsync();
     }
 }
diff --git a/Demos/Blazorise.Demo/Pages/Tests/SelectListPage.razor b/Demos/Blazorise.Demo/Pages/Tests/SelectListPage.razor
@@ -28,6 +28,33 @@
             </CardBody>
         </Card>
     </Column>
+    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>With Multiple Selections</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Field Horizontal JustifyContent="JustifyContent.End">
+                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
+                    <FieldBody ColumnSize="ColumnSize.Is10">
+                        <SelectList TItem="Country"
+                                    TValue="string"
+                                    Data="@Countries"
+                                    TextField="@(( item ) => item.Name)"
+                                    ValueField="@((item) => item.Iso)"
+                                    Multiple
+                                    @bind-SelectedValues="@selectedListValues"
+                                    DefaultItemText="Choose your country(s)" />
+                    </FieldBody>
+                </Field>
+                <Field Horizontal JustifyContent="JustifyContent.End">
+                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
+                        Selected value(s):  @(selectedListValues != null ? string.Join( ',', selectedListValues ) : "")
+                    </FieldBody>
+                </Field>
+            </CardBody>
+        </Card>
+    </Column>
 </Row>
 
 @code {
@@ -36,12 +63,11 @@
     public IEnumerable<Country> Countries;
 
     private string selectedListValue { get; set; }
+    IReadOnlyList<string> selectedListValues { get; set; }
 
     protected override async Task OnInitializedAsync()
     {
         Countries = await CountryData.GetDataAsync();
         await base.OnInitializedAsync();
     }
-
-
 }