This is a migrated thread and some comments may be shown as answers.

DropDownList not rendering data after v2.9 update using ObservableColection

2 Answers 167 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 31 Mar 2020, 02:50 PM

     I'm using EditorTemplates in my TelerikGrid to display drop down lists to the user.  I've been using ObservableCollections to gather the data from my API and populate the list which was working until I updated to v2.9.0 to take advantage of GridState.  

I've used Console.WriteLine to confirm that the ObservableCollection does in fact have the data, but when inspecting the <span> element in the browser, no options have been populated.  I thought perhaps my implementation of GridState had an effect; however, removing that resulted in no change in behavior.  The DefaultText renders correctly as well as any records that match an available option.  But the drop down list will not drop down when I click on it to display any options.  Here's an abbreviated version of my code:

 

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Class="smallerFont"
             Height="600px" RowHeight="50" PageSize="20"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow"
             OnRead=@ReadItems
             TotalCount=@Total
             OnUpdate=@UpdateItem
             OnEdit="@EditHandler"
             OnStateInit="@((GridStateEventArgs<ProjectView> args) => OnStateInit(args))">
    <GridColumns>
...
        <GridColumn Field=@nameof(ProjectView.Processor) Editable="true">
            <EditorTemplate>
                @{
                    <TelerikDropDownList DefaultText="Please Select" Data="@ProcessorList" TextField="Name" ValueField="Name" @bind-Value="(context as ProjectView).Processor" />
                }
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(ProjectView.JobStatus)" Editable="true" Filterable="false">
            <EditorTemplate>
                @{
                    <TelerikDropDownList DefaultText="Please Select" Data="@StatusList" TextField="JobStatus" ValueField="JobStatus" @bind-Value="(context as ProjectView).JobStatus" />
                }
            </EditorTemplate>
        </GridColumn>
...
</GridColumns>
...
</TelerikGrid>
 
@code {
 
    public ObservableCollection<ProjectView> GridData { get; set; } = new ObservableCollection<ProjectView>();
    public ObservableCollection<DdfCorsiProcessor> ProcessorList { get; set; } = new ObservableCollection<DdfCorsiProcessor>();
    public ObservableCollection<DdfJobStatus> StatusList { get; set; } = new ObservableCollection<DdfJobStatus>();
 
    public int Total { get; set; } = 0;
    string appStatus;
 
    private async Task EditHandler(GridCommandEventArgs args)
    {
        ODataClient client = new ODataClient(AppSetting.ODataURL);
        var batch = new ODataBatch(client);
        IEnumerable<DdfCorsiProcessor> processors = null;
        IEnumerable<DdfJobStatus> jobStatuses = null;
        if (ProcessorList.Count() == 0)
        {
            batch += async c => processors = await c.For<DdfCorsiProcessor>("Processors")
                .OrderBy("Name")
                .FindEntriesAsync();
        }
 
        if (StatusList.Count() == 0)
        {
            batch += async c => jobStatuses = await c.For<DdfJobStatus>("JobStatuses")
                .Filter(x => x.Brand == "Greenfield")
                .FindEntriesAsync();
        }
 
        if (ProcessorList.Count() == 0 || StatusList.Count() == 0)
        {
            await batch.ExecuteAsync();
            if (processors != null)
                foreach (var processor in processors)
                {
                    ProcessorList.Add(processor);
                }
 
            if (jobStatuses != null)
                foreach (var status in jobStatuses)
                {
                    StatusList.Add(status);
                }
 
            foreach (var processor in ProcessorList)
                Console.WriteLine(processor.Name);
        }
    }

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 31 Mar 2020, 03:59 PM

Hello Tyler,

Do you get any errors? The following articles explore the most common problems that can cause such behavior:

If following the steps there does not help, please use this sample as base so we can have a runnable reproducible of the component problem: https://docs.telerik.com/blazor-ui/components/grid/templates#edit-template. This code is not enough for me to run and observe a problem, so I can offer a more concrete answer.

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Accepted
Tyler
Top achievements
Rank 1
answered on 31 Mar 2020, 04:09 PM
I wasn't getting an error but the Javascript Interop file was pointing to the old version.  It's working now.  Thanks for your help!
Tags
DropDownList
Asked by
Tyler
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Tyler
Top achievements
Rank 1
Share this question
or