Hi Vignesh,
unfortunately is not easy for me to provide you with a functional copy of project, anyway I try to my best to explain the problem.
This is the razor file that contains the grid:
<div class="main-container client-area">
<div style="height: 54px">
</div>
<div class="client-area" style="flex: 1 1; overflow-y: auto;">
<EjsGrid ID="gridProducts" DataSource="@Results" EnableVirtualization="true" Width="100%" Height="100%" RowHeight="96">
<GridEvents RowDataBound="RowDataBoundHandler" TValue="ProductViewModel" OnActionComplete="ActionCompleteHandler" OnActionBegin="ActionBeginHandler"></GridEvents>
<GridColumns>
<GridColumn Field="Cod" HeaderText="Codice" Width="50" IsPrimaryKey="true">
<Template>
@{
var product = (context as ProductViewModel);
<div style="height: 64px; width: 64px;">
<img class="img-thumbnail" src="@($"{product?.ImageUrl}")" alt="@Path.GetFileName(product?.ImageUrl)" />
</div>
}
</Template>
</GridColumn>
<GridColumn Field="Des" HeaderText="Descrizione" Width="150">
<Template>
@{
var product = (context as ProductViewModel);
<div>
<p class="lead">@product.Des</p>
<br />
<p>
<small class="text-muted">Codice: @product.Cod</small>
<a rel='nofollow' href="javascript: void(0)" @onclick="() => GoToCart(product)" style="text-decoration: none;"><span class="badge-cart">@(product.QtyInCart > 0 ? "Già nel carrello" : "")</span></a>
<a rel='nofollow' href="javascript: void(0)" @onclick="() => ShowDocs(product)" style="text-decoration: none;"><span class="badge-orders">@(product.IsInOrder ? "Già in ordine" : "")</span></a>
</p>
</div>
}
</Template>
</GridColumn>
<GridColumn Field="Price" HeaderText="Prezzo" Type="ColumnType.Number" TextAlign="TextAlign.Right" Width="130">
<Template>
@{
var product = (context as ProductViewModel);
<div>
<p>
@string.Format("€ {0:#,###,##0.00}", product.Price)
</p>
<br />
<EjsButton IconCss="e-icons e-add" @onclick="async (args) => await AddToCart(product)">Aggiungi</EjsButton>
</div>
}
</Template>
</GridColumn>
</GridColumns>
</EjsGrid>
</div>
<div style="height: 54px; text-align: center;">
</div>
</div>
As you can see the grid is virtualized and I'm using some column templates to customize the appearance of the grid.
The slow data for this visualization to get is the price, so the view model is initialized just once on the RowDataBoundHandler:
public async void RowDataBoundHandler(RowDataBoundEventArgs<ProductViewModel> args)
{
var product = this.results.FirstOrDefault(item => string.Compare(item.Product.Cod, args.Data.Cod, true) == 0);
if (product != null && !product.Initialized)
{
await product.ItemBounded(http);
}
}
This is the relevan code in the product view model:
public async Task ItemBounded(HttpClient http)
{
var info = await http.GetJsonAsync<ProductInfo>($"{AppBase.ApiBaseUri}/product/info?cod={Cod}");
this.price = (info?.Price).GetValueOrDefault();
Initialized = true;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Price"));
}
Hope this is enough to understand the problem.
Regards,
Andrea
P.S.
The code quality is not so good, just because I'm developing a prototype to evaluate Blazor + Syncfusion in a server side app