Populate ComboBox/Autocomplete with a list of items in the Data Grid

[Alfred Smith]

Sorry if this is a dumb question I'm brand new to SyncFusion and its controls. So basically I have a DataGrid and in one of the columns I want to have either a Combo Box or an Auto Complete in there which should be bound to an  ObservableCollection/List. 

This is the code I have atm. I have two View Models one is for the Page (ShiftTemplatePageViewModel)and is for the individual items in the list itself (ShiftTemplateViewModel). When it runs it shows no items in the combo box

public sealed partial class ShiftTemplatePage : Page

{

    public ShiftTemplatePageViewModel ViewModel { get; set; }
}

public partial class ShiftTemplatePageViewModel : BaseViewModel

{

    private ShiftTemplateService ShiftTemplateService { get; set; }

    private WorkerService WorkerService { get; set; }
}

public partial class ShiftTemplateViewModel: DataViewModel

{

    [ObservableProperty]

    private string _id;

    [ObservableProperty]

    private string? _name;

    [ObservableProperty]

    private Worker _worker;

    [ObservableProperty]

    private Client _client;

    public ShiftTemplateViewModel() 

    {

        Id = Guid.NewGuid().ToString();

    }

}

    public ObservableCollection<ShiftTemplateViewModel> ShiftTemplates;

    public ObservableCollection<WorkerViewModel> Workers;

    public ObservableCollection<ClientViewModel> Clients;

    public ShiftTemplatePageViewModel()

    {      

        ShiftTemplates = new ObservableCollection<ShiftTemplateViewModel>();

        Workers = new ObservableCollection<WorkerViewModel>();

        Clients = new ObservableCollection<ClientViewModel>();

        ShiftTemplateService = new ShiftTemplateService(new RosterDBContext());

        WorkerService = new WorkerService(new RosterDBContext());

    }
}

ShiftTemplatePage:

<dataGrid:SfDataGrid

    x:Name="shiftTemplatesDataGrid"

    Grid.Row="2"

    Grid.ColumnSpan="2"

    AddNewRowPosition="Top"

    AllowEditing="True"

    AutoGenerateColumns="False"

    ItemsSource="{Binding Path=ShiftTemplates}">

    <dataGrid:SfDataGrid.Columns>

        <dataGrid:GridTextColumn HeaderText="Name" MappingName="ShiftTemplates.Name" />

        <dataGrid:GridTemplateColumn MappingName="ShiftTemplates.Worker.FullName">

            <dataGrid:GridTemplateColumn.CellTemplate>

                <DataTemplate>

                    <TextBlock Text="{Binding Path=Worker.FullName}" />

                </DataTemplate>

            </dataGrid:GridTemplateColumn.CellTemplate>

            <dataGrid:GridTemplateColumn.EditTemplate>

                <DataTemplate>

                    <ComboBox

                        DataContext="ShiftTemplateViewModel"

                        DisplayMemberPath="Name"

                        IsEditable="True"

                        ItemsSource="{Binding Path=Workers}"

                        SelectedValuePath="Name"

                        Text="{Binding FullName, Mode=TwoWay}" />

                    <!--

                    <Grid>

                        <editors:SfAutoComplete

                            x:Name="autoComplete"

                            Width="250"

                            DataContext="ShiftTemplateViewModel"

                            DisplayMemberPath="Worker.FullName"

                            ItemsSource="{Binding ViewModel.Workers}"

                            TextMemberPath="Worker.FullName" />

                    </Grid>

                    -->

                </DataTemplate>

            </dataGrid:GridTemplateColumn.EditTemplate>

        </dataGrid:GridTemplateColumn>

    </dataGrid:SfDataGrid.Columns>

</dataGrid:SfDataGrid>

[Rabina Murugan]

Hi Alfred Smith, 

 

Thank you for reaching out to us with your query about integrating a ComboBox or AutoComplete feature within a column of your DataGrid.

 

To address the issue you mentioned, where no items appear in the ComboBox, we've prepared a comprehensive example and a demonstration video.

 

This sample will guide you through setting up your DataGrid to bind a ComboBox to an ObservableCollection or a List, using a practical example with your ViewModels.

 

Kindly refer to the attached sample and video and let us know if you need any further assistance.

 

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

 

Regards,

Rabina

Attachment: Sample_and_Video_1e34b75a.zip

[Alfred Smith]

Sorry for the late reply. Thanks very much Rabina that example of yours solved my issue :)

BTW I think it would be a good idea if more of these examples were posted somewhere on the site for others to also read.

[Sweatha Bharathi]

Hi Alfred Smith, 



Thank you for your suggestion. We are glad your issue has been resolved. Please feel free to open a new ticket if you need any further assistance.

Regards,

Sweatha.B