WinForms Datagrid AI Filter Prompts, Part 2: Smarter Filtering

Developers often ask, "How can I use AI with FlexGrid?" With tools like Visual Studio and GitHub Copilot, AI can already streamline development and setup. But when it comes to the runtime experience for your end-users, one of the most practical ways to leverage AI is through smarter filtering.

In this post, we'll explore how to make FlexGrid filtering more intuitive and powerful using modern AI models like Gemini or Groq. You'll see how AI can help users interact with data naturally, without needing to know complex filter syntax or logic. We'll examine:

• The Downsides of Traditional C# Filtering
• Smarter Filtering with AI Assistance
• How the C# AI Filtering Works

Ready to get started? Download ComponentOne Today!

The Downsides of Traditional C# Filtering

Traditional filtering requires some knowledge of the data and its structure. It's not rocket science, but some users may not find the conditional filtering tools that intuitive. You have to understand AND/OR logic and know the difference between all the operations (<, >, <=, >=, <>, ==) as well as how they may work against numbers, dates, and text.

You can make things easier for the user by simply adding a text box at the top of your application that allows them to search your data. However, this is essentially no better than pressing CTRL+F to find text on the page, and it does not typically support complex logic.

The question then becomes, how can we utilize AI to combine the power of traditional/conditional filtering with the simplicity of a search box?

Smarter Filtering with AI Assistance

In case you missed it, we previously wrote about WinForms Datagrid AI Filter Prompts, Part 1: Basic Filtering. The sample provided smart filtering by processing the dataset through Gemini AI. It's a quick and fun sample, but that approach may not work for everyone in the real world.

For this new approach, we aimed to utilize the FlexGrid filter definition API and guide the AI service to translate the casual filter query into a definition that can be directly loaded into FlexGrid. This way, the only information being passed to the AI service is our filter query and the instruction on how to format the response.

For example, a Cars dataset is shown below, featuring several fields, including Brand, Model, Transmission Speed, Category, and Description.

What if we want to find cars that include a moonroof? There is no field for this feature, but this information can be found in the Description text. Using traditional filtering, the end-user would have to determine this and create a conditional filter, such as: if "Description" contains "moonroof".

Using AI, we can allow the user to type a casual query like "show cars that have a moonroof", and the AI model translates that into an output following FlexGrid's filter definition syntax like:

FlexGrid Filter Definition XML:

<ColumnFilters>
  <ConditionFilter
    ColumnIndex="11"
    ColumnName="Description"
    DataType="System.String"
    ConditionFilterEnabled="True"
    ValueFilterEnabled="False">
    <ConditionFilter>
      <Condition ChainingWithAnd="False" Operator="Contains" Parameter="moonroof" />
    </ConditionFilter>
  </ConditionFilter>
</ColumnFilters>

Then, the filter definition is directly applied to the FlexGrid to filter the data. In this case, we leverage AI merely to convert our casual query to a technical XML syntax that our UI component can understand.

Using this approach is light and straightforward, even if it's somewhat limited by the filters that can be represented in an XML definition. A query like "show products containing Spanish words" would not feasibly be accurate using this approach. In our testing, we tried "show me all products containing animal names", and it generated a filter definition that compared product names to about 50 different common animals. However, this is not a definitive result, as there are likely hundreds or thousands of animals.

How the C# AI Filtering Works

This sample, which you can download, essentially takes the user's prompt and appends it to a batch of instruction text before sending it to the AI service. It looks like this:

These instructions help guide the AI model to respond in a format that our app needs. The sample supports both Gemini and Groq services, allowing you to choose from them. You can download the complete sample to explore this code. To run this sample locally:

1. Unzip and open in Visual Studio
2. Build and run the app
3. Click the settings (gear icon) to enter your Gemini or Groq API key
1. How to get a free Gemini API key
2. How to get a free Groq API key
4. Choose a data set from the top dropdown boxes
5. Enter a filter query into the bottom right text box and press Send
6. Observe the filtered FlexGrid and the complete AI response in the right panel

Ready to check it out? Download ComponentOne Today!

Conclusion

Between this sample and our previous one, we've demonstrated two different approaches to providing AI-assisted filtering in FlexGrid for WinForms. There are pros and cons to each approach. The new approach is more lightweight and does not grant AI access to the data itself. The downside is that the types of filters that can be created may be limited to what can be represented in a standard filter definition. You can download the sample from the links above, or locate both samples in the ComponentOne Samples Explorer after installing the WinForms Edition.