DataGrid CheckBox Column

[Sarah]

Hi,

I got the following code from your site.

1- How do I implement the following image?

2. To read data from Web Api ,I used CustomAdaptor. How can I implement ValueChange = "OnValueChange"?

@using Syncfusion.Blazor.Buttons
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid @ref="Grid" DataSource="@GridData" AllowFiltering="true" AllowPaging="true">
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridColumns>
                     <GridColumn Field="@nameof(Category.CategoryName)"   AutoFit="true"
                                            AllowEditing="true" TextAlign="TextAlign.Right"  
                                            HeaderTextAlign="TextAlign.Center" Type="ColumnType.String"
                                            FilterSettings="@(new FilterSettings { Operator =Syncfusion.Blazor.Operator.Contains})">
                    </GridColumn>
                    <GridColumn Field=@nameof(Category.CategoryName) HeaderText="Category Name" TextAlign="TextAlign.Right" Width="120" FilterSettings="@(new FilterSettings { Operator =Syncfusion.Blazor.Operator.Contains })"></GridColumn>
                    <GridColumn Field=@nameof(Category.ProductName) HeaderText="Product Name" Width="150" FilterSettings="@(new FilterSettings { Operator =Syncfusion.Blazor.Operator.Contains })"></GridColumn>
                    <GridColumn Field=@nameof(Category.QuantityPerUnit) HeaderText="Quantity Per Unit" TextAlign="TextAlign.Right" Width="120"  FilterSettings="@(new FilterSettings { Operator =Syncfusion.Blazor.Operator.Contains })"></GridColumn>
                    <GridColumn Field=@nameof(Category.UnitsInStock) HeaderText="Units In Stock" Width="150" TextAlign="TextAlign.Right"  FilterSettings="@(new FilterSettings { Operator =Syncfusion.Blazor.Operator.Contains })"></GridColumn>
                    <GridColumn Field=@nameof(Category.Discontinued) HeaderText="Discontinued" Width="150" TextAlign="TextAlign.Center" Type="ColumnType.Boolean">
                        <FilterTemplate>
                            @{
                                var FilterContext = (context as PredicateModel);
                                bool? fValue = string.IsNullOrEmpty(FilterContext.Value.ToString()) ? null : (bool?)FilterContext.Value;
                            }
                            <SfCheckBox Checked="@fValue"  EnableTriState="true" ValueChange="OnValueChange" TChecked="bool?"></SfCheckBox>
                        </FilterTemplate>
                    </GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
@code{
    public SfGrid<Category> Grid { get; set; }
    public List<Category> GridData { get; set; }
    protected override void OnInitialized()
    {
        GridData = Category.GetAllRecords();
    }
    private async Task OnValueChange(ChangeEventArgs<bool?> args)
    {
        if (args.Checked != null)
            await Grid.FilterByColumn("Discontinued", "equal", args.Checked); //Perform filtering while check/uncheck the checkbox
        else
            await Grid.ClearFiltering("Discontinued");
    }
}

[Vignesh Natarajan]

Hi Sarah,

Greetings from Syncfusion support.

We understand your requirement and prepared a sample using your code example. We are successfully able to perform filtering action in Boolean column using Filter Checkbox. Are you facing issues with this implementation. If yes share the following details.

1. Are you facing any issues while changing the Checkbox state?
2. You have mentioned about CustomAdaptor. but in the shared code example, DataSource property is used.
3. FilterByColumn method will perform filtering action in Grid, irrespective of Datasource type (ie) either DataSource or SfDataManager with Adaptor.
4. Share the screenshot of the issue you are facing along with a video demonstration.
5. If possible share a simple issue reproducible sample.

The above requested details will be very helpful for us to validate the reported query at our end and provide a solution as early as possible.

Regards,

Vignesh Natarajan

[Sarah]

Hi Vignesh Natarajan ,

in first step. I looked at the source code of the site and used it to implement the image on the left. I could not implement the image on the right. To replace the cell values ​​(true, false) with a check box.

thank you

[Monisha Saravanan]

Hi Sarah,

Greetings from Syncfusion.

We have checked your query  and we are quite unclear about the exact issue you are facing. kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet along with model class.
2. Are you facing an issue with converting Boolean value in to checkbox.
3. Kindly explain your query in detail.
4. To replace the Boolean value with checkbox you can enable DisplayAsCheckbox Api as true on Grid column level.
5. Share us the video demonstration of the issue.
6. If possible share us an simple issue reproduceable sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha

[Sarah]

Hi,

With your guidance, I used DisplayAsCheckbox. The bug was fixed.

thank you

[Monisha Saravanan]

Hi Sarah,

Welcome.

Kindly get back to us if you have further queries. As always we will be happy to help you.

Regards,

Monisha