Bulk update button is not getting enable with checkbox in Grid Control

[chandradev]

Hi Team,

I am implementing the checkbox inside the blazor grid, I got the syntax from your website tutorial. But I m facing the following issue

1. whenever I am doing checked and unchecked , bulk update button is not getting enable 

2. I want to display Header Text on top of Checkbox, that is also not showing

Could you please help me on this issue ?

My Current code is like this

@page "/listInspection/{CurrentID}"

@inject Iinspection InspectionService

@inject NavigationManager objNavigationManager

@inject ILogger<ListInspection> Logger

<SfGrid DataSource="@inspectGrid" @ref="Grid"

        GridLines="GridLine.Both"

        Toolbar="@(new List<string>() {"Update", "Cancel"})">

    <GridEvents OnBatchSave="BatchSaveHandler" CellSelected="CellSelectHandler"

                QueryCellInfo="QueryCellInfoHandler"

                TValue="Inspection" />

    <GridEditSettings AllowAdding="true"

                      AllowDeleting="true"

                      AllowEditing="true"

                      Mode="EditMode.Batch" />

    <GridSelectionSettings CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Inspection.PriInspectionId) IsPrimaryKey="true" AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn1) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn2) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn3) AutoFit="true" />

        @*<GridColumn Field=@nameof(Inspection.Icolumn4) AutoFit="true" HeaderText="Y" />*@

        <GridColumn Type="ColumnType.CheckBox" Field=@nameof(Inspection.Icolumn4) HeaderText="Y" Width="50"></GridColumn>

        <GridColumn Field=@nameof(Inspection.Icolumn5) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn6) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn7) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn8) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.OrderNo) Visible="false" AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.RecType) Visible="false" />

        <GridColumn Field=@nameof(Inspection.MediaFileUrl) AutoFit="true" />

    </GridColumns>

</SfGrid>

<style>

    .e-grid .e-gridheader .e-columnheader {

        display: none;

    }

    .e-grid .e-gridcontent .e-rowcell.Head1 {

        background-color: lightskyblue;

        font-weight: bold;

        pointer-events: none;

    }

</style>

<hr />

@code {

    [Parameter]

    public string CurrentID { get; set; }

    Inspection objins = new Inspection();

    IEnumerable<Inspection> inspectGrid;

    public bool flag { get; set; } = true;

    SfGrid<Inspection> Grid;

    protected override void OnInitialized()

    {

        inspectGrid = InspectionService.GetInspectionById(1000);

    }

    public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<Inspection> args)

    {

        if (args.Data.RecType.Trim() == "HEAD")

        {

            args.Cell.AddClass(new string[] { "Head1" });

        }

    }

    public void CellSelectHandler(CellSelectEventArgs<Inspection> args)

    {

    }

    public void CellSelectingHandler(CellSelectEventArgs<Inspection> args)

    {

    }

    public void BatchSaveHandler(BeforeBatchSaveArgs<Inspection> args)

    {

        foreach (var item in args.BatchChanges.ChangedRecords)

        {

            objins.PriInspectionId = item.PriInspectionId;

            objins.Icolumn1 = item.Icolumn1;

            objins.Icolumn2 = item.Icolumn2;

            objins.Icolumn3 = item.Icolumn3;

            objins.Icolumn4 = item.Icolumn4;

            objins.Icolumn5 = item.Icolumn5;

            objins.Icolumn6 = item.Icolumn6;

            objins.Icolumn7 = item.Icolumn7;

            objins.Icolumn8 = item.Icolumn8;

            objins.OrderNo = item.OrderNo;

            objins.MediaFileUrl = item.MediaFileUrl;

            objins.RecType = item.RecType;

            string msg = InspectionService.UpdateInspection(objins);

        }

    }

}

[Rahul Narayanasamy]

Hi Chandradev, 

Greetings from Syncfusion. 

Query: Bulk update button is not getting enable with checkbox in Grid Control  

1. whenever I am doing checked and unchecked , bulk update button is not getting enable 2. I want to display Header Text on top of Checkbox, that is also not showing

We have validated your query with the provided information. From your query we suspect that you want to render the Boolean column with checkbox in Grid Column and want to edit that column while editing. For this we suggest you to define the ColumnType as Boolean and enable DisplayAsCheckBox property of GridColumn as true. Refer the below code example 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/columns/#render-boolean-values-as-checkbox 

We have prepared a simple sample for your reference. Find the below code snippets and sample for your reference. 

 

<SfGrid DataSource="@OrderData" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Center" Width="120"></GridColumn> 

        . . . 

        <GridColumn Field=@nameof(Order.Verified) HeaderText="Verified" Type="ColumnType.Boolean" EditType="EditType.BooleanEdit" TextAlign="TextAlign.Center" DisplayAsCheckBox="true" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/forum/160341/ze/BlazorApp1CheckBoxCol-2117277525  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[chandradev]

Thanks for sending the reply. In the given sample checked and unchecked is not working. Could you please give me working code.

[Rahul Narayanasamy]

Hi Chandradev, 

Query: In the given sample checked and unchecked is not working. Could you please give me working code.  

We have validated your query and we would like to inform you that CheckBox Type column is used for selection purpose. Find the below documentation for your reference. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/selection/#checkbox-selection  

If you want render Boolean values as a column and want to edit the values of that column, we suggest you to use the below way to achieve your requirement. To render boolean values as checkbox in columns, you need to set DisplayAsCheckBox property as true. You need to set ColumnType as Boolean and EditType as BooleanEdit. Find the below documentation for your reference. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/columns/#render-boolean-values-as-checkbox  

For editing this Boolean column values, you need to double click the particular cell to perform the edit operation. Find the below video for your reference. 

Video: https://www.syncfusion.com/downloads/support/forum/160341/ze/Video-1613868159 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[chandradev]

Hi Rahul,

Thanks for sending the details document on checkbox. But i not getting the exact code for my requirement. My requirement is whenever user checked and unchecked from gridcolumn, I have to update in database. So I am expecting to enable update button whenever user modified some some things.

[Rahul Narayanasamy]

Hi Chandradev, 

Thanks for the update. 

We have validated your query and we might suspect that you want to edit the Boolean type column with single click. We have prepared a sample for your reference in which we have achieved your requirement by rendering the checkbox by using the EditTemplate feature of the grid and then modifying the column values by using OnCellEdit and OnCellSave events. 

 

<SfGrid @ref="GridInstance" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit","Cancel", "Update", "Delete" })"> 

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings> 

    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridEvents OnCellEdit="OnCellEdit" OnCellSave="OnCellSave" CellSelected="CellSelectHandler" TValue="Order"></GridEvents> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field="@nameof(Order.Verified)" DisplayAsCheckBox="true" Width="100"> 

            <EditTemplate> 

                @{ 

                    <SfCheckBox @ref="CheckboxInstance" ID="Verified" @bind-Checked=@CheckboxChecked TChecked="bool"> 

                    </SfCheckBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfCheckBox<bool> CheckboxInstance; 

    public bool CheckboxChecked; 

    SfGrid<Order> GridInstance { get; set; } 

    . ..  

    public async Task CellSelectHandler(CellSelectEventArgs<Order> args) 

    { 

        . . . 

    } 

    public void OnCellEdit(CellEditArgs<Order> args) 

    { 

        . . . 

    } 

 

    public void OnCellSave(CellSaveArgs<Order> args) 

    { 

        . .  

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/160341/ze/BlazorApp1CBoxSingle-563945734  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[chandradev]

Hi Rahul,

I validated the code given by you. It is not working properly when we are clicking two time on checkbox. can you give me the code snippet for how read the checkbox checked which saving the data in database ?

[Rahul Narayanasamy]

Hi Chandradev, 

Sorry for the inconvenience. 

We have validated your query and we need some details regarding the problem. Could you please share the below details. It will helpful to validate and provide a better solution. 

• Video demonstration for the problem currently you are facing.
• What behavior currently you are trying to achieve?
• Did you want to edit the checkbox column using single click?

Regards, 

Rahul