Wanna display dropdown text on Grid column

[Moshiur Rahman Shohel]

Hi

I have two queries

1. I want to display dropdown text instead showing Id. grid column's bind-value is integer, but the display text is string. But I wanna show that display text on gridcolumn. I tried it in both "EditTemplete" and "Template", but in both case its always display Id rather show display text. here is my sample code        

<GridColumn Field="@nameof(LocationDto.ParentLocation)" Width="120" HeaderText="Parent Location">

                    <EditTemplate>

                        @{ var parent = context as LocationDto;}

                        <SfDropDownList ID="ParentLocation" @bind-Value="parent.ParentLocation" TItem="LocationDto"

                                        TValue="Int32?" DataSource="@productLocations">

                            <DropDownListFieldSettings Value="@nameof(LocationDto.Id)" Text="@nameof(LocationDto.LocationName)"></DropDownListFieldSettings>

                        </SfDropDownList>

                    </EditTemplate>

</GridColumn>

2. I wanna show hidden field (column visible = "false") on edit dialog

Advance thanks for your support

Shohwl

[Renjith Singh Rajendran]

Hi Moshiur,

Greetings from Syncfusion support.

Query : I want to display dropdown text instead showing Id. grid column's bind-value is integer, but the display text is string.

We suspect that you might be expecting foreign key column behavior in grid. If so, then we suggest you to refer the below documentation on more details on ForeignKey column binding support in grid.

https://blazor.syncfusion.com/documentation/datagrid/columns#foreign-key-column

https://blazor.syncfusion.com/demos/datagrid/foreign-key-column?theme=fluent

Query : 2. I wanna show hidden field (column visible = "false") on edit dialog

Based on this scenario, we suggest you to set the Width property as 0 instead of setting Visible false for the columns. Setting Width as 0 will also hide the column from the grid view, but will display column in edit form.

 

<GridColumn Field=”Hours” Width="0" TextAlign="TextAlign.Right" ...></GridColumn>

 

Or else you can use the Dialog Template feature of Grid. We have already documented this topic. Please refer the below documentation for more details.

https://blazor.syncfusion.com/documentation/datagrid/how-to/show-or-hide-columns-in-dialog-editing

Please get back to us if you need further assistance.

Regards,

Renjith R

[Moshiur Rahman Shohel]

Hi Renjith

Thank you for your reply. for the query 01, I used "GridForeignColumn". here is my sample code. But now I got NullReferenceException.

RowHeight="25" Toolbar="@(new List() { "Add" })">

Mode="@EditMode.Normal">

ForeignKeyValue="@nameof(ProductColorDto.ColorName)"

ValidationRules="@(new ValidationRules{ Required=true})"

ForeignDataSource="@Colors" Width="150">

@code {

[Parameter] public ProductDto product { get; set; } = new();

SfGrid sfGridVariations { get; set; }

public List Colors { get; set; } = new List();

protected override async Task OnAfterRenderAsync(bool firstRender)

{

if (firstRender)

{

Colors = (await commonService.GetProductColors()).ToList();

Sizes = (await commonService.GetProductSizes()).ToList();

this.StateHasChanged();

}

}

}

Parent and child object

public class ProductVariationDto

    {

        [Key]

        public int Id { get; set; }

        public bool IsNew { get; set; } = false;

        public string? ProductCode { get; set; } = null!;

        [Display(Name = "Image")]

        [DataType(DataType.Upload)]

        public string? ImageUrl { get; set; }

        [Display(Name = "Color")]

        [DataType("DropDownList")]

        public int? ColorId { get; set; } = null;

}

public class ProductColorDto

    {

        [Key]

        public int Id { get; set; }

        [Required]

        [Display(Name = "Color")]

        [DataType(DataType.Text)]

public string ColorName { get; set; } = null!;

}

Here is the error details

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

Unhandled exception rendering component: Object reference not set to an instance of an object.

System.NullReferenceException: Object reference not set to an instance of an object.

at Syncfusion.Blazor.Data.QueryableOperation.GetColumnType[ProductColorDto](IQueryable`1 dataSource, String filterString, Type type)

at Syncfusion.Blazor.Data.QueryableOperation.PredicateBuilder[ProductColorDto](IQueryable`1 dataSource, List`1 whereFilter, String condition, ParameterExpression paramExpression, Type type)

at Syncfusion.Blazor.Data.QueryableOperation.PerformFiltering[ProductColorDto](IQueryable`1 dataSource, List`1 whereFilter, String condition)

at Syncfusion.Blazor.DataOperations.PerformFiltering[ProductColorDto](IEnumerable`1 dataSource, List`1 whereFilter, String condition)

at Syncfusion.Blazor.Grids.GridForeignColumn`1[[POS.Shared.Models.Dto.ProductColorDto, POS.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetForeignkeyFilteredData(IEnumerable`1 data, List`1 filterQuery)

at Syncfusion.Blazor.Grids.Internal.GridUtils.GetForeignData(GridColumn column, Object data, Object fkData)

Thanks and regards

Shohel

[Renjith Singh Rajendran]

Hi Moshiur,

We analyzed your shared codes, in which we could not find any other field apart from ColorName in ProductColorDto model. When using foreign key feature, Grid will map the exact same field values of Field and ForeignKeyField based on the DataSource provided for SfGrid and ForeignDataSource to display the value of ForeignKeyValue. To display the ForeignKeyValue in grid column, it is a must to have same exact values to perform proper mapping of Field and ForeignKeyField.

So we suggest you to ensure to contain exact same values in both the datasources which you are using in SfGrid and GridForeignColumn to display foreign key column in grid. This is the default behavior of foreign key column feature.

Also, if you are having different Field names for the GridForeignColumn Field property and ForeignKey mapping Field, then it is must to define ForeignKeyField. In the documentation, both the GridColumn Field name and FK mapping field name are same(EmployeeID), so at this case there is no need for using ForeignKeyField property. If you are having different FK mapping field name, then we suggest you to ensure to set ForeignKeyField property for GridForeignColumn.

Please refer our documentations and check this from your side and get back to us with the details if you need further assistance.

References :

https://blazor.syncfusion.com/documentation/datagrid/columns/#foreign-key-column

https://blazor.syncfusion.com/demos/datagrid/foreign-key-column?theme=bootstrap4

Regards,

Renjith R

[Moshiur Rahman Shohel]

Thank you Renjith. It was " ForeignKeyField "

Thank you

[Renjith Singh Rajendran]

Hi Moshiur,

Thanks for your update. Please get back to us if you need further assistance.

Regards,

Renjith R