<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());
            }
        }
Last modified: February 28, 2021

Author

Comments

Write a Reply or Comment