DataGrid FilterType.Excel Editable

[Sarah]

Hi 

How to implement the following in Blazer Server DataGrid?

- The data type is Boolean and should be displayed in the cell as a check box

- Use FilterType.Excel 

- The user can edit by clicking on the check box

I implemented this and the problem is that the user cannot edit by clicking on the checkbox.

[Prathap Senthil]

Hi Sara ,

Based on your requirement, we would like to clarify that to display a cell as a checkbox for a Boolean data type, please ensure that the column  EditType is set to BooleanEdit and the DisplayAsCheckBox property is enabled for that column.

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

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#booleanedit

But, you mentioned facing an issue where editing is not occurring by clicking on the checkbox. We suspect that you expect single-click editing, but by default, the editing state opens with a double-click. To enable single-click editing for a checkbox, please refer to the documentation and sample provided below

Reference:
https://blazor.syncfusion.com/documentation/datagrid/editing#update-boolean-column-value-with-a-single-click


Sample:
https://blazorplayground.syncfusion.com/embed/LXLfjPjFBxZbmKNS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please get back to us if you still face any issues regarding this.

Regards,
Prathap Senthil

[Sarah]

Hi,

Thank you for your answer

1-I want to change the font and font size of the menu that I have specified.

2-I used EllipsisWithTooltip. How can I display the following in the tooltip:

a. Change the font and font size

b. Change the align in the tooltip?

3. The cell text contains an enter(\n), but it is not displayed in the tooltip. How can I display the enter as well

[Prathap Senthil]

Based on your requirement to change the font and font size for the menu filter operator list, we suggest using the CSS customization provided below to achieve your goal.

<style>

        .e-grid-filter-menu .e-menu-parent.e-ul

        {

                    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; //here you can customize

                    font-size:small;

        }

</style>

Regarding your second query, we would like to clarify that when using the EllipsisWithTooltip feature, it defaults to displaying the field value as content. This is the default behavior. If you want to customize the tooltip, we recommend using the template feature to render the tooltip according to your requirements.

https://blazor.syncfusion.com/documentation/datagrid/cell#display-custom-tooltip-for-columns

[Sarah]

hello

Thank you for your reply

I have attached a source code. I want to use Syncfusion DataGrid component in this scenario.

Attachment: Home_2f23201f.zip

[Prathap Senthil]

Based on the information provided code and data structure, we would like to request some clarification to better understand your needs and ensure that we can implement the most effective solution for you.From the provided code, we notice that lstDataSource contains a collection of data, which is being used in conjunction with lstCol and lstUsers. However, we would appreciate more details regarding the relationships between these data sources.

1. Relationship between lstDataSource, lstCol, and lstUsers-Could you please clarify how lstDataSource is related to both lstCol and lstUsers? For instance, lstDataSource seems to be containing data for specific users and their corresponding properties, but we would like to understand the exact relationship between these lists.
2. Are you looking to establish a foreign key relationship between these data sources, or is there a specific behavior or data manipulation that needs to be implemented between them?

If you're aiming for foreign key column support with another data source, DataGrid does support this feature. You can refer to the following documentation for more
information:https://blazor.syncfusion.com/documentation/datagrid/foreignkey-column

[Sarah]

Hello and thank you for your reply

Sometimes I come across things that I have to display in the table structure (rows and columns). In this structure, the user can define a property and enter value for the property on another page.

PropertyTable:

PropertyId

PropertyName

PropertyValueTable:

PropertyId

UserId

Value

Next, a table where each row represents a user and each column represents a property whose value must be received. The number of properties and the number of users is not fixed.

The mentioned items were just an example that I cannot use Syncfusion DataGrid in such cases and I use html table whose code I have attached in the previous post.

[Prathap Senthil]

From query we understand that you are trying to dynamically generate columns based on user-defined properties and populate each cell with related data by cross-referencing different data sources. The use of complex columns or foreign key columns in the DataGrid may not be suitable for this specific case. Therefore, we suggest using the column template feature to achieve your requirements. Kindly refer to the code snippet and sample below for your reference.

<SfGrid TValue="UserIdNamedto" DataSource="lstUsers">

 

    <GridColumns>

        <GridColumn Field="@nameof(UserIdNamedto.Id)" Width="150"></GridColumn>

        <GridColumn Field="@nameof(UserIdNamedto.Name)"  Width="150" ></GridColumn>

        @foreach (var itemCol in lstCol.OrderBy(a => a.Id).ToList())

        {

            <GridColumn HeaderText="@(itemCol.Name)" Width="150">

 

                <Template>

                    @{

                        var data = context as UserIdNamedto;

                        <span>@lstDataSource.Where(a => a.UserId == data.Id && a.PropertyId == itemCol.Id).FirstOrDefault()?.PropertyValue</span>

                    }

                </Template>

            </GridColumn>

 

        }

    </GridColumns>

</SfGrid>

Sample: https://blazorplayground.syncfusion.com/embed/hjLejWMxfLBQToka?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference: https://blazor.syncfusion.com/documentation/datagrid/column-template

Note : The column template feature is primarily for display purposes. When using template columns, they are mainly intended for rendering custom content and may not provide built-in support for DataGrid actions like sorting, filtering, or editing.

[Sarah]

Hello, thank you for your reply

1-I want to see the following link, there is an error

https://blazorplayground.syncfusion.com/embed/hjLejWMxfLBQToka?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

2-"The use of complex columns or foreign key columns in the DataGrid may not be suitable for this specific case."

​

What is your suggestion?

[Prathap Senthil]

Query1:
We are unable to reproduce the problem. Please try using a different browser or clear the local cache and then run the sample again. Or we have attached a zip file containing a simple sample project for your reference

Query2:
Foreign key (FK) columns are primarily used to display related data from a single, predefined relationship between a primary and secondary data source. They require a static mapping where the foreign key value from the main data source is matched to a corresponding key in the related data source. However, in your scenario, the columns and their relationships are dynamic, changing based on user-defined properties or multiple data inputs. This dynamic nature makes FK columns unsuitable, as they cannot handle runtime configurations or cross-referencing multiple sources effectively.

Complex columns are designed to bind to nested properties within a single data source, providing a way to display hierarchical data. They rely on a predefined structure where all nested relationships are known at design time. Your scenario involves dynamically generating columns and customizing their data from unrelated or independent sources. So that complex column feature not supported for the your Scenario .

For further reference, we have attached the documentation below.

https://blazor.syncfusion.com/documentation/datagrid/foreignkey-column
https://blazor.syncfusion.com/documentation/datagrid/column-rendering#complex-data-generation

Attachment: DataGridColumnTemplate_f179343c.zip

[Sarah]

Hello

Thank you for your reply

I used your source and the problems were resolved in the first step. I am using Inline Editing. So that the user can edit the value. I used the code below but I did not get the result.

<SfGrid TValue="UserIdNamedto" DataSource="lstUsers"

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

>

    <GridEditSettings AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>

        <GridColumn Field="@nameof(UserIdNamedto.Id)" Width="150"></GridColumn>

        <GridColumn Field="@nameof(UserIdNamedto.Name)" Width="150"></GridColumn>

        @foreach (var itemCol in lstCol.OrderBy(a => a.Id).ToList())

        {

            <GridColumn HeaderText="@(itemCol.Name)" Width="150">

                <Template>

                    @{

                        var data = context as UserIdNamedto;

                        var ss = @lstDataSource.Where(a => a.UserId == data.Id && a.PropertyId == itemCol.Id).FirstOrDefault()?.PropertyValue;

                        <InputText @bind-Value="ss"></InputText>

                    }

                </Template>

            </GridColumn>

        }

    </GridColumns>

</SfGrid>

[Prathap Senthil]

As mentioned in previous updates, the column template feature is primarily designed for display purposes. Template columns are mainly intended for rendering custom content and may not support built-in DataGrid actions such as sorting, filtering, or editing. This is the default behavior of the grid.