No data in AutoComplete for Filter in Grid, switching AutoComplete off

[Andrzej]

Hello,

1. I have a filtering defined for Data Grid as FilterType.Menu. The Grid is bounded with database via WebApiAdaptor. When I enter a character in the filter dialog then it asks the adaptor for data via [HTTP_GET] and I return a variable of type IQueryable<TblCustomer> containing some datasets. The AutoComplete displays an empty list instead. What should I return to make it showing list of proposals?
PS. I have no special definitions of <SfAutoComplete>

razor page:

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

WebApiAdaptor:

[HttpGet]

public object Get()

{

 ....

 IQueryable<TblCustomer> dataSource = dbAccessLayer.GetAllCustomers();

 ....

 int countFiltered = dataSource.Count();

 if (queryString.Keys.Contains("$inlinecount"))

      return new { Items = dataSource, Count = countFiltered };

 else

    return dataSource; // return type for SfAutoComplete (query without $inlinecount) - not really used because of faulty action in AutoComplete anyway

}

2. For some grid the database is rather big and I'd like to keep the mode of FilterType.Menu but remove the functionality of AutoComplete. Is there a way to disable it. The only way I've found is to return null from from WebApiAdaptor, but then it displays a message "No data to be displayed". I hope there is a better way?

Best regards

[Vignesh Natarajan]

Hi Andrzej,  

 

Thanks for contacting Syncfusion forum.  

 

Query: “The AutoComplete displays an empty list instead. What should I return to make it showing list of proposals?” 

 

As per your suggestion we have prepared a sample with DataGrid and WebAPI adaptor using our 18.1.0.43 version. We are not able to reproduce the reported issue at our end. Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/153197/ze/WebAPI1272128342  

 

After referring the sample, if you are still facing the issue. Kindly ensure the reported issue by converting the IQueryable list to List of objects or share the following details. 

 

1. Kindly bind the OnActionFailure event to Grid and share the error details to us.
2. If possible try to reproduce the reported issue in provided sample.
3. Also ensure that you are facing this issue only when Iqueryable data.    

 

Query: “Is there a way to disable it” 

 

We suggest you to achieve your requirement using FilterTemplate feature of Grid. Using Filter Template you can render custom components inside the Grid filter Menu. Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/filtering/?no-cache=1#custom-component-in-filter-menu  

 

Kindly get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Andrzej]

Hello,
I don't know yet why the auto-complete list is empty, however I get no hitting of OnActionFailure.

But about the switching AutoComplete off: Your suggestion was to use a template. There is a problem because I don't have a DataSource for this grid, I use SfDataManager instead.
And I also have 45 possible columns in the grid. Should I define the template for each of them separately?

I hoped there is a simple way just to disable autocomplete for the whole grid or even the whole page...

Best regards

Andrzej

[Renjith Singh Rajendran]

Hi Andrzej, 

Thanks for your update. 

Query 1 : I don't know yet why the auto-complete list is empty, 

We suggest you to check with our previously attached sample and if you still face difficulties then we need more details to further proceed on this scenario. Kindly get back to us with the following details for better assistance,  

1. Share a issue reproducing sample or if possible reproduce the reported issue with our previously attached sample and share with us for further analysis.
2. Share your complete Grid code and model class codes.
3. Also ensure that you are facing this issue only when using IQueryable data to Grid by binding a simple List data to Grid.
4. Share the video demo showing the problem you are facing.

  

Query 2 : I hoped there is a simple way just to disable autocomplete for the whole grid or even the whole page... 

Based on your requirement, we suggest you to add the below style to your application to disable the AutoComplete in the Filter menu of Grid. Please add the below styles to your application. 

@using Syncfusion.Blazor.Grids 

 

<style> 

    .e-grid .e-flmenu .e-autocomplete { 

        opacity: .5; 

        pointer-events: none; 

        touch-action: none; 

    } 

</style> 

 

<SfGrid @ref="Grid" TValue="Orders" AllowFiltering="true" ... AllowPaging="true">  

    ... 

</SfGrid> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Andrzej]

Hello, thanks for a suggestion about disabling the auto-complete, but unfortunately it doesn't work. When I add this <style> then I cannot get into a text field and enter anything.

I attach a complete sample showing following problems:

1. When the first item in some column is NULL then the filter-dialog doesn't open

2. After entering text in filter-dialog I return a proper IQueryable<Order> from [HttpGet] in class DefaultController but the auto-complete list is empty

3. Index.razor contains a suggested block <style>.e-grid .e-flmenu .e-autocomplete...</style> but it is commented now because it doesn't work (as mentioned above).

ActionFailureHandler is not triggered in any situation.

Only the browser-debugger shows a following error in case of point 1:

grids-9388dc.min.js:1 Uncaught TypeError: Cannot read property '0' of undefined

    at e.dropSelectedVal (grids-9388dc.min.js:1)

    at e.renderOperatorUI (grids-9388dc.min.js:1)

    at e.renderOperatorUI (grids-9388dc.min.js:1)

    at e.renderFilterUI (grids-9388dc.min.js:1)

    at e.dialogCreated (grids-9388dc.min.js:1)

    at e.blazorCallback (syncfusion-blazor.min.js:1)

    at e.notify (syncfusion-blazor.min.js:1)

    at t.e.trigger (syncfusion-blazor.min.js:1)

    at t.r.appendTo (syncfusion-blazor.min.js:1)

    at e.renderDlgContent (grids-9388dc.min.js:1)

Please check what could I improve to get it working.
Best regards

Andrzej

Attachment: EFGridFilter_426f6d1f.rar

[Renjith Singh Rajendran]

Hi Andrzej, 

Thanks for the sample. We have modified the sample by including the solution for the below three queries, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/EFGridFilter_426f6d1f-1647695216 

Query 1 : When the first item in some column is NULL then the filter-dialog doesn't open 

We would like to inform you that, based on the type of the column only the Filter Menu dialog will be opened. By default, the column type will be fetched based on the first cell value of column. If the first cell is NULL, then it is a must to set the column type for the column to open the Filter Dialog.  

Documentation : https://blazor.syncfusion.com/documentation/datagrid/columns/?no-cache=1#column-type 

Please set the column type by using the code below, 

 

        <GridColumn Field="OrderDate" HeaderText="OrderDate" Type="ColumnType.Date" Width="90"></GridColumn> 

        <GridColumn Field="ShipRegion" HeaderText="ShipRegion" Type="ColumnType.String" Width="90"></GridColumn> 

Query 2 : After entering text in filter-dialog I return a proper IQueryable<Order> from [HttpGet] in class DefaultController but the auto-complete list is empty 

This occurred because of the camel case problem (first letter of the word will be converted to small case) in your application. Normally, ASP.NET Core 1.0+ framework has camel casing issues while serializing the JSON Object. Please use the below codes in Startup.cs file to overcome that casing issue.   

  

In the below code, we have called the ContractResolver options under the Startup.cs file to avoid camel casing conversion during the serialization process. The is related to ASP.NET Core specifics and we suggest refer to the following article which describes how to overcome a similar issues.  

Reference Link: https://dotnetcoretutorials.com/2017/01/02/pascalcase-vs-camelcase-asp-net-core/ 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/data-binding/#troubleshoot-grid-renders-without-data-even-though-server-returns-with-correct-data 

 

Please use the code below,  

  

[Startup.cs]  

  

            public void ConfigureServices(IServiceCollection services) 

            { 

                ... 

               services.AddSyncfusionBlazor(); 

                services.AddControllers().AddNewtonsoftJson(options => 

                { 

                    options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 

                }); 

                services.AddSingleton<OrderDataAccessLayer>(); 

            } 

  

   

Query 3 : Index.razor contains a suggested block <style>.e-grid .e-flmenu .e-autocomplete...</style> but it is commented now because it doesn't work (as mentioned above). 

We understood that you don’t want the pop up of the AutoComplete to show when typing on the AutoComplete text box. Then we suggest you to add the below styles in your application to achieve this requirement. The below style will hide the popup element of AutoComplete component.  

Please add the below style in your application, 

 

<style> 

    .e-popup.e-popup-flmenu { 

        display:none; 

    } 

</style> 

Note : We have commented the above style in our above attached sample.  

Please get back to us if you need further assistance.  

Regards, 

Renjith Singh Rajendran. 

[Andrzej]

Thanks, all works now as I expected!

Blocking the auto-complete by e-popup.e-popup-flmenu display:none would unfortunately disable also a calendar popup. Anyway I keep now the functionality of auto-complete because it works quite sensibly after implemented changes.

Best regards

Andrzej

[Renjith Singh Rajendran]

Hi Andrzej, 

Thanks for your update. 

We are glad to hear that the provided suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.