TelerikDropdownList not binding data even if datasource has data

Question

I am facing an issue when trying to bind data into blazor TelerikDropDownList.

In below code, i am fetching value to class object in .cs page. This class has data

Reasons = await PlanningDataService.GetChgReqReasonsAsync();//this is the master table data

Primary key table : tblReason

foreign key table : tblchangeRequest

 

below code is written in  razor page

<TelerikDropDownList class="widthproperty" Filterable="true" FilterOperator="@Telerik.Blazor.StringFilterOperator.Contains" ScrollMode="@Telerik.Blazor.DropDownScrollMode.Virtual" ItemHeight="30" PageSize="10" Id="ddlScopeDriver" Data="@Reasons" Width="200px" TextField="Reason" ValueField="ChgReqReasonId" @bind-Value="@changerequest.ChangeRequestReasonId">
                                    </TelerikDropDownList>

in above code , @bind-Value="@changerequest.ChangeRequestReasonId is the id column in foreign key table. 

eventhough datasource(both master and main table method returns matching values) has data, its not binding in dropdown. 

So please help me.