1. Home
  2. Forum
  3. Blazor
  4. Grid & multi selection checkbox (set maximum & disabled checkboxes)

Grid & multi selection checkbox (set maximum & disabled checkboxes)

Set maximum records on grid selection:
Is it possible to set a maximum number of allowed records to select?
Eg: a user can only select max 5 records out of the 20 records available in the grid.

If the maximum is reached we want to perform an action (like show a dialog).


Disable grid selection checkboxes: In our project we need to have the option to prevent selection of some records in the grid, some records, not all. 
How can we set the checkbox to disabled for some rows?


8 Replies
PS Pavithra Subramaniyam Syncfusion Team June 26, 2020 01:48 PM UTC

Hi Davy, 
 
Thanks for contacting Syncfusion support. 
 
Query#1: Is it possible to set a maximum number of allowed records to select? 
 
You can achieve your requirement by canceling the selection inside the “RowSelecting” event base don the required condition. Please refer to the below code example and documentation link for more information. 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true"> 
    <GridEvents RowSelecting="OnRowSelecting" TValue="Order"></GridEvents> 
    <GridSelectionSettings Type="SelectionType.Multiple" CheckboxOnly="true"></GridSelectionSettings> 
    <GridColumns> 
        <GridColumn Type="ColumnType.CheckBox" HeaderText="Select" Width="50"></GridColumn> 
        .  .  . 
    </GridColumns> 
</SfGrid> 
@code{ 
     
    public async Task  OnRowSelecting(RowSelectingEventArgs<Order> args) 
    { 
        var records = await this.Grid.GetSelectedRecords(); 
        if(records.Count > 3) // Will Cancel the Selection more than 4 records 
        { 
            args.Cancel = true; 
            // You can render Alert here 
        } 
    } 
} 
 

Query#2: How can we set the checkbox to disabled for some rows? 
 
You can disable the Checkbox for some rows using the “QueryCellInfo” event. Please refer to the below code example, documentation and sample link. 

In this sample we have added a class to the checkbox cell based on some condition and set the CSS to disable the CheckBox selection. 

<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true"> 
    <GridEvents QueryCellInfo="QueryCellInfo" TValue="Order"></GridEvents> 
    <GridSelectionSettings Type="SelectionType.Multiple" CheckboxOnly="true"></GridSelectionSettings> 
    <GridColumns> 
        <GridColumn Type="ColumnType.CheckBox" HeaderText="Select" Width="50"></GridColumn> 
        .  .  . 
    </GridColumns> 
</SfGrid> 
<style> 
    .e-rowcell.e-attr, 
    .e-headercelldiv.e-headerchkcelldiv { 
        pointer-events:none; 
    } 
    .e-rowcell.e-attr .e-icons, 
    .e-headerchkcelldiv .e-icons{ 
        opacity:0.5; 
    } 
</style> 
@code{ 
     
    public void QueryCellInfo(QueryCellInfoEventArgs<Order> args) 
    { 
        if(args.Column.HeaderText == "Select" && args.Data.OrderID < 1003 ) 
        { 
            args.Cell.AddClass(new string[] { "e-attr"}); 
        } 
    } 
} 
 


Please get back to us if you need any further assistance on this. 

Regards, 
Pavithra S 


DA Davy June 29, 2020 06:39 AM UTC

I've already tried the  “RowSelecting” event, but the args.Cancel doesn't prevent the row from getting selected (and the checkbox still gets checked).

Currently working with v18.1.0.59 on a Blazor WebAssembly (hosted) project. Looks like a bug to me.

DA Davy June 29, 2020 06:43 AM UTC

Added (attached) a sample WASM project containing the rowselecting bug.

Attachment: BlazorApp11_1745e867.zip

KM Kuralarasan Muthusamy Syncfusion Team June 30, 2020 07:01 AM UTC

Hi Davy, 

We found that you didn’t refer the Syncfusion theme in the shared project and we are unable to reproduce the issue after referring our theme (like as below code snippet) in ~/wwwroot/index.html this page. 

<head> 
   <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 
</head> 


We have attached the modified sample in the below link for your reference. 


If you don’t need to use the Syncfusion theme or if you have any other requirement, then please share your requirement details for further assistance. 

Regards, 
Kuralarasan M 


DA Davy June 30, 2020 08:18 AM UTC

Thanks for you input Kuralarasan, I still cannot get it to work, so I created an incident ticket for it. Let's see what we can find.

One other question: is it also possible to do databinding on the grid checkboxes? To have them check on page load? When I use the Column Field property, the RowSelecting event does not get triggered anymore.

KM Kuralarasan Muthusamy Syncfusion Team July 1, 2020 07:36 AM UTC

Hi Davy, 

Query #1:  I still cannot get it to work, so I created an incident ticket for it. Let's see what we can find. 
 
We have updated the response in your incident. So, please follow up the incident for more details. 
 
Query #2: is it also possible to do databinding on the grid checkboxes? To have them check on page load? When I use the Column Field property, the RowSelecting event does not get triggered anymore. 
 
From this query, we suspect that you want to select the Grid rows at initial rendering based on the particular column value. You can achieve this requirement by using DataBound event like as below code snippet. 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true"> 
    <GridEvents DataBound="Data" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Type="ColumnType.CheckBox" Width="120"></GridColumn> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    List<int> Indexes = new List<int>(); 
 
    public void Data(object args) 
    { 
        var Source = this.Grid.DataSource; 
        var IndexNum = 0; 
        foreach (var Data in Source) 
        { 
            if (Data.Verified == true) 
            { 
                Indexes.Add(IndexNum); 
            } 
            IndexNum++; 
        } 
        Grid.SelectRows(Indexes); 
    } 
} 
 
We have already discussed about this in below documentation, please refer this for more details. 
 
 
 
Note: Selecting checkbox will not affect the Grid datasource. 
 
If we misunderstood you query please share your exact requirement details for further assistance. 
 
Regards, 
Kuralarasan M 


DA Davy July 1, 2020 08:08 AM UTC

OnDataBound event is what I needed. Thanks.

KM Kuralarasan Muthusamy Syncfusion Team July 2, 2020 05:03 AM UTC

Hi Davy, 

We are happy to hear that your requirement has been achieved. Please get back to us, if you need any further assistance. 

Regards, 
Kuralarasan M 


Loader.
Up arrow icon