DataGrid Tabel with DropDown Menu and Checkbox

[Artur Zigel]

Dear Syncfusion-Team,

i want to create a Table with a dropdown menu and several possibilities to click the checkboxes (either with a checkmark or completely filled) like this:

Can you help me ? Here is my code:

<SfGrid DataSource="@rightsData" AllowSelection="true" AllowPaging="true">

                <GridColumns>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Headlines) HeaderText="" Width="150">

                       

                    </GridColumn>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Read) HeaderText="read"  Width="150">

                        <Template>

                            @{

                                <SfCheckBox @bind-Checked="isChecked"></SfCheckBox>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Edit) HeaderText="edit" Width="150">

                        <Template>

                            @{

                                <SfCheckBox @bind-Checked="isChecked"></SfCheckBox>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Publish) HeaderText="veröffentlichen"

Width="150">

                        <Template>

                            @{

                                <SfCheckBox @bind-Checked="isChecked"></SfCheckBox>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Chat) HeaderText="Chat" Width="150">

                        <Template>

                            @{

                                <SfCheckBox @bind-Checked="isChecked"></SfCheckBox>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Archive) HeaderText="archivieren"

Width="150">

                        <Template>

                            @{

                                <SfCheckBox @bind-Checked="isChecked"></SfCheckBox>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(DetailedAssignmentRights.Delete) HeaderText="delete" Width="150">

                        <Template>

                            @{

                                <SfCheckBox @bind-Checked="isChecked"></SfCheckBox>

                            }

                        </Template>

                    </GridColumn>

                </GridColumns>

            </SfGrid>

[Naveen Palanivel]

Hi Artur,

Greetings from Syncfusion support

We have analyzed your query and still we are quite unclear about your exact requirement. So kindly share the following details to validate the reported query further at our end.

1. Please ensure if you want single click editing in checkbox
2. Share us the video demonstration for your requirement.
3. Please ensure if you want checkbox in tristate(check , uncheck, intermediate)
4. Share more details about your requirement elaborately

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

Regards,

Naveen Palanivel

[Artur Zigel]

Dear Syncfusion Team,

The checkboxes should be clickable individually. The checkbox should have a triple status (check, uncheck, in between). The info field on the side should have a dropdown menu that can be expanded to open more fields and click more checkboxes. Unfortunately, I can't provide a video. Let me know if the requirements are still unclear.

[Naveen Palanivel]

Hi Artur,

Sorry for the Inconvenience.

We are currently Validating  the reported query at our end and we will update the further details within two  days(Aug 29, 2022). Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Vignesh Natarajan]

Hi Artur,

Thanks for your patience.

Query: “The checkbox should have a triple status (check, uncheck, in between).”

We suggest you achieve your requirement using the EnableTriState property of the SfCheckbox component. Refer to the below code example and screenshot for your reference

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

   <GridEditSettings AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" AllowDeleting="true"></GridEditSettings>

    <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.Read) HeaderText="Verified" TextAlign="TextAlign.Right" Width="90">

               <Template>

                @{

                                <SfCheckBox @bind-Checked=@((context as Order).Read) EnableTriState="true"></SfCheckBox>

                }

            </Template>

        </GridColumn> <GridColumn Field=@nameof(Order.Edit) HeaderText="Verified" TextAlign="TextAlign.Right" Width="90">

               <Template>

                @{

                                <SfCheckBox @bind-Checked=@((context as Order).Edit) EnableTriState="true"></SfCheckBox>

                }

            </Template>

        </GridColumn> <GridColumn Field=@nameof(Order.Verified) HeaderText="Verified" TextAlign="TextAlign.Right" Width="90">

               <Template>

                @{

                                <SfCheckBox @bind-Checked=@((context as Order).Verified) EnableTriState="true"></SfCheckBox>

                }

            </Template>

        </GridColumn> <GridColumn Field=@nameof(Order.Chat) HeaderText="Verified" TextAlign="TextAlign.Right" Width="90">

               <Template>

                @{

                                <SfCheckBox @bind-Checked=@((context as Order).Chat) EnableTriState="true"></SfCheckBox>

                }

            </Template>

        </GridColumn> <GridColumn Field=@nameof(Order.Archieve) HeaderText="Verified" TextAlign="TextAlign.Right" Width="90">

               <Template>

                @{

                                <SfCheckBox @bind-Checked=@((context as Order).Archieve) EnableTriState="true"></SfCheckBox>

                }

            </Template>

        </GridColumn> <GridColumn Field=@nameof(Order.Delete) HeaderText="Verified" TextAlign="TextAlign.Right" Width="90">

               <Template>

                @{

                                <SfCheckBox @bind-Checked=@((context as Order).Delete) EnableTriState="true"></SfCheckBox>

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

Query: “The info field on the side should have a dropdown menu that can be expanded to open more fields and click more checkboxes.”

We have provided support for ColumnChooser which matches your requirements. Kindly refer to the below sample and document for your reference

UG: https://blazor.syncfusion.com/documentation/datagrid/column-chooser

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Attachment: BlazorGrid_cf33edc8.zip

[Artur Zigel]

Thank you for the great support

[Naveen Palanivel]

Hi Artur,

Welcome

Regards,

Naveen Palanivel

e