<div id="container">
<SfGrid ID="Grid" @ref="Grid" DataSource="this.ProductList" Height="600" AllowFiltering="true" RowHeight="38" Toolbar="@(new List<string>() { "ExcelExport", "CsvExport", "PdfExport" })" AllowExcelExport="true" AllowPdfExport="true">
<GridEvents TValue="Product" OnToolbarClick="ToolbarClick" OnActionBegin="OnActionBeginAsync"></GridEvents>
<GridColumns>
<GridEditSettings AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings>
<GridColumn HeaderText="" Width="200" AllowEditing="false">
<Template>
@{
var product = (context as Product);
@if (product.ProfilePhotoUrlS == null)
{
<img width="160" src="Images/nophoto.jpg" />
}
else
{
<a href="@product.ProfilePhotoUrl" target="_blank">
<img alt="image" class="" src="@product.ProfilePhotoUrlS">
</a>
}
}
</Template>
<FilterTemplate></FilterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Product.ItemId) HeaderText="ID" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn>
<GridColumn Field=@nameof(Product.ProductType) HeaderText="Product Type" AllowEditing="false">
<FilterTemplate>
<SfDropDownList PlaceHolder="All" DataSource="@ProductCategoryList" TValue="string" TItem="ProductCategory">
<DropDownListEvents ValueChange="ProductTypeFilterChanged" TItem="ProductCategory" TValue="string"></DropDownListEvents>
<DropDownListFieldSettings Value="Name" Text="Name"></DropDownListFieldSettings>
</SfDropDownList>
</FilterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Product.Code) HeaderText="Code" AllowEditing="false"><FilterTemplate></FilterTemplate></GridColumn>
<GridColumn Field=@nameof(Product.Name) HeaderText="Name" Width="300" AllowEditing="false">
<FilterTemplate>
<SfTextBox ValueChange="NameFilterChanged" />
</FilterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Product.Sku) HeaderText="Sku" AllowEditing="false"><FilterTemplate></FilterTemplate></GridColumn>
<GridColumn Field=@nameof(Product.IsStoreDisplay) HeaderText="Store Display"><FilterTemplate></FilterTemplate></GridColumn>
<GridColumn Field=@nameof(Product.SortOrder) HeaderText="Sort Order"><FilterTemplate></FilterTemplate></GridColumn>
<GridColumn Field=@nameof(Product.PricePerUnitSale) HeaderText="Price" Format="C2" TextAlign="TextAlign.Right"><FilterTemplate></FilterTemplate></GridColumn>
</GridColumns>
</SfGrid>
</div>
public SfGrid<CustomersdbShared.Models.Product> Grid;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
// Only show products that are active. ItemStatusId=2 (Active)
ProductList = (await ProductService.GetProductList(this.OrgId)).Where(a => a.ItemStatusId == 2).OrderBy(a => a.SortOrder).ToList();
ProductCategoryList = new List<ProductCategory>();
ProductCategoryList.Add(new ProductCategory { Id = 0, Name = "All" });
ProductCategoryList.AddRange(await ProductService.GetProductCategoryList(this.OrgId));
}
public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_pdfexport")
{
this.Grid.PdfExport();
}
if (args.Item.Id == "Grid_excelexport")
{
this.Grid.ExcelExport();
}
if (args.Item.Id == "Grid_csvexport")
{
this.Grid.CsvExport();
}
}
public async Task OnActionBeginAsync(ActionEventArgs<CustomersdbShared.Models.Product> args)
{
Console.WriteLine("OnActionBeginAsync: " + args.RequestType);
switch (args.RequestType)
{
case Syncfusion.Blazor.Grids.Action.Save:
args.Data.UpdatedBy = this.Username;
await ProductService.UpdateProductForStore(args.Data);
break;
default:
break;
}
}
public async Task ProductTypeFilterChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ProductCategory> args)
{
Console.WriteLine("ProductTypeFilterChanged: " + args.Value);
if (args.Value == "All")
{
await this.Grid.ClearFiltering("ProductType");
}
else
{
await this.Grid.FilterByColumn("ProductType", "contains", args.Value);
}
}
public async Task NameFilterChanged(ChangedEventArgs args)
{
Console.WriteLine("NameFilterChanged: " + args.Value);
if (args.Value.Trim() == "")
{
await this.Grid.ClearFiltering("Name");
}
else
{
await this.Grid.FilterByColumn("Name", "contains", args.Value.Trim());
}
}
Comments