New to Kendo UI for jQuery? Download free 30-day trial

jQuery Grid AI Chat Assistant

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

ai-chat-integration.html

Also available for:

By accessing and using the Telerik AI service integration on the Progress website, you acknowledge and agree to be bound by the following Terms of Use.

The demos in this article use a Telerik-hosted AI service for demonstration purposes only. For production applications, you should implement your own AI service that understands your specific domain, data, and business requirements.

/*Custom icons styles*/ .custom-new-item-icon::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.2915 13.3333V2.66635C2.29159 2.21339 2.47121 1.77864 2.7915 1.45834C3.1118 1.13805 3.54655 0.95843 3.99951 0.958344H9.3335V0.95932C9.59355 0.959021 9.85104 1.00924 10.0913 1.10873C10.3316 1.20828 10.5502 1.35432 10.7339 1.53842L13.1255 3.93002C13.3105 4.1139 13.4571 4.33269 13.5571 4.57358C13.6571 4.81435 13.7088 5.07266 13.7085 5.33334V13.3333C13.7085 13.7864 13.5279 14.221 13.2075 14.5414C12.8872 14.8616 12.4525 15.0414 11.9995 15.0414H3.99951C3.54655 15.0413 3.1118 14.8616 2.7915 14.5414C2.47123 14.221 2.2915 13.7863 2.2915 13.3333ZM7.62451 12.0003V10.3753H5.99951C5.79266 10.3752 5.62469 10.2072 5.62451 10.0003C5.62451 9.79334 5.79255 9.62551 5.99951 9.62534H7.62451V8.00034C7.62451 7.79334 7.79255 7.62551 7.99951 7.62534C8.20662 7.62534 8.37451 7.79323 8.37451 8.00034V9.62534H9.99951C10.2066 9.62534 10.3745 9.79323 10.3745 10.0003C10.3743 10.2073 10.2065 10.3753 9.99951 10.3753H8.37451V12.0003C8.37434 12.2073 8.20651 12.3753 7.99951 12.3753C7.79266 12.3752 7.62469 12.2072 7.62451 12.0003ZM9.7085 4.66635C9.7085 4.74371 9.73876 4.81868 9.79346 4.87338C9.84806 4.9279 9.92235 4.95826 9.99951 4.95834H12.8999C12.8895 4.92571 12.8779 4.89341 12.8647 4.86166C12.8028 4.71235 12.7118 4.57626 12.5972 4.46225L10.2036 2.0687C10.0896 1.95424 9.95347 1.86394 9.8042 1.80209C9.77272 1.78906 9.74084 1.77727 9.7085 1.76694V4.66635ZM3.0415 13.3333C3.0415 13.5874 3.14216 13.8314 3.32178 14.0111C3.50142 14.1907 3.74546 14.2913 3.99951 14.2914H11.9995C12.2536 14.2914 12.4975 14.1907 12.6772 14.0111C12.857 13.8314 12.9585 13.5875 12.9585 13.3333V5.70834H9.99951C9.72344 5.70826 9.45844 5.59883 9.26318 5.40366C9.06783 5.20831 8.9585 4.94262 8.9585 4.66635V1.70834H3.99951C3.74546 1.70843 3.50142 1.80897 3.32178 1.98862C3.14213 2.16826 3.04159 2.4123 3.0415 2.66635V13.3333Z" fill="currentColor"/></svg>'); background-size: contain; background-repeat: no-repeat; } .custom-existing-icon::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.2915 13.3333V2.66635C2.29159 2.21339 2.47121 1.77864 2.7915 1.45834C3.1118 1.13805 3.54655 0.95843 3.99951 0.958344H9.3335V0.95932C9.59355 0.959021 9.85104 1.00924 10.0913 1.10873C10.3316 1.20828 10.5502 1.35432 10.7339 1.53842L13.1255 3.93002C13.3105 4.1139 13.4571 4.33269 13.5571 4.57358C13.6571 4.81435 13.7088 5.07266 13.7085 5.33334V13.3333C13.7085 13.7864 13.5279 14.221 13.2075 14.5414C12.8872 14.8616 12.4525 15.0414 11.9995 15.0414H3.99951C3.54655 15.0413 3.1118 14.8616 2.7915 14.5414C2.47123 14.221 2.2915 13.7863 2.2915 13.3333ZM9.73486 8.85873C9.88131 8.71229 10.1187 8.71229 10.2651 8.85873C10.4113 9.00521 10.4115 9.24266 10.2651 9.38901L7.59814 12.055C7.52789 12.1253 7.43284 12.1653 7.3335 12.1654C7.23404 12.1654 7.1382 12.1253 7.06787 12.055L5.73486 10.722C5.58842 10.5756 5.58842 10.3382 5.73486 10.1917C5.88131 10.0453 6.1187 10.0453 6.26514 10.1917L7.33252 11.2591L9.73486 8.85873ZM9.7085 4.66635C9.7085 4.74371 9.73876 4.81868 9.79346 4.87338C9.84806 4.9279 9.92235 4.95826 9.99951 4.95834H12.8999C12.8895 4.92571 12.8779 4.89341 12.8647 4.86166C12.8028 4.71235 12.7118 4.57626 12.5972 4.46225L10.2036 2.0687C10.0896 1.95424 9.95347 1.86394 9.8042 1.80209C9.77272 1.78906 9.74084 1.77727 9.7085 1.76694V4.66635ZM3.0415 13.3333C3.0415 13.5874 3.14216 13.8314 3.32178 14.0111C3.50142 14.1907 3.74546 14.2913 3.99951 14.2914H11.9995C12.2536 14.2914 12.4975 14.1907 12.6772 14.0111C12.857 13.8314 12.9585 13.5875 12.9585 13.3333V5.70834H9.99951C9.72344 5.70826 9.45844 5.59883 9.26318 5.40366C9.06783 5.20831 8.9585 4.94262 8.9585 4.66635V1.70834H3.99951C3.74546 1.70843 3.50142 1.80897 3.32178 1.98862C3.14213 2.16826 3.04159 2.4123 3.0415 2.66635V13.3333Z" fill="currentColor"/></svg>'); background-size: contain; background-repeat: no-repeat; } .custom-renewal-icon::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.2915 13.3333V2.66635C2.29159 2.21339 2.47121 1.77864 2.7915 1.45834C3.1118 1.13805 3.54655 0.95843 3.99951 0.958344H9.3335V0.95932C9.59355 0.959021 9.85104 1.00924 10.0913 1.10873C10.3316 1.20828 10.5502 1.35432 10.7339 1.53842L13.1255 3.93002C13.3105 4.1139 13.4571 4.33269 13.5571 4.57358C13.6571 4.81435 13.7088 5.07266 13.7085 5.33334V13.3333C13.7085 13.7864 13.5279 14.221 13.2075 14.5414C12.8872 14.8616 12.4525 15.0414 11.9995 15.0414H3.99951C3.54655 15.0413 3.1118 14.8616 2.7915 14.5414C2.47123 14.221 2.2915 13.7863 2.2915 13.3333ZM5.47412 7.37045C5.47412 7.16343 5.64213 6.99559 5.84912 6.99545C6.05623 6.99545 6.22412 7.16335 6.22412 7.37045V8.15561L6.24951 8.13022C6.53939 7.85163 6.89162 7.64565 7.27686 7.53061C7.66218 7.41558 8.07009 7.39498 8.46533 7.46909C8.86042 7.54323 9.23194 7.71065 9.54932 7.95737C9.86679 8.20417 10.1212 8.52329 10.2905 8.88803C10.3774 9.0758 10.2956 9.29895 10.1079 9.38608C9.9201 9.4731 9.69703 9.39124 9.60986 9.20346C9.49086 8.94707 9.31251 8.72266 9.08936 8.54916C8.86616 8.37566 8.60452 8.25751 8.32666 8.20541C8.04887 8.15336 7.76251 8.16852 7.4917 8.24936C7.22173 8.32995 6.97443 8.47343 6.771 8.6683L6.72705 8.71616H7.56982C7.77686 8.71625 7.94482 8.8841 7.94482 9.09116C7.94457 9.29799 7.7767 9.46607 7.56982 9.46616H5.84912C5.64228 9.46602 5.47437 9.29797 5.47412 9.09116V7.37045ZM10.5249 12.5316C10.5247 12.7385 10.3569 12.9066 10.1499 12.9066C9.94305 12.9064 9.77507 12.7384 9.7749 12.5316V11.7455L9.76123 11.7601C9.75759 11.7639 9.75331 11.7682 9.74951 11.7718C9.45965 12.0503 9.10733 12.2555 8.72217 12.3705C8.33691 12.4854 7.92983 12.507 7.53467 12.433C7.13943 12.3588 6.76718 12.1915 6.44971 11.9447C6.13235 11.6979 5.87872 11.3787 5.70947 11.014C5.62228 10.8261 5.70423 10.6032 5.89209 10.516C6.07988 10.429 6.303 10.5108 6.39014 10.6986C6.50915 10.9548 6.68757 11.1795 6.91064 11.3529C7.13377 11.5263 7.39561 11.6436 7.67334 11.6956C7.95107 11.7477 8.23755 11.7325 8.5083 11.6517C8.77896 11.5708 9.02629 11.4265 9.22998 11.2308L9.27295 11.1859H8.43018C8.22307 11.1859 8.05518 11.018 8.05518 10.8109C8.05523 10.6038 8.2231 10.4359 8.43018 10.4359H10.1499C10.357 10.4359 10.5248 10.6038 10.5249 10.8109V12.5316ZM9.7085 4.66635C9.7085 4.74371 9.73876 4.81868 9.79346 4.87338C9.84806 4.9279 9.92235 4.95826 9.99951 4.95834H12.8999C12.8895 4.92571 12.8779 4.89341 12.8647 4.86166C12.8028 4.71235 12.7118 4.57626 12.5972 4.46225L10.2036 2.0687C10.0896 1.95424 9.95347 1.86394 9.8042 1.80209C9.77272 1.78906 9.74084 1.77727 9.7085 1.76694V4.66635ZM3.0415 13.3333C3.0415 13.5874 3.14216 13.8314 3.32178 14.0111C3.50142 14.1907 3.74546 14.2913 3.99951 14.2914H11.9995C12.2536 14.2914 12.4975 14.1907 12.6772 14.0111C12.857 13.8314 12.9585 13.5875 12.9585 13.3333V5.70834H9.99951C9.72344 5.70826 9.45844 5.59883 9.26318 5.40366C9.06783 5.20831 8.9585 4.94262 8.9585 4.66635V1.70834H3.99951C3.74546 1.70843 3.50142 1.80897 3.32178 1.98862C3.14213 2.16826 3.04159 2.4123 3.0415 2.66635V13.3333Z" fill="currentColor"/></svg>'); background-size: contain; background-repeat: no-repeat; } /*Customize Chat appearance*/ .k-chat { width: 100% !important; } .k-chat .k-textarea textarea { min-height: 70px; } .k-chat-header.k-appbar > .header-title { flex: 1; font-weight: 600; } .k-chat-header.k-appbar { display: flex; padding-block: var(--kendo-spacing-2, 0.5rem); padding-inline: var(--kendo-spacing-4, 0.875rem); box-shadow: none; border-bottom: 1px solid; border-bottom-color: inherit; } /* Remove Chat bubbles for the AI Assistant */ .k-message-group-receiver .k-bubble { padding-inline: 0; border-width: 0; background-color: transparent; } /* Use medium Grid ToolBar paddings */ .k-grid .k-toolbar { padding-inline: var(--kendo-spacing-2); padding-block: var(--kendo-spacing-2); } /*Customize AI Grid Button appearance*/ .k-icon.k-svg-i-sparkles, .ai-chat-button svg path { color: #6610f2; fill: #6610f2; } #ai-grid-button { border: 1px solid #4b5ffa; background-color: transparent; color: #4b5ffa; } #ai-grid-button:hover, #ai-grid-button.k-selected:hover { background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.1) 15.09%, rgba(75, 95, 250, 0.1) 85.31% ); } #ai-grid-button:active, #ai-grid-button.k-selected { background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.2) 15.09%, rgba(75, 95, 250, 0.2) 85.31% ); box-shadow: none; } #ai-grid-button:focus { box-shadow: 0 0 0 2px rgba(138, 97, 255, 0.3); outline-width: inherit; } #ai-grid-button svg path { fill: #8a61ff; } /*Customize AI Grid Button appearance - dark themes*/ [data-is-dark="true"] #ai-grid-button { border: 1px solid #8a61ff; background-color: transparent; color: #8a61ff; } [data-is-dark="true"] #ai-grid-button:hover, [data-is-dark="true"] #ai-grid-button.k-selected:hover { background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.1) 15.09%, rgba(75, 95, 250, 0.1) 85.31% ); } [data-is-dark="true"] #ai-grid-button:active, [data-is-dark="true"] #ai-grid-button.k-selected { background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.2) 15.09%, rgba(75, 95, 250, 0.2) 85.31% ); box-shadow: none; } [data-is-dark="true"] #ai-grid-button:focus { box-shadow: 0 0 0 2px rgba(138, 97, 255, 0.3); } [data-is-dark="true"] #ai-grid-button svg path { fill: #8a61ff; } [data-is-dark="true"] .custom-new-item-icon::before, [data-is-dark="true"] .custom-existing-icon::before, [data-is-dark="true"] .custom-renewal-icon::before { color: white; } /*Customize Drawer appearance*/ .k-drawer.k-drawer-end { border-inline-start-width: 0px !important; } .k-drawer-content { padding: 0 !important; padding-block: 0px; padding-inline: 0px !important; } .k-drawer-items { width: 360px !important; padding-block: 0px; padding-inline: 0px; } /*Other styles*/ .note { font: normal 18px "Metric"; border-radius: 2px; margin: 20px auto 40px auto; padding: 20px; border-left: 4px solid; border-left-color: #5392e4; background: rgba(83, 146, 228, 0.1); text-align: center; } .k-rating-item:not(.k-selected) { display: none; } .k-svg-i-ai-sparkles.k-svg-icon.k-icon { width: 32px; height: 32px; } .message-text { white-space: pre-wrap; word-wrap: break-word; } @media (max-width: 765px) { .k-drawer-items { width: 360px !important; } .k-drawer-container { position: relative; width: 100%; height: 95%; } .k-drawer-container.k-drawer-overlay .k-drawer { position: absolute; } .k-overlay { position: absolute; } .k-grouping-drop-container { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .k-grouping-header { flex-wrap: nowrap; } } @media (max-width: 560px) { .k-drawer-items { width: 100% !important; } }

Description

The Kendo UI for jQuery Grid can be integrated with the Kendo UI for jQuery Chat component to create an AI-powered conversational interface for Grid data manipulation. This demo showcases how users can interact with Grid data through natural language commands in a chat interface, enabling intuitive filtering, sorting, grouping, and other data operations without writing complex queries.

This Grid example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

jQuery Grid AI Chat Assistant

Description

Support & Learning Resources

Additional Resources