Select All in grid checkbox

I have created user management page which contain grid control  with checkbox  column ( Add/Edit/Delete/View) checked column.Is there any option for "select all" .

Note:-

I need  individual "select all" option for four checked column



3 Replies

RN Rahul Narayanasamy Syncfusion Team February 7, 2022 02:09 PM UTC

Hi KINS, 

Greetings from Syncfusion. 

Query: Select All in grid checkbox  

We understood that you have four checkbox’s(Add/Edit/Delete/View) in GridColumn. You want to enable all these checkbox’s while clicking the SelectAll checkbox option. For your mentioned requirement, we need some details regarding your query. Could you please share the below details which will be helpful to validate and provide a better solution. 

  • Full Grid code snippets.
  • Whether did you rendered those checkbox in one GridColumn?
  • Whether did you rendered those checkbox’s using any Template(column template) or you have rendered those checkbox’s in individual GridColumn?
  • Whether did you want to select all those checkbox after editing the record or without going into edit state?
  • Where did you rendered selectAll checkbox in Grid? Did you rendered this checkbox in GridColumn?
  • Share more details about your requirement.

Regards, 
Rahul 



KI KINS February 7, 2022 03:27 PM UTC

I am not using template for checkbox in grid

I need to show all four checkbix in grid header to select or un select checkbox in grid



RN Rahul Narayanasamy Syncfusion Team February 8, 2022 01:02 PM UTC

Hi KINS, 
  
Thanks for the update. 
  
You want to show all the checkbox’s in the Grid Header and want to check those checkbox state while clicking CheckAll Checkbox. You can achieve this requirement by using HeaderTemplate feature of the Grid. Here, we have rendered the checkbox’s in the Grid header using HeaderTemplate. While enabling CheckAll checkbox, we have enabled all other checkbox’s(Add,Edit, Delete and View) in header. Find the below documentation and code snippets for your reference. 
  
  
  
<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
    <GridColumns> 
        . . . 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="250"> 
            <HeaderTemplate> 
                <SfCheckBox Label="CheckAll" @bind-Checked="CheckAllIsChecked" @onchange="onChange"></SfCheckBox> 
                <SfCheckBox Label="Add" @bind-Checked="AddIsChecked"></SfCheckBox> 
                <SfCheckBox Label="Edit" @bind-Checked="EditIsChecked"></SfCheckBox> 
                <SfCheckBox Label="Delete" @bind-Checked="DeleteIsChecked"></SfCheckBox> 
                <SfCheckBox Label="View" @bind-Checked="ViewIsChecked"></SfCheckBox> 
            </HeaderTemplate> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
  
@code{ 
    public List<Order> Orders { get; set; } 
    private bool CheckAllIsChecked = false; 
    private bool AddIsChecked = false; 
    private bool EditIsChecked = false; 
    private bool DeleteIsChecked = false; 
    private bool ViewIsChecked = false; 
  
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) 
    { 
        if(args.Value.ToString() == "True")    //if checkAll is selected, we have checked all other checkbox’s  
        { 
            AddIsChecked = true; 
            EditIsChecked = true; 
            DeleteIsChecked = true; 
            ViewIsChecked = true; 
        } else 
        { 
            AddIsChecked = false; 
            EditIsChecked = false; 
            DeleteIsChecked = false; 
            ViewIsChecked = false; 
        } 
    } 
  
    . . . 
} 
  
  
 
  
  
Also, you have mentioned that you want to select / unselect the checkbox’s in the Grid. We are quite unclear about this query. Could you please share the below details which will be helpful to validate and provide a better solution. 
  
  • While selecting CheckAll checkbox in grid header, did you perform any update in Grid records?
  • Whether each checkboxes (Check All, Add, Edit, Delete and View) are separate columns, if yes then what data did you bind for these columns in grid and its type?
  • Did you rendered any checkbox column in Grid?
  • Share the expected rough screen shot for your requirement
  • Share complete Grid code snippets for better understanding about your requirement.
  • Modify the sample based on your grid structure and revert back to us if possible.
  
Regards, 
Rahul 


Loader.
Up arrow icon