Only hafl of screen showed in data grid list
Hello,
In data grid, only haf of avaiable space showed up. What could be reason of this ? In desktop mode, It work how its supposed to be.
My code;
@page "/carihesaphareketleri"
@inject CariHesapHareketleriSayfaVerileri sayfaVerileri
@inject veriTabaniBaglantisi veriTabaniBaglantisi
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using MudBlazor
@inject IJSRuntime JSRuntime
<MudBlazor.MudContainer MaxWidth="MudBlazor.MaxWidth.ExtraExtraLarge">
<MudBlazor.MudAutocomplete T="ArctosCari" Label="Cari Adı" Value="@sayfaVerileri.selectedcari" ValueChanged="selectedCariChanged" SearchFunc="@searchCari"
ResetValueOnEmptyText="@resetValueOnEmptyText" ToStringFunc="@(e=> e==null?null : $"{e.cariKodu} - {e.cariAdi}")" />
@if (sayfaVerileri.selectedcari is not null)
{
<MudBlazor.MudDivider />
<br>
<br>
<MudBlazor.MudItem xs="12" Class="d-flex justify-left" Style="align-items:center">
<MudBlazor.MudGrid hidden=@aramaSecenekleriGizle Justify="MudBlazor.Justify.FlexStart">
<MudTextField T=string Text="@sayfaVerileri.selectedcari.arctosTelNoAl(veriTabaniBaglantisi.connection)" Label="Telefon" ReadOnly="true" Variant="Variant.Text" />
@if (sayfaVerileri.selectedcari.bakiye < 0)
{
<MudTextField T=string Text="@ArctosGenelFonksiyonlar.fiyatFormatla(sayfaVerileri.selectedcari.bakiye)" Label="Bakiye" ReadOnly="true" Variant="Variant.Text" />
}else
{
<MudTextField T=string Text="@ArctosGenelFonksiyonlar.fiyatFormatla(sayfaVerileri.selectedcari.bakiye)" Label="Bakiye" ReadOnly="true" Variant="Variant.Text" />
}
</MudBlazor.MudGrid>
</MudBlazor.MudItem>
<br>
<MudBlazor.MudDivider />
}
@if (sayfaVerileriHazirlandi is false)
{
<DataLoadingAnimation></DataLoadingAnimation>
}else
{
<div class="grid-container">
<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint" />
@if (activeBreakpoint == "Small")
{
rowDirection = RowDirection.Vertical;
@* allowPaging = false;
virtualison = true; *@
}
else
{
rowDirection = RowDirection.Horizontal;
}
<SfGrid @ref="sfGrid"
DataSource="@gosterimListesi"
Height="100%"
Width="100%"
EnableAdaptiveUI="true"
AdaptiveUIMode="AdaptiveMode.Mobile"
EnableStickyHeader="true"
RowRenderingMode="@rowDirection"
EnableVirtualization="virtualison"
AllowPaging="allowPaging">
<GridColumns>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.tarih)" HeaderText="Tarih" Format="dd.MM.yyyy"></GridColumn>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.izahat)" HeaderText="İzahat" >
<Template>
@{
var data = (context as ArctosCariHesapHareketi);
@ArctosGenelFonksiyonlar.izahattanBegeTuruAl(data.izahat, veriTabaniBaglantisi.connection)
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.belgeOzelKod1)" HeaderText="Depo" ></GridColumn>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.belgeNo)" HeaderText="Belge No" ></GridColumn>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.borc)" HeaderText="Borç" TextAlign="TextAlign.Right">
<Template>
@{
var data = (context as ArctosCariHesapHareketi);
<span style="color: red;">@ArctosGenelFonksiyonlar.fiyatFormatla(data.borc)</span>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.alacak)" HeaderText="Alacak" TextAlign="TextAlign.Right">
<Template>
@{
var data = (context as ArctosCariHesapHareketi);
<span style="color: green;">@ArctosGenelFonksiyonlar.fiyatFormatla(data.alacak)</span>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(ArctosCariHesapHareketi.bakiye)" HeaderText="Bakiye" TextAlign="TextAlign.Right">
<Template>
@{
var data = (context as ArctosCariHesapHareketi);
<b>
<span style="color: blue;">@ArctosGenelFonksiyonlar.fiyatFormatla(data.bakiye) (@data.sonDurum)</span>
</b>
}
</Template>
</GridColumn>
</GridColumns>
<GridTemplates>
<DetailTemplate>
@{
var data = (context as ArctosCariHesapHareketi);
if (data.arctosBelgeBaslik is ArctosCarHarBaslik carHarBaslik)
{
<CariHareketiTablosu gosterimListesi="@carHarBaslik.hareketListesi"></CariHareketiTablosu>
}
else if (data.arctosBelgeBaslik is ArctosFaturaBaslik faturaBaslik)
{
<FaturaHareketiTablosu izahat="@data.izahat" gosterimListesi="@faturaBaslik.hareketListesi"></FaturaHareketiTablosu>
}
}
</DetailTemplate>
</GridTemplates>
</SfGrid>
</div>
}
</MudBlazor.MudContainer>
<style>
.grid-container {
width: 100%;
height: calc(100vh - 205px); /* 110px for header + 15px extra space */
max-width: 100%;
max-height: calc(100vh - 205px);
overflow: auto;
align-content: center;
padding: 0px; /* Add some padding for better appearance */
box-sizing: border-box; /* Include padding in width and height calculations */
}
</style>
@code {
private string? activeBreakpoint;
private RowDirection rowDirection;
ArctosCari _selectedItem;
private bool resetValueOnEmptyText;
private bool coerceText;
private bool coerceValue;
private bool loading = false;
private bool allowPaging = false;
private bool virtualison = true;
private string? hiddenButtonIcon { get; set; } = MudBlazor.Icons.Material.Filled.KeyboardArrowRight;
private SfGrid<ArctosCariHesapHareketi> sfGrid;
private ArctosFirmaDonem seciliFirma1;
private ArctosFirmaDonem seciliFirma2;
private List<ArctosCariHesapHareketi> gosterimListesi { get; set; } //Bu gösterim yapılacak nihai listesdir
private List<ArctosCari> cariListesi { get; set; }
private bool sayfaVerileriHazirlandi { get; set; } = true;
protected override void OnInitialized()
{
gosterimListesi = new List<ArctosCariHesapHareketi>();
seciliFirma1 = veriTabaniBaglantisi.guvenSati2020;
gosterimListesiniHazirla();
}
private async Task selectedCariChanged(ArctosCari selectedCari)
{
sayfaVerileri.selectedcari = selectedCari;
sayfaVerileri.gosterimListesi = null;
gosterimListesiniHazirla();
}
private async Task hiddenFunction()
{
aramaSecenekleriGizle = !aramaSecenekleriGizle;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
sayfaVerileriHazirlandi = false;
await Task.Delay(300);
if (sfGrid.TotalItemCount > 0 )
{
await Task.Delay(500); // Give some time for the grid to render
if (sfGrid != null && gosterimListesi.Count > 0)
{
int lastRowIndex = gosterimListesi.Count - 1;
await sfGrid.ScrollIntoViewAsync(rowIndex: lastRowIndex);
}
// if (activeBreakpoint == "Small")
// {
// await Task.Delay(500); // Give some time for the grid to render
// if (sfGrid != null && gosterimListesi.Count > 0)
// {
// int lastRowIndex = gosterimListesi.Count - 1;
// await sfGrid.ScrollIntoViewAsync(rowIndex: lastRowIndex);
// }
// // if (sfGrid.PageSettings.PageSize > 0)
// // {
// // double Totalpage = (double)Math.Ceiling(sfGrid.TotalItemCount / (double)sfGrid.PageSettings.PageSize);
// // await sfGrid.GoToPageAsync(Convert.ToInt32(Math.Ceiling(Convert.ToDecimal(Totalpage))));
// // }
// }
// else
// {
// await Task.Delay(500); // Give some time for the grid to render
// if (sfGrid != null && gosterimListesi.Count > 0)
// {
// int lastRowIndex = gosterimListesi.Count - 1;
// await sfGrid.ScrollIntoViewAsync(rowIndex: lastRowIndex);
// }
// }
await sfGrid.Refresh();
}
sayfaVerileriHazirlandi = true;
await base.OnAfterRenderAsync(firstRender);
}
private async Task<IEnumerable<ArctosCari>> searchCari(string seachText, CancellationToken token)
{
if (string.IsNullOrEmpty(seachText))
return cariListesi;
if (seachText.Length > 3)
{
return (await ArctosCari.arctosCariAlTopluAsync(veriTabaniBaglantisi.connection, veriTabaniBaglantisi.guvenSati2020, bakyeGetir: true, firmaAdi: ArctosGenelFonksiyonlar.buyukHarfeDonustur(seachText))).OrderBy(x => x.cariAdi).ToList();
}else
{
return cariListesi;
}
}
private async Task gosterimListesiniHazirla()
{
if (sayfaVerileri.selectedcari is not null)
{
// sayfaVerileri.selectedcari = (await ArctosCari.arctosCariAl(veriTabaniBaglantisi.connection, veriTabaniBaglantisi.guvenSati2020, bakyeGetir: true,firmaIndListesi:new List<int>{sayfaVerileri.selectedcari.IND})).First();
sayfaVerileriHazirlandi = false;
await InvokeAsync(StateHasChanged);
if (sayfaVerileri.gosterimListesi is null)
{
if (sayfaVerileri.selectedcari is not null)
{
if (sayfaVerileri.gosterimListesi is null)
{
//Gösterim listesini hazırlar
gosterimListesi = (await ArctosCariHesapHareketi.cariHesapHareketleriAlTopluAsync(sayfaVerileri.selectedcari.IND, veriTabaniBaglantisi.connection, veriTabaniBaglantisi.guvenSati2020)).OrderBy(x => x.ind).ToList();
sayfaVerileri.gosterimListesi = gosterimListesi.ToList();
}
}
}
else
{
gosterimListesi = sayfaVerileri.gosterimListesi.ToList();
}
sayfaVerileriHazirlandi = true;
await InvokeAsync(StateHasChanged);
}
}
private bool aramaSecenekleriGizle
{
get { return _aramaSecenekleriGizle; }
set
{
_aramaSecenekleriGizle = value;
if (aramaSecenekleriGizle is true)
{
hiddenButtonIcon = MudBlazor.Icons.Material.Filled.KeyboardArrowRight;
}
else
{
hiddenButtonIcon = MudBlazor.Icons.Material.Filled.KeyboardArrowDown;
}
}
}
private bool _aramaSecenekleriGizle;
}
