Checkbox grid rows selection. Leave the select all checkbox in the header enabled.

[Yevgeniy Detsik]

Hello, 

I'm just starting with Blazor and Syncfusion components. So pardon me if the question is silly. 

I have a grid with checkbox only selection mode. Some rows need to have their checkbox disabled. I found how to do this on the forum. I use QueryCellInfo event and set e-attr class for rows that need to be disabled. This works fine. 

The problem is - even when some rows are enabled the Select All checkbox in the header is disabled. I can't figure out how to enable it if there is at least one "enabled" row in the grid. I want to leave it enabled unless all rows are disabled for selection. 

Another related question - is it possible to have the checkbox and the title in the header row? When I use HeaderTemplate with text it removes the checkbox.

Thank you!

[Prathap Senthil]

Hi Yevgeniy,

Before proceeding with the requirement , we require some additional clarification from your end. Please share the below details to proceed further at our end.

• Share with us the NuGet version you have used.
• Share with us a grid code snippet with the model class.
• If possible, kindly share a simple issue reproducible sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible.

Regarding your question, 'Is it possible to display both the checkbox and the title in the header row?' It's not possible to simultaneously show both the checkbox and the title in the header text. The column template allows you to display only customized elements in the column header. This behavior is the default setting for the grid.

Regards,
Prathap S

Attachment: DataGridCheckBox_ab5c7c21.zip

[Yevgeniy Detsik]

Thank you.

1. Version - 23.1.36
2. I added the code to the Grid.Razor page. It is runnable.
3. I added a screenshot to the root folder that show three rows that have their selection checkbox enabled, and three - disabled, and the Select All checkbox is disabled (and I want it to be enabled in a situation like this)

Attachment: BlazorApp1_with_screenshot_5d8aee4d.zip

[Naveen Palanivel]

Hi Yevgeniy,

We reviewed your query, and it appears that you would like to disable the header checkbox when no checkboxes are active in the grid column. We will enable the header checkbox as soon as any one column checkbox becomes active. We have fulfilled your request and attached a modified sample in the forum. Please refer the code snippet and sample for your reference

 

<style>

    .e-rowcell.e-attr

    {

        pointer-events: none;

    }

 

        .e-rowcell.e-attr .e-icons

      {

            opacity: 0.3;

        }

 

</style>

 

 

@if(flag == true)

{

    <style>

 

        .e-headercelldiv.e-headerchkcelldiv {

            pointer-events: none;

        }

    </style>

}

 

 

 

@code {

    public IList<RequiredOrder> Orders { get; set; } = new List<RequiredOrder>();

    private SfGrid<RequiredOrder> Grid;

 

    public void DataboundHandler(object args)

    {

        Grid.AutoFitColumnsAsync();

        //        this.Grid.AutoFitColumns(new string[] { "OrderDate", "Freight" });

    }

    protected override async Task OnInitializedAsync()

    {

        await base.OnInitializedAsync();       

        Orders.Add(new RequiredOrder { Sedol = "234123", Name = "Sony", Action = "Hold", Approved = 0 });

        Orders.Add(new RequiredOrder { Sedol = "234124", Name = "Google", Action = "buy", Approved = 0 });

        Orders.Add(new RequiredOrder { Sedol = "234125", Name = "IBM", Action = "buy", Approved = 1 });

        Orders.Add(new RequiredOrder { Sedol = "234126", Name = "Apple", Action = "buy", Approved = 0 });

        Orders.Add(new RequiredOrder { Sedol = "234127", Name = "BWM", Action = "buy", Approved = 0 });

        Orders.Add(new RequiredOrder { Sedol = "234128", Name = "Samsung", Action = "buy", Approved = 1 });

 

    }

 

 

    public bool flag = true;

    public void QueryCellInfo(QueryCellInfoEventArgs<RequiredOrder> args)

    {

        if (args.Column.HeaderText == "Approve" && (args.Data.Action == "Hold" || args.Data.Approved == 1))

        {

            args.Cell.AddClass(new string[] { "e-attr" });

        }

        if (args.Column.HeaderText == "Approve" && (args.Data.Action != "Hold" && args.Data.Approved != 1))

        {

            flag = false;

        }

 

    }

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Here the modified sample 

Attachment: BlazorApp1_4da5cd9c.zip

[Yevgeniy Detsik]

Thank you, Naveen.

The Select All checkbox is now enabled, but the problem is it selects all rows, including the disabled. See the screenshot. 

How do I prevent the disabled rows from being selected in this scenario?

Best regards,

Yevgeniy

Attachment: DisabledRowsSelected_d7eb0f14.zip

[Yevgeniy Detsik]

If what I'm asking is not possible, the other possible solution I see is to introduce a button and go through rows on the click event.

The question here is how to determine the CSS-class of the first (checkbox) cell of each row to check if a row is disabled?

I am thinking of doing something like this:

private async Task OnClick_ApproveAllSellsBuysAsync()

{

    List<RequiredOrder> requiredOrders = await Grid.GetCurrentViewRecordsAsync();

    foreach(RequiredOrder order in requiredOrders)

    {

        var rowIndex = Grid.GetRowIndexByPrimaryKeyAsync(order.Sedol);

        int rValue = Convert.ToInt32(rowIndex.Result);

        await Grid.SelectCellAsync((rValue, 0));

        var css = Grid.GetClass();

        if(!css.Contains("e-attr") && order.Action != "Hold")

        {

            await Grid.SelectRowAsync(rValue);

        }

    }  

}

I don't think the two lines in bold is an appropriate way to do this. 

What's the correct way?

Thanks!

[Naveen Palanivel]

Hi Yevgeniy,

We checked you query, it seems that  to prevent the selecting  form disabled checkbox in the Grid column, when headercheck box is enabled. We have fulfilled your request and attached a modified sample in the forum. Please refer the code snippet and sample for your reference

    public List<int> RowIndexs { get; set; } = new List<int>();

 

    public bool flags = true;

 

    public void RowSelectingHandler(RowSelectingEventArgs<RequiredOrder> args)

    {

 

        if (args.IsHeaderCheckboxClicked == true && flags == true)

        {

            args.Cancel = true;

            RowIndexs = args.RowIndexes;

            flags = false;

            Grid.SelectRowsAsync(RowIndexs.ToArray());

            flags = true;

        }

 

 

 

        if (args.Data.Action == "Hold" || args.Data.Approved == 1)

        {

            args.Cancel = true;

        }

 

 

    }

 

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

Attachment: BlazorApp3_bc716ef3.zip

[Yevgeniy Detsik]

Thank you!

After trying this method and the external to the grid button, we chose the button solution. But what you provided will be certainly useful in the future.

[Prathap Senthil]

Thanks for the update. We are happy to hear that the issue has been resolved on your end.

We are closing the thread now.