Is it possible to create autocomplete option for dropdown in sfGrid?

[Harvey Myers]

The following column presents a dropdown list. This is in an invoice detail, in-line edit. 

I want to be able to have autocomplete, so they can type first few characters and avoid mouse. 

        <GridForeignColumn Field=@nameof(OrderItem.VendorId)

                           HeaderText="Vendor"

                           EditType="EditType.DropDownEdit"

                           ForeignDataSource="listvendors"

                           Width="380"

                           ForeignKeyField="Id"

                           ForeignKeyValue="ListName">

        </GridForeignColumn>

My first post here. thanks. 

[Renjith Singh Rajendran]

Hi Harvey, 

Greetings from Syncfusion support. 

We suggest you to use the EditTemplate feature of Grid. With this you can render any custom component/element, when opening the edit form in Grid. In the below documentation, we have showed an example for rendering a SfAutoComplete component  inside the EditTemplate.  

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

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Harvey Myers]

Thank your, Renjith, 

I applied your example and am almost there. I wish to understand better. 

This replaces a working DropDown list because the user wants to be able to type and not use the mouse. 

 My data comes thru Dapper, not EF, 

You guys helped me engineer the data access for this control, including the ForeignKey columns. 

which work great, but should my edittemplate be in the foreignkey column type or just regular. 

Now the following error comes from the code. 

For the sake of formatting, image of the code, with text code pasted below. 

Also included the next field Vendor which will be similarly altered. If need be happy to send the project

database is available online. 

        @*<GridForeignColumn Field=@nameof(OrderItem.ServiceTypeId)

        HeaderText="Service"

        EditType="EditType.DefaultEdit"

        ForeignDataSource="listservicetypes" Width="300"

        ForeignKeyField="Id"

        ForeignKeyValue="ServiceType">*@

        <GridColumn Field=@nameof(OrderItem.ServiceTypeId)

                    HeaderText="ItemID"

                    TextAlign="TextAlign.Right"

                    Width="140">

        <EditTemplate>

            @{

                // produce autoComplete lookup for Service Type 

                <SfAutoComplete ID="ServiceTypeId" TItem="ListServiceType" TValue="int" @bind-Value="@((context as ListServiceType).Id)" DataSource="@listservicetypes">

                    <AutoCompleteFieldSettings Value="ServiceTypeId"></AutoCompleteFieldSettings>

                </SfAutoComplete>

            }

        </EditTemplate>

        </GridColumn>

        @*</GridForeignColumn>*@

        @*This column will also be AutoComplete in the same fashion*@

        <GridForeignColumn Field=@nameof(OrderItem.VendorId)

                           HeaderText="Vendor"

                           EditType="EditType.DropDownEdit"

                           ForeignDataSource="listvendors"

                           Width="380"

                           ForeignKeyField="Id"

                           ForeignKeyValue="ListName">

        </GridForeignColumn>

[Vignesh Natarajan]

Hi Harvey,  

 

Thanks for the update.  

 

Query: “ but should my edittemplate be in the foreignkey column type or just regular. Now the following error comes from the code.” 

 

We have analyzed your query and we understand that you are facing trouble when using Autocomplete control inside the edit template for Grid Column. And also you want to Grid column to have ForeignKey behavior. We suggest you to render the EditTemplate with ComboBox Control instead of AutoComplete control for GridForeignColumn itself. Because you have Grid Column with ForeignKey behavior, AutoComplete control does not have Text and Value pair support. So we have rendered ComboBox control where you can type the value without mouse.   

 

Refer the below code example. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridForeignColumn Field=@nameof(Order.VendorId) HeaderText="Vendor Name" ForeignKeyValue="ListName" ForeignKeyField="Id" ForeignDataSource="@listvendors" Width="150"> 

            <EditTemplate> 

                <SfComboBox ID="VendorId" TItem="EmployeeData" TValue="int?" @bind-Value="@((context as Order).VendorId)" DataSource="@listvendors"> 

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

                </SfComboBox> 

            </EditTemplate> 

        </GridForeignColumn> 

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

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

    </GridColumns> 

</SfGrid> 

 

 

Note: Similarly you can modify the other GridForeignColumn.  

 

Kindly download the sample from below which we have prepared using above solution.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161382/ze/BlazorApp11478275058  

 

After referring the sample, if you are still facing the issue. Kindly get back to us with issue reproducible sample to validate the reported query at our end and provide solution as early as possible.   

 

Regards, 

Vignesh Natarajan 

[Harvey Myers]

I've followed your code, best I can. Getting null value errors though

Is there a way I could send the project to you. I have a zip that's slimmed down

the database is online so it's a quick setup.

[Vignesh Natarajan]

Hi Harvey,  

 

Query: “I've followed your code, best I can. Getting null value errors though Is there a way I could send the project to you. I have a zip that's slimmed down” 

 

Yes, you can send your project ZIP file (lesser than 30MB) by uploading it in the forum while replying. Refer the below screenshot for your reference.    

 

 

 

Please get back to us if you have any queries on uploading the sample. Once the issue reproducible sample is provided, We will validate the reported issue at our end and update you the further details.   

 

Regards, 

Vignesh Natarajan 

[Harvey Myers]

Ok, my project is attached. 

he database is online

Use this login, login link is on About page. 

[email protected]

$Ync7071

The Control is on any record of Open Orders

The 2nd tab of the Open Orders screen. 

If attempt to add or edit, the VENDOR field bombs on Null Value I can't find. 

Apologies that it's a messy project with lots of controls. My first attempt at Blazor. 

Thank You 

Attachment: SurmiteBlazorWeb_20210114_1047EST_2b87f170.zip

[Vignesh Natarajan]

Hi Harvey,  

 

Thanks for sharing the isue reproducible sample.  

 

Query: “If attempt to add or edit, the VENDOR field bombs on Null Value I can't find. ” 

 

We have analyzed the reported issue and we found that you have defined the Text property of ComboBoxFieldSettings wrongly. Text property of ComboBoxFieldSettings is different from GridForeignColumn ForeignKeyValue. Hence the reported issue occurred.  Refer the below modified code example.  

 

<GridForeignColumn Field=@nameof(OrderItem.VendorId) HeaderText="Vendor Name" ForeignKeyValue="ListName" ForeignKeyField="Id" ForeignDataSource="@listvendors" Width="150"> 

           <EditTemplate> 

               <SfComboBox ID="VendorId" TItem="ListVendor" TValue="int?" @bind-Value="@((context as OrderItem).VendorId)" DataSource="@listvendors"> 

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

               </SfComboBox> 

           </EditTemplate> 

       </GridForeignColumn> 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Harvey Myers]

Thanks for the help, still an issue though... The reason I changed it from ListName to CompanyName is simply that I want to show the CompanyName column, not the ListName column. I changed both occurrences from ListName to CompanyName and it started causing the null error again. 

When I pasted in your response, it did work, partly. Investigating further I found that the CompanyName was returning null in my query. I've corrected it to return only Id and CompanyName. 

That compiled and worked, My SQL returns CompanyName in alphabetical order but when i type in the field, It doesn't locate. 

[Vignesh Natarajan]

Hi Harvey,  

 

Thanks for the update 

 

Query: “My SQL returns CompanyName in alphabetical order but when i type in the field, It doesn't locate.” 

 

We suggest you to achieve your requirement by enabling the AllowFiltering property of SfComboBox control. Refer the below code example.  

 

<GridForeignColumn Field=@nameof(OrderItem.VendorId) HeaderText="Vendor Name" ForeignKeyValue="CompanyName" ForeignKeyField="Id" ForeignDataSource="@listvendors" Width="150"> 

            <EditTemplate> 

                <SfComboBox ID="VendorId" TItem="ListVendor" TValue="int?" @bind-Value="@((context as OrderItem).VendorId)" AllowFiltering="true" DataSource="@listvendors"> 

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

                </SfComboBox> 

            </EditTemplate> 

        </GridForeignColumn> 

 

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/combobox/filtering/  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan