How to put a multicolumn drop down inside a datagrid

[chris johansson]

Hello, I would like to have a datagrid which instead of having a column type of dropdownedit. I want a multicolumn combo box inside the data grid.

So basically something like this, where here is a mulitcolumn combo box.

<SfComboBox TValue="string" TItem="Product" PopupWidth="700px" DataSource="@ProductsList" PopupHeight="400px" CssClass="e-multi-column" Placeholder="Select a Product">

        <ComboBoxTemplates TItem="Product">

            <HeaderTemplate>

                <table><tr><th class="e-text-center">Product ID</th><th width="240px">Product Name</th><th>Unit Price</th><th>Units In Stock</th><th>Units On Order</th></tr></table>

            </HeaderTemplate>

            <ItemTemplate>

                <table><tbody><tr><td class="e-text-center">@((context as Product).ProductID)</td><td width="240px">@((context as Product).ProductName)</td><td>@((context as Product).UnitPrice)</td><td>@((context as Product).UnitsInStock)</td><td>@((context as Product).UnitsOnOrder)</td></tr> </tbody></table>

            </ItemTemplate>

        </ComboBoxTemplates>

        <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>

    </SfComboBox>

but inside my grid..i want to put the mulitcolumn combo box inside as a column. is this possible?

 <SfGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true" AllowReordering="true" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel", "ColumnChooser" })" Height="315">

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>

        <GridColumns>

  <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>

     </GridColumns>

    </SfGrid>

I 

[Renjith Singh Rajendran]

Hi Chris, 

Greetings from Syncfusion support. 

Query : which instead of having a column type of dropdownedit. I want a multicolumn combo box inside the data grid. 

We can achieve this requirement by using EditTemplate feature of Grid. We suggest you to refer the below documentation, to render a custom component(ComboBox) in Grid’s edit form. 

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

In the above documentation we have rendered a SfAutoComplete component in the Edit form of Grid. You can replace the SfAutoComplete with your SfComboBox.  

Also ensure to set the ID property(same as Field value) and @bind-Value as like we have done in the documentation for SfAutoComplete to update values in Grid. 

Query : but inside my grid..i want to put the mulitcolumn combo box inside as a column. is this possible? 

And if you want to render a SfComboBox in Grid column, then we suggest you to use the Column Template feature of Grid. Please refer the below documentation for more details regarding this, 

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

In the above documentation, instead of img tag you can render your own combo box. 

Online demo : https://blazor.syncfusion.com/demos/datagrid/column-template?theme=bootstrap4 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[chris johansson]

Hello thank you, i was able to get the following result by doing this below.  I'm also wondering how can I sort and filter the sub SfComboBox on each column. So say if i have 3 columns... the main one that i set productName and  AllowFiltering="true" only filters that one column.  Is it possible to filter and sort by more than one?

               

                   

                       

                           

                               

Product ID	Product Name	Unit Price	Units In Stock	Units On Order

                           

                           

                               

@((context2 as Product).ProductID)

@((context2 as Product).Products)

@((context2 as Product).UnitPrice)

@((context2 as Product).UnitsInStock)

@((context2 as Product).UnitsOnOrder)

                           

                       

                       

                   

                 

 

 

               

                   

                          

               

                   

                       

                           

                               

                 

 

                          

[Renjith Singh Rajendran]

Hi Chris,  

Thanks for your update. 

We suggest to use the ‘Predicate’ of DataManager, to filter the items based on multiple fields. Refer to the code below,  

public async Task onFiltering(FilteringEventArgs args)  

    {  

        args.PreventDefaultAction = true;  

        var pre = new WhereFilter();  

        var predicate = new List<WhereFilter>();  

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true,IgnoreCase=true });  

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });  

        pre = WhereFilter.Or(predicate);  

        query = new Query().Where(pre);  

        await this.comboboxObj.Filter(Country, query);  

    }  

 

Please download the sample from the link below, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1800119749  

Please get back to us if you need further assistance. 

Regards,  

Renjith Singh Rajendran 

[chris johansson]

Ok thanks. The only thing is the combo box is inside a grid column. so its a bit different .. i have the following code below.  One thing i noticed when I clear out the filter it doesn't load all the items back in the list to choose from again. 

Also is there any way to actually sort by the column by clicking on the header? like reversing the list for example

 

       

       

       

       

       

           

           

           

           

           

           

               

                   

                       

                       

                           

                               

Name	Position

                           

                           

                               

@((context2 as Countries).Name)

@((context2 as Countries).Job)

                           

                       

                       

                   

     

        

           

       

   

[chris johansson]

    <SfGrid @ref="GridInstance" DataSource="@Orders" AllowPaging="true" AllowFiltering="true" AllowReordering="true" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel", "ColumnChooser" })" Height="315">

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>

        <GridEvents CellSelected="CellSelectHandler" TValue="Order"></GridEvents>

        <GridColumns>

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>

            <GridColumn Field=@nameof(Order.Country) EditType="EditType.DropDownEdit" HeaderText="Products" Width="150">

                <EditTemplate>

                    <SfComboBox @ref="comboboxObj" id="Country" TValue="string" TItem="Countries" @bind-Value="@((context as Order).Country)" Placeholder="e.g. Australia" CssClass="e-multi-column" DataSource="@Country" AllowFiltering="true" Query="@query" PopupWidth="700px">

                        <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>

                        <ComboBoxTemplates TItem="Countries">

                            <HeaderTemplate>

                                <table><tr><th class="e-text-center">Name</th><th width="240px">Position</th></tr></table>

                            </HeaderTemplate>

                            <ItemTemplate Context="context2">

                                <table><tbody><tr><td class="e-text-center">@((context2 as Countries).Name)</td><td width="240px">@((context2 as Countries).Job)</td></tr> </tbody></table>

                            </ItemTemplate>

                        </ComboBoxTemplates>

                        <ComboBoxEvents TValue="string" Filtering="onFiltering"></ComboBoxEvents>

                    </SfComboBox>

         </EditTemplate>

        

            </GridColumn>

        </GridColumns>

    </SfGrid>

[Renjith Singh Rajendran]

Hi Chris, 

Thanks for your update. 

Query 1 : One thing i noticed when I clear out the filter it doesn't load all the items back in the list to choose from again.   

We need to handle the case where the all the text in the filter is cleared in the filtering event. You  need to set the initial query to load all the data, if the arg.Text is empty. Please refer the code below, 

 

   public async Task onFiltering(FilteringEventArgs args)  

    {  

        args.PreventDefaultAction = true;  

        var pre = new WhereFilter();  

        var predicate = new List<WhereFilter>();  

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });  

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });  

        pre = WhereFilter.Or(predicate);  

        query = args.Text == "" ? new Query() : new Query().Where(pre);  

        await this.comboboxObj.Filter(Country, query);  

    }  

 

Query 2 : Also is there any way to actually sort by the column by clicking on the header? like reversing the list for example  

We have SortOrder property in the combobox control, but it can be set only during the initial render. Please refer the code below, 

 

                <SfComboBox @ref="comboboxObj" id="Country" SortOrder="SortOrder.Descending" TValue="string" TItem="Countries" @bind-Value="@((context as Order).Country)" Placeholder="e.g. Australia" CssClass="e-multi-column" DataSource="@Country" AllowFiltering="true" Query="@query" PopupWidth="700px">   

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

               </SfComboBox>  

 

Altering the sort order is not supported when the popup is opened in the combobox control. 

Regards, 

Renjith Singh Rajendran 

[chris johansson]

Ok thanks.  I tried that filtering and it didn't quite do what as expected.  It still doesn't seem to refresh the list when i delete/backspace the combo box.  Also there is an 'X" to clear everything out, how can that be triggered to refresh. The filter also stays and not clears to show all when i click around to other drop downs .

If I put in 'zzzz' for example and delete one at a time until theres nothing, i don't see it re populated.

Also sometimes if I select a value in the grid like 'Denmark" and click somewhere else, it doesn't always populate the value behind. It stays as Denmark, even typing junk will stay there and i can update it.

I attached image and code.

Attachment: FetchData_ac2e73cd.zip

[Sevvandhi Nagulan]

Hi Chris, 

We checked the reported requirement. You can refresh the DataSource using the public filter method in the ValueChange and OnOpen event. Please find the code snippet and test sample below for reference.  

  

<SfComboBox @ref="comboboxObj" TValue="string" TItem="Countries" Placeholder="e.g. Australia" CssClass="e-multi-column" DataSource="@Country" @bind-Value="CountryValue" AllowFiltering="true" Query="@query"> 

    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings> 

    <ComboBoxTemplates TItem="Countries"> 

        <HeaderTemplate> 

            <table><tr><th class="e-text-center">Name</th><th width="240px">Position</th></tr></table> 

        </HeaderTemplate> 

        <ItemTemplate> 

            <table><tbody><tr><td class="e-text-center">@((context as Countries).Name)</td><td width="240px">@((context as Countries).Job)</td></tr> </tbody></table> 

        </ItemTemplate> 

    </ComboBoxTemplates> 

    <ComboBoxEvents TValue="string" OnOpen="onOpen" ValueChange="onValueChange" Filtering="onFiltering"></ComboBoxEvents> 

</SfComboBox> 

 

public void onValueChange(ChangeEventArgs<string> args) 

    { 

        filter(); 

    } 

    public async Task onOpen(BeforeOpenEventArgs args) 

    { 

        filter(); 

    } 

 

    public async Task filter() 

    { 

        if (CountryValue == null) 

        { 

            query = new Query(); 

        } 

        await this.comboboxObj.Filter(Country, query); 

    } 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/290149/ze/BlazorApp1445278751 

Kindly check with the above sample. Please get back us if you need further assistance.  

Regards, 

Sevvandhi N 

[chris johansson]

I can't access the sample file, it says access denied.  i'm not sure how you defined countryvalue... 

Access Denied

You don’t have permission to access this file. The reason may be:

• The incident associated with this file is not tied to the account you used to log in. To Logout use this link.
• Your enterprise portal admin has not allowed you to access other portal users’ incidents. Ask admin to change the support visibility in their Syncfusion profile.

[Sevvandhi Nagulan]

Hi Chris, 

Sorry for the inconvenience caused. 

Please find the sample below, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1837653366 

Regards, 

Sevvandhi N 

[chris johansson]

I was able to open the project. I updated my project to include those functions and set the bind value to countryValue.

It just crashes though, i run it and click in the combo box and it freezes the browser... 

Also my combo box is inside a datagrid so the binding is different.

Again heres my updated code attached.

Attachment: FetchData_b931df18.zip

[Jeevakanth Palaniappan]

Hi Chris, 

We have modified the sample based on your scenario. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample724337545 

 

We have added/changed the below highlighted codes in the shared code. Please refer the codes below, 

 

<EditTemplate>      "@((context as Order).Country)"      <SfComboBox @ref="comboboxObj" id="Country" TValue="string" TItem="Countries" @bind-Value="(context as Order).Country" ...>             ...     </SfComboBox></EditTemplate>

 

 

public void onValueChange(ChangeEventArgs<string> args) 

{ 

    CountryValue = comboboxObj.Value; 

    filter(); 

} 

public async Task onOpen(BeforeOpenEventArgs args) 

{ 

    CountryValue = comboboxObj.Value; 

    filter(); 

} 

 

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP. 

[Stefan Limpert]

Hello there,

i have a similar issue with combobox in an editable grid.

I have 2 classes: one for units and the other for relations to an item class

public class ItemUnitModel

{

  public int Id { get; set; }

  public virtual int ItemId { get; set; }

  public virtual int? UnitId { get; set; }

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

}

public class UnitModel

{

  public int Id { get; set; }

  public string Description { get; set; }

}

I want to show a list of ItemUnitModels in a datagrid with UnitId as Combobox in editmode.

Based on your examples i create this:

<SfGrid DataSource="@ItemUnitModelList" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="false" Width="500px">

 <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>

 <GridColumns>

  <GridColumn Field=@nameof(ItemUnitModel.Id) HeaderText="Id" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="TextAlign.Right" Width="40"></GridColumn>

  <GridColumn Field=@nameof(ItemUnitModel.UnitId) HeaderText="Unit" ValidationRules="@(new ValidationRules{ Required=true})" Width="150">

    <EditTemplate>

      <SfComboBox TValue="int?" TItem="UnitModel" @bind-Value="(context as ItemUnitModel).UnitId" DataSource="@UnitModelList">

      <ComboBoxFieldSettings Text="Description" Value="Id"/>

    </SfComboBox>

  </EditTemplate>

  </GridColumn>

  <GridColumn Field=@nameof(ItemUnitModel.IsStandard) EditType="EditType.BooleanEdit" DisplayAsCheckBox="true" TextAlign="TextAlign.Right" Width="40"></GridColumn>

  </GridColumns>

</SfGrid>

the Result is this

only in edit mode i see the related description based on unitId. in normal mode its just the id as number wich is not an option for me.

if i try the same code of combobox outside the data grid it works perfect. What do i miss?

Regards

Stefan

[Monisha Saravanan]

Hi Stephen, 

Greetings from Syncfusion support. 

We have analyzed your query and we suspect that you need to bind Description column in the DataGrid based on ID column. We suggest  you to achieve your requirement by using the foreignkey column feature of DataGrid. By using Forignkey column  we can display data from another table when both the table has common foreign key relation (field) between them.  

Kindly refer the attached UG  for your reference. 

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

Kindly get back to us if you need further assistance. 

Regards, 

Monisha 

[Stefan Limpert]

Hi Monisha,

thats exactly what i need. Great! And no need of additional combobox. like a charm.

Thanks for this hint.

Problem solved.

Regards

Stefan

[Monisha Saravanan]

Hi Stephan, 

Thanks for the Update. 

We are glad to hear that your query has been resolved. Kindly get back to us if you need further assistance. 

Regards, 

Monisha