Radzen.Blazor updated

Fix #99

Radzen.Blazor/PagedDataBoundComponent.cs

@@ -138,14 +138,12 @@ namespace Radzen
         {
             if (topPager != null)
             {
-                topPager.GoToPage(CurrentPage).Wait();
-                InvokeAsync(topPager.Reload);
+                topPager.SetCurrentPage(CurrentPage);
             }
 
             if (bottomPager != null)
             {
-                bottomPager.GoToPage(CurrentPage).Wait();
-                InvokeAsync(bottomPager.Reload);
+                bottomPager.SetCurrentPage(CurrentPage);
             }
         }
 

Radzen.Blazor/Radzen.Blazor.csproj

@@ -8,7 +8,7 @@
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>3.2.2</Version>
+    <Version>3.2.4</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
     <Description>Native Blazor UI components by Radzen Ltd.</Description>

Radzen.Blazor/RadzenDropDownDataGrid.razor

@@ -21,12 +21,6 @@
                 @Template(selectedItem)
             </label>
         }
-        else if (SelectedValue != null)
-        {
-            <label class="rz-dropdown-label rz-inputtext rz-corner-all" onclick="@OpenPopupScript()" style="width:100%;">
-                @PropertyAccess.GetItemOrValueFromProperty(SelectedValue, TextProperty)
-            </label>
-        }
         else if (selectedItem != null)
         {
             <label class="rz-dropdown-label rz-inputtext " onclick="@OpenPopupScript()" style="width:100%;">
@@ -56,6 +50,12 @@
                 }
             </label>
         }
+        else if (SelectedValue != null)
+        {
+            <label class="rz-dropdown-label rz-inputtext rz-corner-all" onclick="@OpenPopupScript()" style="width:100%;">
+                @PropertyAccess.GetItemOrValueFromProperty(SelectedValue, TextProperty)
+            </label>
+        }
         else if (!string.IsNullOrEmpty(Placeholder))
         {
             <label class="rz-dropdown-label rz-inputtext  rz-placeholder" onclick="@OpenPopupScript()" style="width:100%;">
@@ -197,7 +197,8 @@
 
     private string GetPropertyFilterExpression(string property, string filterCaseSensitivityOperator)
     {
-        return $"{property}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)";
+        var p = $@"({property} == null ? """" : {property})";
+        return $"{p}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)";
     }
 
     private bool IsColumnFilterPropertyTypeString(RadzenGridColumn<object> column)
@@ -224,7 +225,7 @@
 
                 if (AllowFilteringByAllStringColumns)
                 {
-                    query = query.Where(string.Join(" || ", grid.ColumnsCollection.Where(c => IsColumnFilterPropertyTypeString(c))
+                    query = query.Where(string.Join(" || ", grid.ColumnsCollection.Where(c => c.Filterable && IsColumnFilterPropertyTypeString(c))
                         .Select(c => GetPropertyFilterExpression(c.GetFilterProperty(), filterCaseSensitivityOperator))),
                             FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
                 }

Radzen.Blazor/RadzenGrid.razor

@@ -977,6 +977,7 @@
         column.SetFilterValue(null);
         column.SetFilterValue(null, false);
         skip = 0;
+        CurrentPage = 0;
         await InvokeAsync(Reload);
     }
 
@@ -1202,6 +1203,7 @@
             {
                 column.SetFilterValue(args.Value, isFirst);
                 skip = 0;
+                CurrentPage = 0;
                 InvokeAsync(Reload);
             }
         }
@@ -1240,7 +1242,6 @@
     public void OrderBy(string property)
     {
         var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
-        skip = 0;
         orderBy = orderBy == $"{p} desc" || orderBy == null || orderBy.IndexOf(p) == -1 ? $"{p} asc" : $"{p} desc";
         InvokeAsync(Reload);
     }
@@ -1248,7 +1249,6 @@
     public void OrderByDescending(string property)
     {
         var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
-        skip = 0;
         orderBy = $"{p} desc";
         InvokeAsync(Reload);
     }

Radzen.Blazor/RadzenLogin.razor

@@ -3,54 +3,36 @@
 @if (Visible)
 {
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
-        <div class="rz-form" novalidate="">
+        <div class="rz-form">
             <div class="row form-group">
                 <label class="col-sm-3 col-form-label" for="username">@UserText</label>
                 <div class="col">
-                    <input name="userName" class="rz-textbox" @bind="@Username" />
-                    @if ((loginClicked || resetClicked) && string.IsNullOrEmpty(Username))
-                    {
-                        <div class="md-inputfield">
-                            <div class="rz-message rz-messages-error ">
-                                @UserRequired
-                            </div>
-                        </div>
-                    }
+                    <RadzenTextBox style="display: block" Name="Username" @bind-Value=@Username />
+                    <RadzenRequiredValidator Component="Username" Text=@UserRequired style="position: absolute" />
                 </div>
             </div>
             <div class="row form-group">
                 <label class="col-sm-3 col-form-label" for="password">@PasswordText</label>
                 <div class="col">
-                    <input name="password" class="rz-textbox" type="password" @bind="@Password" @oninput="@(args => Password = $"{args.Value}")" @onkeypress="@OnPwdKeyPress" />
-                    @if (loginClicked && string.IsNullOrEmpty(Password))
-                    {
-                        <div class="md-inputfield">
-                            <div class="rz-message rz-messages-error ">
-                                @PasswordRequired
-                            </div>
-                        </div>
-                    }
+                    <RadzenPassword style="display: block" Name="Password" @bind-Value=@Password />
+                    <RadzenRequiredValidator Component="Password" Text=@PasswordRequired style="position: absolute" />
                 </div>
             </div>
             <div class="row form-group">
                 <div class="offset-sm-3 col login-buttons">
-                    <button class="rz-button rz-button-md btn-primary" type="@(!string.IsNullOrEmpty(Username) && !string.IsNullOrEmpty(Password) ? "submit" : "button")" @onclick="@OnLogin">
-                        <span class="rz-button-text" style="">@LoginText</span>
-                    </button>
+                    <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Text=@LoginText Click=@OnLogin />
                     @if (AllowResetPassword)
                     {
-                        <a @onclick="@OnReset">@ResetPasswordText</a>
+                        <a @onclick=@OnReset>@ResetPasswordText</a>
                     }
                 </div>
             </div>
         </div>
         @if (AllowRegister)
         {
-            <div class="register" style="">
+            <div class="register">
                 @RegisterMessageText
-                <button class="rz-button rz-button-md    btn-secondary" type="button" @onclick="@OnRegister">
-                    <span class="rz-button-text">@RegisterText</span>
-                </button>
+                <RadzenButton ButtonType="ButtonType.Button" ButtonStyle="ButtonStyle.Primary" Text=@RegisterText Click=@OnRegister />
             </div>
         }
     </div>
@@ -134,37 +116,24 @@
     [Parameter]
     public string PasswordRequired { get; set; } = "Password is required";
 
-    bool loginClicked = false;
-    protected async System.Threading.Tasks.Task OnLogin(EventArgs args)
+    protected async Task OnLogin()
     {
-        loginClicked = true;
         if (!string.IsNullOrEmpty(Username) && !string.IsNullOrEmpty(Password))
         {
-            await Login.InvokeAsync(new Radzen.LoginArgs() { Username = Username, Password = Password });
+            await Login.InvokeAsync(new Radzen.LoginArgs { Username = Username, Password = Password });
         }
     }
 
-    async Task OnPwdKeyPress(KeyboardEventArgs args)
+    protected async Task OnReset(EventArgs args)
     {
-        var key = args.Code != null ? args.Code : args.Key;
-        if (key == "Enter") 
-        { 
-            await OnLogin(args); 
-        }
-    }
-
-    bool resetClicked = false;
-    protected async System.Threading.Tasks.Task OnReset(EventArgs args)
-    {
-        resetClicked = true;
         if (!string.IsNullOrEmpty(Username))
         {
             await ResetPassword.InvokeAsync(Username);
         }
     }
 
-    protected async System.Threading.Tasks.Task OnRegister(EventArgs args)
+    protected async Task OnRegister()
     {
-        await Register.InvokeAsync(args);
+        await Register.InvokeAsync(EventArgs.Empty);
     }
 }

Radzen.Blazor/RadzenPager.razor

@@ -139,6 +139,14 @@
         }
     }
 
+    internal async void SetCurrentPage(int page)
+    {
+        if (CurrentPage != page)
+        {
+            skip = page * PageSize;
+        }
+    }
+
     public async Task FirstPage(bool forceReload = false)
     {
         if (CurrentPage != 0 || forceReload)

Radzen.Blazor/RadzenTemplateForm.cs

@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.AspNetCore.Components.Forms;
 using Radzen;
+using Microsoft.JSInterop;
 
 namespace Radzen.Blazor
 {
@@ -81,6 +82,11 @@ namespace Radzen.Blazor
                 if (valid)
                 {
                     await Submit.InvokeAsync(Data);
+
+                    if (Action != null)
+                    {
+                        await JSRuntime.InvokeVoidAsync($"Radzen.submit", Element);
+                    }
                 }
                 else
                 {
@@ -137,18 +143,16 @@ namespace Radzen.Blazor
                     builder.AddAttribute(2, "method", Method);
                     builder.AddAttribute(3, "action", Action);
                 }
-                else
-                {
-                    builder.AddAttribute(4, "onsubmit", handleSubmitDelegate);
-                }
 
+                builder.AddAttribute(4, "onsubmit", handleSubmitDelegate);
                 builder.AddMultipleAttributes(5, Attributes);
                 builder.AddAttribute(6, "class", GetCssClass());
+                builder.AddElementReferenceCapture(7, form => Element = form);
 
-                builder.OpenComponent<CascadingValue<IRadzenForm>>(7);
-                builder.AddAttribute(8, "IsFixed", true);
-                builder.AddAttribute(9, "Value", this);
-                builder.AddAttribute(10, "ChildContent", new RenderFragment(contentBuilder =>
+                builder.OpenComponent<CascadingValue<IRadzenForm>>(8);
+                builder.AddAttribute(9, "IsFixed", true);
+                builder.AddAttribute(10, "Value", this);
+                builder.AddAttribute(11, "ChildContent", new RenderFragment(contentBuilder =>
                 {
                     contentBuilder.OpenComponent<CascadingValue<EditContext>>(0);
                     contentBuilder.AddAttribute(1, "IsFixed", true);
@@ -159,6 +163,7 @@ namespace Radzen.Blazor
 
                 builder.CloseComponent(); // CascadingValue<IRadzenForm>
 
+
                 builder.CloseElement(); // form
 
                 if (Data != null)

Radzen.Blazor/RadzenTree.razor

@@ -6,16 +6,16 @@
 @if (Visible)
 {
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
-        <ul class="rz-tree-container">
+    <ul class="rz-tree-container">
         <CascadingValue Value=this>
             @ChildContent
         </CascadingValue>
         @if (Data != null && Levels.Any())
-        {
-            <CascadingValue Value=this>
-                @RenderChildren(Data, 0)
-            </CascadingValue>
-        }
+            {
+                <CascadingValue Value=this>
+                    @RenderChildren(Data, 0)
+                </CascadingValue>
+            }
         </ul>
     </div>
 }
@@ -43,13 +43,14 @@
     public IEnumerable Data { get; set; }
 
     [Parameter]
-    public object Value { get; set;}
+    public object Value { get; set; }
 
     [Parameter]
     public EventCallback<object> ValueChanged { get; set; }
 
-    void RenderTreeItem(RenderTreeBuilder builder, object data, RenderFragment<RadzenTreeItem> template, Func<object, string> text, 
-        Func<object, bool> hasChildren, Func<object, bool> expanded, Func<object, bool> selected)
+    void RenderTreeItem(RenderTreeBuilder builder, object data, RenderFragment<RadzenTreeItem> template, Func<object,
+    string> text,
+    Func<object, bool> hasChildren, Func<object, bool> expanded, Func<object, bool> selected)
     {
         builder.OpenComponent<RadzenTreeItem>(0);
         builder.AddAttribute(1, nameof(RadzenTreeItem.Text), text(data));
@@ -162,12 +163,19 @@
         return PropertyAccess.Getter<T>(data, property);
     }
 
-    protected override void OnParametersSet()
+    public override async Task SetParametersAsync(ParameterView parameters)
     {
-        if (Value == null)
+        if (parameters.DidParameterChange(nameof(Value), Value))
         {
-            SelectedItem = null;
+            var value = parameters.GetValueOrDefault<object>(nameof(Value));
+            
+            if (value == null)
+            {
+                SelectedItem = null;
+            }
         }
+
+        await base.SetParametersAsync(parameters);
     }
 
     internal void AddLevel(RadzenTreeLevel level)

Radzen.Blazor/themes/components/blazor/_numeric.scss

@@ -1,5 +1,5 @@
 $numeric-line-height: 1.5rem !default;
-$numeric-input-padding: 1px 12px 1px 1px;
+$numeric-input-padding: 1px 12px 1px 0.5rem;
 $numeric-button-width: 0.875rem !default;
 $numeric-button-height: $numeric-button-width !default;
 $numeric-button-border-radius: 2px !default;
@@ -14,20 +14,19 @@ $numeric-button-color: $white !default;
 
   @extend %input;
 
+  padding: 0px;
+
   input[type='number'],
   input[type='text'] {
     -moz-appearance: textfield;
     width: 100%;
+    height: 100%;
     border: none;
     background-color: transparent;
     line-height: $numeric-line-height;
     text-align: inherit;
     padding: $numeric-input-padding;
 
-    &:focus {
-      outline: none;
-    }
-
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
       -webkit-appearance: none;

Radzen.Blazor/wwwroot/Radzen.Blazor.js

@@ -1093,6 +1093,9 @@ window.Radzen = {
     document.addEventListener('touchend', ref.mouseUpHandler, { passive: true });
     return Radzen.clientRect(ref);
   },
+  submit: function (form) {
+    form.submit();
+  },
   clientRect: function (arg) {
     var el = arg instanceof Element || arg instanceof HTMLDocument
         ? arg

RadzenBlazorDemos/Pages/DataGridFooterTotalsPage.razor

@@ -3,7 +3,7 @@
 @using RadzenBlazorDemos.Data
 @using RadzenBlazorDemos.Models.Northwind
 @using Microsoft.EntityFrameworkCore
-
+@using System.Linq 
 @inject NorthwindContext dbContext
 
 <h1>DataGrid Footer Totals</h1>
@@ -18,8 +18,13 @@
 else
 {
     <RadzenGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" 
-                Data="@dbContext.Orders.Include("Customer").Include("Employee")" TItem="Order">
+                Data="@orders" TItem="Order">
         <Columns>
+            <RadzenGridColumn Width="50px" TItem="Order" Title="Nr." Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
+                <Template>
+                    @(orders.IndexOf(context) + 1)
+                </Template>
+            </RadzenGridColumn>
             <RadzenGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID">
                 <FooterTemplate>
                     Displayed orders: <b>@ordersGrid.View.Count()</b> of <b>@orders.Count()</b>
@@ -56,7 +61,7 @@ else
 
 @code {
     RadzenGrid<Order> ordersGrid;
-    IEnumerable<Order> orders;
+    IList<Order> orders;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/LoginPage.razor

@@ -9,30 +9,39 @@
     <div class="col-xl-6">
         <h3>Simple login</h3>
         <RadzenCard>
-            <RadzenLogin AllowRegister="false" AllowResetPassword="false" Login=@(args => OnLogin(args, "Simple login")) Style="margin-bottom: 20px;" />
+            <RadzenTemplateForm Data=@("SimpleLogin") Action="http://www.google.com">
+                <RadzenLogin AllowRegister="false" AllowResetPassword="false" Login=@(args => OnLogin(args, "Simple login")) Style="margin-bottom: 20px;" />
+            </RadzenTemplateForm>
         </RadzenCard>
         <h3 style="margin-top: 1rem">Login with register</h3>
         <RadzenCard>
+            <RadzenTemplateForm Data=@("LoginWithRegister")>
             <RadzenLogin AllowResetPassword="false" 
                             Login=@(args => OnLogin(args, "Login with register")) 
                             Register=@(args => OnRegister("Login with register")) Style="margin-bottom: 20px;" />
+            </RadzenTemplateForm>
         </RadzenCard>
         <h3 style="margin-top: 1rem">Login with register and password reset</h3>
         <RadzenCard>
+            <RadzenTemplateForm Data=@("LoginWithRegisterAndReset")>
             <RadzenLogin Login=@(args => OnLogin(args, "Login with register and password reset")) 
                             ResetPassword=@(args => OnResetPassword(args, "Login with register and password reset"))
                             Register=@(args => OnRegister("Login with register and password reset")) Style="margin-bottom: 20px;" />
+            </RadzenTemplateForm>
         </RadzenCard>
         <h3 style="margin-top: 1rem">Login with default values</h3>
         <RadzenCard>
+            <RadzenTemplateForm Data=@("LoginWithDefaultValues")>
             <RadzenLogin AllowRegister="true" AllowResetPassword="true" Username=@userName Password=@password
                             Login=@(args => OnLogin(args, "Login with default values"))
                             ResetPassword=@(args => OnResetPassword(args, "Login with default values"))
                             Register=@(args => OnRegister("Login with default values"))
                             Style="margin-bottom: 20px;" />
+            </RadzenTemplateForm>
         </RadzenCard>
         <h3 style="margin-top: 1rem">Localization</h3>
         <RadzenCard>
+            <RadzenTemplateForm Data=@("Localization")>
             <RadzenLogin AllowRegister="true" AllowResetPassword="true"
                             LoginText="Einloggen" UserText="Benutzername" PasswordText="Passwort"
                             UserRequired="Benutzername erforderlich"
@@ -44,6 +53,7 @@
                             ResetPassword=@(args => OnResetPassword(args, "Localized login"))
                             Register=@(args => OnRegister("Localized login"))
                             Style="margin-bottom: 20px;" />
+            </RadzenTemplateForm>
         </RadzenCard>
     </div>
     <div class="col-md-6">

RadzenBlazorDemos/RadzenBlazorDemos.csproj

@@ -5,7 +5,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Radzen.Blazor" Version="3.2.2" />
+    <PackageReference Include="Radzen.Blazor" Version="3.2.4" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="5.0.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="5.0.0" />
     <PackageReference Include="DocumentFormat.OpenXml" Version="2.11.3" />