demos updated

radzenhq · Oct 30, 2019 · 258f1b5 · 258f1b5
1 parent 3da0fe3
commit 258f1b5
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 28 deletions.
diff --git a/LatestBlazor.csproj b/LatestBlazor.csproj
@@ -6,7 +6,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Radzen.Blazor" Version="1.1.18" />
+    <PackageReference Include="Radzen.Blazor" Version="1.1.21" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.0.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.0.0" />
     <PackageReference Include="DocumentFormat.OpenXml" Version="2.9.0" />

diff --git a/Pages/AutocompletePage.razor b/Pages/AutocompletePage.razor
@@ -13,7 +13,7 @@
     <div class="row">
         <div class="col-md-6">
             <h3>AutoComplete</h3>
-            <RadzenAutoComplete Data="@customers" TextProperty="CompanyName" Style="margin-bottom: 20px" Change="@(args => Change(args, "AutoComplete"))" />
+            <RadzenAutoComplete FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@customers" TextProperty="CompanyName" Style="margin-bottom: 20px" Change="@(args => Change(args, "AutoComplete"))" />
             <br />
             <h3>AutoComplete with placeholder</h3>
             <RadzenAutoComplete Placeholder="Select..." Data="@customers" TextProperty="CompanyName" Change="@(args => Change(args, "AutoComplete with placeholder"))" Style="margin-bottom: 20px" />

diff --git a/Pages/DataGridLoadDataPage.razor b/Pages/DataGridLoadDataPage.razor
@@ -0,0 +1,57 @@
+@page "/datagrid-loaddata"
+@using NorthwindBlazor.Data
+@using NorthwindBlazor.Models.Northwind
+
+@inject NorthwindContext dbContext
+
+<h1 style="display:inline">DataGrid</h1><a style="margin-left: 10px" href="https://github.com/akorchev/blazor.radzen.com/blob/master/Pages/DataGridLoadDataPage.razor" target="_blank">[source code]</a><a style="margin-left: 10px" href="https://www.radzen.com/documentation/blazor/datagrid/" target="_blank">[documentation]</a>
+
+<p>This page demonstrates <b>DataGrid</b> component bound using LoadData event. This technique can be used to populate data from external source like service.</p>
+
+<RadzenGrid Count="@count" Data="@employees" LoadData="@LoadData" AllowPaging="true" PageSize="4" TItem="Employee" ColumnWidth="200px">
+    <Columns>
+        <RadzenGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
+        <RadzenGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
+            <Template Context="data">
+                <RadzenImage Path="@data?.Photo" />
+            </Template>
+        </RadzenGridColumn>
+        <RadzenGridColumn TItem="Employee" Property="LastName" Title="Last Name" />
+        <RadzenGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+        <RadzenGridColumn TItem="Employee" Property="Title" Title="Title" />
+        <RadzenGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
+        <RadzenGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date">
+            <Template Context="data">
+                @String.Format("{0:d}", data.BirthDate)
+            </Template>
+        </RadzenGridColumn>
+        <RadzenGridColumn TItem="Employee" Property="HireDate" Title="Hire Date">
+            <Template Context="data">
+                @String.Format("{0:d}", data.HireDate)
+            </Template>
+        </RadzenGridColumn>
+        <RadzenGridColumn TItem="Employee" Property="Address" Title="Address" />
+        <RadzenGridColumn TItem="Employee" Property="City" Title="City" />
+        <RadzenGridColumn TItem="Employee" Property="Region" Title="Region" />
+        <RadzenGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
+        <RadzenGridColumn TItem="Employee" Property="Country" Title="Country" />
+        <RadzenGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
+        <RadzenGridColumn TItem="Employee" Property="Extension" Title="Extension" />
+        <RadzenGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+    </Columns>
+</RadzenGrid>
+
+@code {
+    int count;
+    IEnumerable<Employee> employees;
+
+    protected override async Task OnInitializedAsync()
+    {
+        count = await Task.FromResult(dbContext.Employees.Count());
+    }
+
+    private async void LoadData(LoadDataArgs args)
+    {
+        employees = await Task.FromResult(dbContext.Employees.Skip(args.Skip.Value).Take(args.Top.Value));
+    }
+}
diff --git a/Pages/DropDownDataGridPage.razor b/Pages/DropDownDataGridPage.razor
@@ -13,21 +13,21 @@
     <div class="row">
         <div class="col-md-6">
             <h3>DropDownDataGrid</h3>
-            <RadzenDropDownDataGrid TValue="string" AllowFiltering="true" AllowClear="true" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Style="margin-bottom: 20px" Change="@(args => Change(args, "DropDown"))" />
+            <RadzenDropDownDataGrid TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" AllowClear="true" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Style="margin-bottom: 20px" Change="@(args => Change(args, "DropDown"))" />
             <br />
             <h3>DropDownDataGrid with placeholder</h3>
-            <RadzenDropDownDataGrid TValue="string" AllowFiltering="true" AllowClear="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px" />
+            <RadzenDropDownDataGrid TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" AllowClear="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px" />
             <br />
             <h3>DropDownDataGrid with template</h3>
-            <RadzenDropDownDataGrid AllowFiltering="true" AllowClear="true" @bind-Value="value" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
+            <RadzenDropDownDataGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true" @bind-Value="value" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                             Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px; width:400px;">
                 <Template>
                     Company: @((context as Customer).CompanyName)
                 </Template>
             </RadzenDropDownDataGrid>
             <br />
             <h3>DropDownDataGrid with multiple selection</h3>
-            <RadzenDropDownDataGrid AllowFiltering="true" AllowClear="true" @bind-Value="multipleValues" Multiple="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" 
+            <RadzenDropDownDataGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true" @bind-Value="multipleValues" Multiple="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" 
                             Change="@(args => Change(args, "DropDown with multiple selection"))" Style="margin-bottom: 20px; width:400px;" />
         </div>
         <div class="col-md-6">

diff --git a/Pages/DropDownPage.razor b/Pages/DropDownPage.razor
@@ -13,25 +13,25 @@
     <div class="row">
         <div class="col-md-6">
             <h3>DropDown</h3>
-            <RadzenDropDown TValue="string" AllowFiltering="true" Data="@(customers.Select(c => new { CustomerID = c.CustomerID, CompanyName = c.CompanyName }).Distinct())" TextProperty="CompanyName" ValueProperty="CustomerID" Style="margin-bottom: 20px" Change="@(args => Change(args, "DropDown"))" />
+            <RadzenDropDown TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Data="@(customers.Select(c => new { CustomerID = c.CustomerID, CompanyName = c.CompanyName }).Distinct())" TextProperty="CompanyName" ValueProperty="CustomerID" Style="margin-bottom: 20px" Change="@(args => Change(args, "DropDown"))" />
             <br />
             <h3>DropDown with placeholder</h3>
-            <RadzenDropDown TValue="string" AllowFiltering="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px" />
+            <RadzenDropDown TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px" />
             <br />
             <h3>DropDown with template</h3>
-            <RadzenDropDown AllowFiltering="true" @bind-Value="value" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
+            <RadzenDropDown AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="value" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                             Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px; width:400px;">
                 <Template>
                     Company: @((context as Customer).CompanyName)
                 </Template>
             </RadzenDropDown>
             <br />
             <h3>DropDown with multiple selection</h3>
-            <RadzenDropDown AllowFiltering="true" @bind-Value="multipleValues" Multiple="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
+            <RadzenDropDown AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="multipleValues" Multiple="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                             Change="@(args => Change(args, "DropDown with multiple selection"))" Style="margin-bottom: 20px; width:400px;" />
             <br />
             <h3>Bind DropDown Value to model property</h3>
-            <RadzenDropDown AllowFiltering="true" Data="@products" @bind-Value="myModel.MyValue"
+            <RadzenDropDown AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@products" @bind-Value="myModel.MyValue"
                             TextProperty="ProductName" ValueProperty="ProductID" Style="margin-bottom: 20px; width:400px;" Change="@(args => ChangeBound(args, "DropDown with bound Value"))" />
         </div>
         <div class="col-md-6">
@@ -48,7 +48,7 @@
 </RadzenCard>
 
 @code {
-    IEnumerable<dynamic> customers;
+    IEnumerable<Customer> customers;
     IEnumerable<Product> products;
 
     MyObject myModel = new MyObject();

diff --git a/Pages/ListBoxPage.razor b/Pages/ListBoxPage.razor
@@ -25,11 +25,11 @@
         </div>
         <div class="col-md-4">
             <h3>ListBox with filtering</h3>
-            <RadzenListBox AllowFiltering="true" @bind-Value="value" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
+            <RadzenListBox AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="value" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                            Change="@(args => Change(args, "ListBox with filtering"))" Style="margin-bottom: 20px; height:200px;" />
             <br />
             <h3>ListBox with multiple selection</h3>
-            <RadzenListBox AllowFiltering="true" @bind-Value="multipleValues" Multiple="true" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
+            <RadzenListBox AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="multipleValues" Multiple="true" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                            Change="@(args => Change(args, "ListBox with multiple selection"))" Style="margin-bottom: 20px; height:200px;" />
         </div>
         <div class="col-md-4">

diff --git a/Shared/MainLayout.razor b/Shared/MainLayout.razor
@@ -68,29 +68,29 @@
     </ChildContent>
 </RadzenFooter>
 @code {
-    RadzenSidebar sidebar0;
-    RadzenBody body0;
+            RadzenSidebar sidebar0;
+            RadzenBody body0;
 
-    dynamic themes = new[]
-    {
+            dynamic themes = new[]
+            {
         new {Text = "Default", Value = "default"},
         new { Text = "Dark", Value="dark" },
         new { Text = "Software", Value = "software"},
         new { Text = "Humanistic", Value = "humanistic" }
     };
 
-    class Example
-    {
-        public string Name { get; set; }
-        public string Icon { get; set; }
-        public string Path { get; set; }
-        public bool Expanded { get; set; }
-        public IEnumerable<Example> Children { get; set; }
-        public IEnumerable<string> Tags { get; set; }
-    }
+            class Example
+            {
+                public string Name { get; set; }
+                public string Icon { get; set; }
+                public string Path { get; set; }
+                public bool Expanded { get; set; }
+                public IEnumerable<Example> Children { get; set; }
+                public IEnumerable<string> Tags { get; set; }
+            }
 
 
-    Example[] allExamples = new [] {
+            Example[] allExamples = new[] {
         new Example()
         {
             Name = "First Look",
@@ -369,6 +369,13 @@
                     Icon = "import_export",
                     Tags = new [] { "export", "excel", "csv" }
                 },
+                new Example()
+                {
+                    Name = "DataGrid with LoadData",
+                    Path = "datagrid-loaddata",
+                    Icon = "dashboard",
+                    Tags = new [] { "datagrid", "bind", "load", "data", "loaddata" }
+    },
             }
         }, 
     };