From Manual Calculations to AI-Based Scoring Logic with JavaScript DataGrid [Webinar Show Notes]

In this webinar, Prabhavathi Kannan demonstrates how to improve Syncfusion^® JavaScript DataGrid with Azure OpenAI to create AI-powered predictive data entry experiences. This session shows how an entire data set can be sent to an AI model to predict values, calculate totals, assign values, and update the grid dynamically without writing traditional calculation formulas.

If you missed the webinar or would like to review a portion of it, the recording has been uploaded to our YouTube channel and is embedded below.

Timestamp

• [00:00] Welcome and introduction to the session.
• [00:46] Session agenda and objectives.
• [01:11] Poll: What do you want AI to predict?
• [01:48] Overview of the AI-based DataGrid concept.
• [02:41] Overview of toolkits that support Syncfusion AI.
• [03:33] Prerequisites and regulatory requirements.
• [03:57] Poll: Most used Syncfusion controls.
• [04:27] Project setup in Visual Studio Code.
• [05:39] Understand data sets and grid structures.
• [06:31] Initial grid configuration and layout.
• [07:29] Create grid and toolbar buttons.
• [10:11] Connecting the Calculate Value button.
• [14:10] Running a basic grid.
• [14:41] Added Azure OpenAI integration.
• [17:21] Generate commands for AI predictions.
• [18:50] Execute AI logic and scoring rules.
• [20:04] Updates the grid with predicted values.
• [21:56] Styling cells and adding animations.
• [23:46] Live demo: implementing AI-powered scoring.
• [24:54] Key points and recap.
• [25:21] Apply this approach to real-world applications.

What was built in this session

The demo application uses JavaScript DataGrid which is filled with student GPA data from three academic years. With a click of a button, the data set is sent to Azure OpenAIwhich estimates last year’s GPA, calculates total GPA, and assigns letter grades automatically.

Overview of toolkits that support Syncfusion AI

Syncfusion’s AI-ready toolkit enables seamless integration with AI models such as Azure OpenAI, OpenAI, GeminiAnd Anthropic. This toolkit has components for major frameworks, incl JavaScript, React, corner, Look, jacketAnd ASP.NET.

Prerequisites and project settings

To keep up, developers need Visual Studio Code, Node.js, Typescriptaccess to Azure OpenAI with the implemented model, and the Syncfusion JavaScript DataGrid package.

How AI integration works

The solution uses structured prompts that combine grid data and scoring rules into one instruction. Azure OpenAI returns a JSON specific responsewhich is parsed and tied directly back to the DataGrid for predictable results.

Dynamic updates, styles and animations

Predicted values ​​are applied line by line with smooth animation. Custom cell styling uses color coding to highlight performance, providing immediate visual clarity.

Question and answer

Q: Can we use it on other company projects?

A: Yes, you can use it on other company projects. The main requirement is to generate appropriate commands for the AI ​​based on specific needs and component settings. Once the AI ​​provides its response, you need to programmatically update the components to reflect the changes and display them in the UI.

Q: How does it work internally?

A: First, determine whether the desired functionality can be achieved in the component. If so, create customized commands to elicit appropriate responses from the AI ​​and align with the component’s capabilities. Based on the AI ​​output, perform appropriate actions or updates in the component.

Q: Can you create a prompt that allows the AI ​​to answer questions dynamically and adjust the grid to respond to what is entered into the prompt?

A: Yes, this is achievable. For an example of an interactive grid powered by AI, please see this Syncfusion JS 2 React demo.

Q: If the user enters a question, will the grid adjust, or does the grid need to be programmed first?

A: Yes, dynamic customization can be done without pre-programming every possible query. The grid can respond intelligently to natural language input in real-time. Please see this interactive AI grid demo for a practical illustration.

Conclusion

This approach eliminates manual calculations, simplifies business logic, and allows developers to build intelligent, AI-based data networks that can be applied to many real-world scenarios beyond judgment.

Related resources