This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Hello,
In my Blazor application, I am trying to make row height smaller with the CSS below. Unfortunately, no change in row height at less than 56px. Am I doing something wrong? Is blocking it in the CSS?
.rz-data-row {
height: 11px !important;
}
Here is the Blazor page:
@page "/report"
<PageTitle>Report</PageTitle>
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Customer
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.Vendor
@using Microsoft.AspNetCore.Components
@using System.Globalization
@using System.Linq.Dynamic.Core
@using System.Security.Claims
@inject NavigationManager NavigationManager
@inject ILogger<ExportOrders> Logger
@inject IWebHostEnvironment Environment
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IViewAllVendorsUseCase ViewAllVendorsUseCase
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject IViewAllCustomersUseCase ViewAllCustomersUseCase
@inject DialogService DialogService
@inject AuthenticationStateProvider _authenticationStateProvider
@implements IDisposable
<style>
.btns {
padding: 5px;
width: calc(9% - 10px);
}
.rz-grid-table td .rz-cell-data {
font-size: 13px;
}
h1 { margin-bottom: 0.1rem !important;}
.rz-card {
margin-bottom: 0.3rem !important;
padding-bottom: 0.1rem !important;
}
.mt-5{
margin-top:0.1rem !important;
}
.mb-3{
margin-top:0.01rem !important;
}
.col{
margin-top: 0.3px;
}
.rz-data-row {
height: 12px !important;
}
</style>
<RadzenCard class="mb-3">
<div class="row g-3">
<div class="col">
<label class="form-label">Vendor</label>
<RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnChange(args))
Class="w-100"/>
</div>
<div class="col">
<label class="form-label">Order Status</label>
<RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@orderStatusList Name="Status" Change=@(args => OnStatusChange(args))/>
</div>
<div class="col">
<label class="form-label">Detail Status</label>
<RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@detailStatusList Name="Status" Change=@(args => OnDetailStatusChange(args)) />
</div>
<div class="col">
<label class="form-label">Customer</label>
<RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
Data=@_customers Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnCustomerChange(args))
Class="w-100"/>
</div>
</div>
<div class="mt-5">
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<button type="button" class="btn btn-primary btns" @onclick="ExportExcel">
Search
</button>
</div>
</div>
@*<li class="border-top my-3"></li>*@
<RadzenDataFilter @ref="dataFilter" Auto=auto Data="@_orders" TItem="ReportViewModel" ViewChanged=@(view =>filteredOrders = view.ToList())>
<Properties>
<RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderId" Title="Order ID" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="ProductCode" Title="Product Code" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="VendorName" Title="Vendor Name" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="CustomerName" Title="Customer Name" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="DoneBy" Title="Employee" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price" />
<RadzenDataFilterProperty TItem="ReportViewModel" Property="Warehouse" Title="Warehouse" />
<AuthorizeView Roles="Administrators">
<RadzenDataFilterProperty TItem="ReportViewModel" Property="PaymentStatus" Title="Payment Status" />
</AuthorizeView>
</Properties>
</RadzenDataFilter>
</RadzenCard>
@*<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="Order Details">*@
<RadzenDataGrid @ref="_grid" AllowPaging="true" AllowSorting="true" Data="@(filteredOrders ?? _orders)" TItem="ReportViewModel"
PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true"
AllowVirtualization="true" Style="width: calc(100vw - 70px); " ColumnWidth="170px" PageSize="20" >
<Columns>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px" OrderIndex="1"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer" OrderIndex="2"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px" OrderIndex="3">
<Template Context="ReportViewModel">
@($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px" OrderIndex="4"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee" OrderIndex="5"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID" OrderIndex="6"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Product Code" Width="100px" OrderIndex="7"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" OrderIndex="8"
Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
<FilterTemplate>
<RadzenDropDown Style="width:100%;" @bind-Value=@selectedVendors Placeholder="Select..."
Change=@OnSelectedVendorsChange Data="@(vendorNames)" AllowClear="true" Multiple="true"/>
</FilterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Warehouse" Title="Warehouse" Width="100px" OrderIndex="9"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px" OrderIndex="10"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price" OrderIndex="11">
<Template Context="detail">
@switch (detail.Currency)
{
case "USD":
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
break;
case "EURO":
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" OrderIndex="12"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" OrderIndex="13">
<Template Context="detail">
@switch (detail.Currency)
{
case "USD":
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.UnitCost)
break;
case "EURO":
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.UnitCost)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.UnitCost)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px" OrderIndex="14">
<Template Context="detail">
@switch (detail.Currency)
{
case "USD":
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
break;
case "EURO":
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit Price" OrderIndex="15">
<Template Context="detail">
@switch (detail.Currency)
{
case "USD":
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
break;
case "EURO":
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price" OrderIndex="16">
<Template Context="detail">
@switch (detail.Currency)
{
case "USD":
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
break;
case "EURO":
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" OrderIndex="17"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" OrderIndex="18"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" OrderIndex="19"/>
<AuthorizeView Roles="Administrators">
<RadzenDataGridColumn TItem="ReportViewModel" Property="PaymentStatus" Title="PaymentStatus" Width="100px" OrderIndex="20"/>
</AuthorizeView>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" OrderIndex="21" />
<RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px" OrderIndex="22">
<Template Context="order">
<RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order))">
</RadzenButton>
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@* </RadzenTabsItem>
</Tabs>
</RadzenTabs>*@
@code {
RadzenDataGrid<ReportViewModel?> _grid;
RadzenDataFilter<ReportViewModel> dataFilter;
IList<ReportViewModel> filteredOrders;
bool auto = true;
ReportViewModel reportViewModel;
DateTime? startValue = DateTime.Now.Date;
DateTime? endValue = DateTime.Now.Date;
DateTime? _startDate;
DateTime? _endDate;
string? _status;
string? _detailStatus;
int _vendorId;
int _customerId;
int orderID;
readonly List<string> orderStatusList = new() { "Continues", "Cancelled", "Completed" };
readonly List<string> detailStatusList = new() { "At customs", "Being supplied", "Cancelled", "Completed", "Getting ready", "In warehouse", "Shipped" };
IEnumerable<ReportViewModel?> _orders;
IEnumerable<Vendor?> _vendors = new List<Vendor?>();
IEnumerable<Customer?> _customers;
ClaimsPrincipal user;
IEnumerable<string?> selectedVendors;
bool isLoading = false;
IQueryable<ReportViewModel?> query;
List<string> vendorNames;
int count;
protected override async Task OnInitializedAsync()
{
user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;
if (!user.Identity.IsAuthenticated)
{
NavigationManager.NavigateTo("/Identity/Account/Login", false);
}
_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
_vendors = await ViewAllVendorsUseCase.ExecuteAsync();
_customers = await ViewAllCustomersUseCase.ExecuteAsync();
vendorNames = _vendors.Select(c => c.Name).ToList();
//query = _orders.AsQueryable();
}
async Task OnSelectedVendorsChange(object value)
{
if (selectedVendors != null && !selectedVendors.Any())
{
selectedVendors = null;
}
await _grid.FirstPage();
}
public void Dispose()
{
// The DialogService is a singleton so it is advisable to unsubscribe.
DialogService.Dispose();
}
void OnChange(object vendor)
{
_vendorId = Int32.Parse(vendor.ToString());
}
void OnCustomerChange(object customer)
{
_customerId = Int32.Parse(customer.ToString());
}
void OnStartDateChange(DateTime? value)
{
if(value != null){
_startDate = value;
}else{
_startDate = null;
}
}
void OnEndDateChange(DateTime? value)
{
if (value != null)
{
_endDate = value;
}
else
{
_endDate = null;
}
}
void OnStatusChange(object status){
if(status != null){
_status = status.ToString();
}else{
_status = null;
}
}
void OnDetailStatusChange(object status){
if(status != null){
_detailStatus = status.ToString();
}else{
_detailStatus = null;
}
}
private async Task ExportExcel()
{
_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
}
private async Task OpenOrder(object args)
{
reportViewModel = (ReportViewModel)args;
await DialogService.OpenAsync<DialogCardPage>($"Order: {reportViewModel.OrderId} Details",
new Dictionary<string, object>() { { "Order", reportViewModel } },
new DialogOptions() { Width = "950px", Height = "685px", Resizable = true, Draggable = true, ShowClose = false, CloseDialogOnEsc = true});
}
async Task LoadData(LoadDataArgs args)
{
//isLoading = true;
//await Task.Yield();
_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
query = _orders.AsQueryable();
if (!string.IsNullOrEmpty(args.Filter))
{
query = query.Where(args.Filter);
}
if (!string.IsNullOrEmpty(args.OrderBy))
{
query = query.OrderBy(args.OrderBy);
}
count = query.Count();
_orders = query.ToList();
//StateHasChanged();
//isLoading = false;
}
}
There were some other CSS tags affecting my code, changed it and worked
.rz-grid-table td .rz-cell-data {
font-size: 10px;
}
.rz-data-row {
height: 11px !important;
}
td {
padding-top: 1px !important;
padding-bottom: 1px !important;
}