diff --git a/ej2-asp-core-mvc/Release-notes/31.1.17.md b/ej2-asp-core-mvc/Release-notes/31.1.17.md index 5ee3eebf6f..4686fe8f43 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.17.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="60541" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} diff --git a/ej2-asp-core-mvc/Release-notes/31.1.18.md b/ej2-asp-core-mvc/Release-notes/31.1.18.md index 7b6d52ead5..daf80b302c 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.18.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.18.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.18 Release Notes -{% include release-info.html date="September 10, 2025" version="v31.1.18" passed="96429" failed="0" %} +{% include release-info.html date="September 10, 2025" version="v31.1.18" passed="60544" failed="0" %} {% directory path: _includes/release-notes/v31.1.18 %} @@ -21,58 +21,58 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | | App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | | ButtonGroup | 120 | 120 | 0 | All Passed | | calendar | 177 | 177 | 0 | All Passed | | Carousel | 61 | 61 | 0 | All Passed | | Chart | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | -| Checkbox | 37 | 37 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | -| Combo Box | 137 | 137 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | | Common | 849 | 849 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2754 | 2754 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19893 | 19893 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | | Gantt | 3468 | 3468 | 0 | All Passed | -| HeatMap Chart | 478 | 478 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | | Image Editor | 1653 | 1653 | 0 | All Passed | | In-place Editor | 642 | 642 | 0 | All Passed | | Kanban | 268 | 268 | 0 | All Passed | | LinearGauge | 426 | 426 | 0 | All Passed | | Listbox | 115 | 115 | 0 | All Passed | | ListView | 83 | 83 | 0 | All Passed | -| Maps | 1244 | 1244 | 0 | All Passed | -| Mention | 39 | 39 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | | Menu | 187 | 187 | 0 | All Passed | | Multicolumn Combo Box | 254 | 254 | 0 | All Passed | | Multiselect Dropdown | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 18612 | 18612 | 0 | All Passed | | Pivot Table | 5297 | 5297 | 0 | All Passed | | Progress Bar | 81 | 81 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | | Query Builder | 480 | 480 | 0 | All Passed | -| RadioButton | 45 | 45 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | | RangeNavigator | 140 | 140 | 0 | All Passed | | Rating | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 0 | All Passed | | sidebar | 88 | 88 | 0 | All Passed | | Signature | 105 | 105 | 0 | All Passed | @@ -81,9 +81,8 @@ documentation: ug | SmithChart | 49 | 49 | 0 | All Passed | | Sparkline | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | | Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | | Tab | 69 | 69 | 0 | All Passed | @@ -92,8 +91,8 @@ documentation: ug | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | -| Treemap | 264 | 264 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/31.1.20.md b/ej2-asp-core-mvc/Release-notes/31.1.20.md index 952cb10c22..cf0a56816a 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.20.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.20.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.20 Release Notes -{% include release-info.html date="September 17, 2025" version="v31.1.20" passed="98403" failed="0" %} +{% include release-info.html date="September 17, 2025" version="v31.1.20" passed="60591" failed="0" %} {% directory path: _includes/release-notes/v31.1.20 %} @@ -21,34 +21,34 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | | App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | | ButtonGroup | 120 | 120 | 0 | All Passed | | calendar | 177 | 177 | 0 | All Passed | | Carousel | 61 | 61 | 0 | All Passed | | Chart | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | -| Checkbox | 37 | 37 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | -| Combo Box | 137 | 137 | 0 | All Passed | -| Common | 2436 | 2436 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 849 | 849 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2756 | 2756 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19893 | 19893 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | | Gantt | 3513 | 3513 | 0 | All Passed | | HeatMap Chart | 635 | 635 | 0 | All Passed | | Image Editor | 1653 | 1653 | 0 | All Passed | @@ -57,22 +57,21 @@ documentation: ug | LinearGauge | 426 | 426 | 0 | All Passed | | Listbox | 115 | 115 | 0 | All Passed | | ListView | 83 | 83 | 0 | All Passed | -| Maps | 1365 | 1365 | 0 | All Passed | -| Mention | 39 | 39 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | | Menu | 187 | 187 | 0 | All Passed | | Multicolumn Combo Box | 254 | 254 | 0 | All Passed | | Multiselect Dropdown | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 18612 | 18612 | 0 | All Passed | | Pivot Table | 5297 | 5297 | 0 | All Passed | -| Progress Bar | 81 | 81 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | | Query Builder | 480 | 480 | 0 | All Passed | -| RadioButton | 45 | 45 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | | RangeNavigator | 140 | 140 | 0 | All Passed | | Rating | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 0 | All Passed | | sidebar | 88 | 88 | 0 | All Passed | | Signature | 105 | 105 | 0 | All Passed | @@ -81,9 +80,8 @@ documentation: ug | SmithChart | 49 | 49 | 0 | All Passed | | Sparkline | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | | Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | | Tab | 69 | 69 | 0 | All Passed | @@ -92,8 +90,8 @@ documentation: ug | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | | Treemap | 326 | 326 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/31.1.21.md b/ej2-asp-core-mvc/Release-notes/31.1.21.md index 773190ee94..16e925464f 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.21.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.21.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.21 Release Notes -{% include release-info.html date="September 23, 2025" version="v31.1.21" passed="103560" failed="0" %} +{% include release-info.html date="September 23, 2025" version="v31.1.21" passed="61308" failed="0" %} {% directory path: _includes/release-notes/v31.1.21 %} @@ -36,15 +36,14 @@ documentation: ug | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | | Combo Box | 136 | 136 | 0 | All Passed | -| Common | 2506 | 2506 | 0 | All Passed | +| Common | 849 | 849 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2799 | 2799 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 18967 | 18967 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | | Dialog | 58 | 58 | 0 | All Passed | -| Document Editor | 4997 | 4997 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | | Dropdown Tree | 105 | 105 | 0 | All Passed | @@ -64,7 +63,6 @@ documentation: ug | Multicolumn Combo Box | 254 | 254 | 0 | All Passed | | Multiselect Dropdown | 390 | 390 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 19130 | 19130 | 0 | All Passed | | Pivot Table | 5298 | 5298 | 0 | All Passed | | Progress Bar | 79 | 79 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | @@ -84,7 +82,6 @@ documentation: ug | Speech To Text | 200 | 200 | 0 | All Passed | | Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | | Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | | Tab | 69 | 69 | 0 | All Passed | @@ -93,8 +90,8 @@ documentation: ug | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 136 | 136 | 0 | All Passed | | TreeGrid | 3786 | 3786 | 0 | All Passed | | Treemap | 326 | 326 | 0 | All Passed | -| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/31.1.22.md b/ej2-asp-core-mvc/Release-notes/31.1.22.md new file mode 100644 index 0000000000..fdf00cc603 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.1.22.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio® for ##Platform_Name## Release Notes - v31.1.22 +description: Learn here about the controls in the Essential Studio® for ##Platform_Name## Weekly Release - Release Notes - v31.1.22 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio® for ##Platform_Name## - v31.1.22 Release Notes + +{% include release-info.html date="October 01, 2025" version="v31.1.22" passed="61802" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.22 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 4605 | 4605 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2800 | 2800 | 0 | All Passed | +| Date Picker | 426 | 426 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | +| Date Time Picker | 324 | 324 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 191 | 191 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | +| Gantt | 3515 | 3515 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 642 | 642 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 390 | 390 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5298 | 5298 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 623 | 623 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | +| schedule | 4609 | 4609 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 57 | 57 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 677 | 677 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3786 | 3786 | 0 | All Passed | +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/31.1.23.md b/ej2-asp-core-mvc/Release-notes/31.1.23.md new file mode 100644 index 0000000000..b0b3f6356b --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.1.23.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio® for ##Platform_Name## Release Notes - v31.1.23 +description: Learn here about the controls in the Essential Studio® for ##Platform_Name## Weekly Release - Release Notes - v31.1.23 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio® for ##Platform_Name## - v31.1.23 Release Notes + +{% include release-info.html date="October 07, 2025" version="v31.1.23" passed="62050" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.23 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 4605 | 4605 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2800 | 2800 | 0 | All Passed | +| Date Picker | 426 | 426 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | +| Date Time Picker | 324 | 324 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 191 | 191 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | +| Gantt | 3515 | 3515 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 642 | 642 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 417 | 417 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5298 | 5298 | 0 | All Passed | +| Progress Bar | 67 | 67 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 623 | 623 | 0 | All Passed | +| Rich Text Editor | 5095 | 5095 | 0 | All Passed | +| schedule | 4608 | 4608 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3786 | 3786 | 0 | All Passed | +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md index 176524cd30..6ef19fb383 100644 --- a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md +++ b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="249186" failed="0" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="60541" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} @@ -21,70 +21,77 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | | ButtonGroup | 120 | 120 | 0 | All Passed | | calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | | Chart | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | | Common | 849 | 849 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2754 | 2754 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19272 | 19272 | 0 | All Passed | -| Document Editor | 4224 | 4224 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | | Gantt | 3468 | 3468 | 0 | All Passed | -| HeatMap Chart | 478 | 478 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | | Image Editor | 1653 | 1653 | 0 | All Passed | | In-place Editor | 642 | 642 | 0 | All Passed | | Kanban | 268 | 268 | 0 | All Passed | | LinearGauge | 426 | 426 | 0 | All Passed | | Listbox | 115 | 115 | 0 | All Passed | -| Maps | 1244 | 1244 | 0 | All Passed | +| ListView | 83 | 83 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | | Menu | 187 | 187 | 0 | All Passed | | Multicolumn Combo Box | 254 | 254 | 0 | All Passed | | Multiselect Dropdown | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 19094 | 19094 | 0 | All Passed | | Pivot Table | 5294 | 5294 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | | Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | | RangeNavigator | 140 | 140 | 0 | All Passed | | Rating | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | | Signature | 105 | 105 | 0 | All Passed | | Skeleton | 144 | 144 | 0 | All Passed | | Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | | Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | -| Treemap | 264 | 264 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | -| DocIO | 39837 | 39837 | 0 | All Passed | -| PDF | 14696 | 14696 | 0 | All Passed | -| Presentation | 50987 | 50987 | 0 | All Passed | -| XlsIO | 44112 | 44112 | 0 | All Passed | \ No newline at end of file +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md index 82846d9673..6ef19fb383 100644 --- a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md +++ b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="202140" failed="0" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="60541" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} @@ -21,71 +21,77 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | | ButtonGroup | 120 | 120 | 0 | All Passed | | calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | | Chart | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | | Common | 849 | 849 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2754 | 2754 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19272 | 19272 | 0 | All Passed | -| Document Editor | 4224 | 4224 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | | Gantt | 3468 | 3468 | 0 | All Passed | -| HeatMap Chart | 478 | 478 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | | Image Editor | 1653 | 1653 | 0 | All Passed | | In-place Editor | 642 | 642 | 0 | All Passed | | Kanban | 268 | 268 | 0 | All Passed | | LinearGauge | 426 | 426 | 0 | All Passed | | Listbox | 115 | 115 | 0 | All Passed | -| Maps | 1244 | 1244 | 0 | All Passed | +| ListView | 83 | 83 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | | Menu | 187 | 187 | 0 | All Passed | | Multicolumn Combo Box | 254 | 254 | 0 | All Passed | | Multiselect Dropdown | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 19094 | 19094 | 0 | All Passed | | Pivot Table | 5294 | 5294 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | | Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | | RangeNavigator | 140 | 140 | 0 | All Passed | | Rating | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | | Signature | 105 | 105 | 0 | All Passed | | Skeleton | 144 | 144 | 0 | All Passed | | Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | | Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | -| Treemap | 264 | 264 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | -| DocIO | 16538 | 16538 | 0 | All Passed | -| Metafilerenderer | 863 | 863 | 0 | All Passed | -| PDF | 13522 | 13522 | 0 | All Passed | -| Presentation | 54312 | 54312 | 0 | All Passed | -| XlsIO | 17351 | 17351 | 0 | All Passed | \ No newline at end of file +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..ba46731657 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Gemini AI With AI AssistView control + +The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your MVC applications. + +## Getting Started With the AI AssistView control + +Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: + +[ MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). +* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application + +## Install Packages + +Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.MVC5 + +``` + +Install the Gemini AI package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Mscc.GenerativeAI + +``` + +## Generate API Key + +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account. + +2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. + +3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. + +4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Configure Gemini AI with AI AssistView + +You can add the below respective files in your application: + +* Add your generated `API Key` at the line + +```bash + +string apiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Gemini AI](../images/gemini-ai.png) + +## Run and Test + +Run the application in the browser using the following command. + +Build and run the app (Ctrl + F5). + +Open the hosted link to interact with the Gemini AI for dynamic response \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md new file mode 100644 index 0000000000..689c0e6d1f --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -0,0 +1,89 @@ +--- +layout: post +title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Azure Open AI With AI AssistView control + +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your MVC applications. + +## Getting Started With the AI AssistView control + +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: + +[ MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. +* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application + +## Install Packages + +Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.MVC5 + +``` + +Install the Open AI and Azure Open AI package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core + +``` + +## Configure Azure Open AI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. + +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. + +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. + +4. Store these values securely, as they will be used in your application. + +> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. + +## Configure Azure Open AI with AI AssistView + +You can add the below respective files in your application: + +* Update the following configuration values with your Azure Open AI details: + +```bash + +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Azure Open AI](../images/open-ai.png) + +## Run and Test + +Run the application in the browser using the following command. + +Build and run the app (Ctrl + F5). + +Open the Hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..d100b357bd --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Gemini AI With AI AssistView control + +The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your Core applications. + +## Getting Started With the AI AssistView control + +Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core application: + +[ ASP.NET CORE Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). +* [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application + +## Install Packages + +Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.AspNet.Core + +``` + +Install the Gemini AI package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Mscc.GenerativeAI + +``` + +## Generate API Key + +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account. + +2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. + +3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. + +4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Configure Gemini AI with AI AssistView + +You can add the below respective files in your application: + +* Add your generated `API Key` at the line + +```bash + +string apiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs %} +{% endhighlight %} +{% endtabs %} + +![Gemini AI](../images/gemini-ai.png) + +## Run and Test + +Run the application in the browser using the following command. + +Build and run the app (Ctrl + F5). + +Open the hosted link to interact with the Gemini AI for dynamic response \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md new file mode 100644 index 0000000000..542a1d9551 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -0,0 +1,89 @@ +--- +layout: post +title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Azure Open AI With AI AssistView control + +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Core applications. + +## Getting Started With the AI AssistView control + +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core app: + +[ CORE Getting Started Guide](../getting-started) + +## Prerequisites + +* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. +* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application + +## Install Packages + +Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.AspNet.Core + +``` + +Install the Open AI and Azure Open AI package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core + +``` + +## Configure Azure Open AI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. + +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. + +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. + +4. Store these values securely, as they will be used in your application. + +> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. + +## Configure Azure Open AI with AI AssistView + +You can add the below respective files in your application: + +* Update the following configuration values with your Azure Open AI details: + +```bash + +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs %} +{% endhighlight %} +{% endtabs %} + +![Azure Open AI](../images/open-ai.png) + +## Run and Test + +Run the application in the browser using the following command. + +Build and run the app (Ctrl + F5). + +Open the hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png new file mode 100644 index 0000000000..2e2a91dd08 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png new file mode 100644 index 0000000000..2e2a91dd08 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png differ diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md new file mode 100644 index 0000000000..8441303b06 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md @@ -0,0 +1,245 @@ +--- +layout: post +title: Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Microsoft Bot +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Microsoft Bot Framework With ASP.NET MVC Chat UI component + +The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET MVC application. + +## Getting Started With the Chat UI Component + +Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: + +[ASP.NET MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. +* `Visual Studio`: With ASP.NET MVC development tools. +* `Syncfusion EJ2 ASP.NET MVC`: Install Syncfusion.EJ2.MVC5 in your project. +* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/). + +## Install Dependencies + +* Install backend dependencies for bot communication using NuGet: + +```bash + +Install-Package Microsoft.Bot.Connector.DirectLine +Install-Package Newtonsoft.Json + +``` + +* Install the Syncfusion EJ2 ASP.NET MVC package: + +```bash + +Install-Package Syncfusion.EJ2.MVC5 + +``` + +## Configure the Azure Bot + +1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. + +2. Enable the direct line channel: + * Go to `Channels` > `Direct Line` > `Default-Site`. + * Copy one of the displayed secret keys. + +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). + +> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. + +## Set Up Token Server + +Create a Web API controller in your ASP.NET MVC project to handle direct line token generation. Add `Controllers/TokenController.cs`: + +{% tabs %} +{% highlight cs tabtitle="TokenController.cs" %} + +using System; +using System.Configuration; +using System.Net; +using System.Net.Http; +using System.Threading.Tasks; +using System.Web.Http; +using Newtonsoft.Json; + +namespace YourNamespace.Controllers +{ + public class TokenController : ApiController + { + private static readonly HttpClient _httpClient = new HttpClient(); + [HttpPost] + [Route("api/token/directline/token")] + public async Task GenerateToken() + { + var directLineSecret = ConfigurationManager.AppSettings["DirectLineSecret"]; + if (string.IsNullOrEmpty(directLineSecret)) + { + return BadRequest("Direct Line secret is not configured."); + } + try + { + var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); + request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); + var response = await _httpClient.SendAsync(request); + response.EnsureSuccessStatusCode(); + var responseContent = await response.Content.ReadAsStringAsync(); + dynamic tokenResponse = JsonConvert.DeserializeObject(responseContent); + return Ok(new { token = tokenResponse.token }); + } + catch (HttpRequestException ex) + { + return InternalServerError(new Exception("Failed to generate Direct Line token.", ex)); + } + } + } +} + +{% endhighlight %} +{% endtabs %} + +Add the Direct Line secret to `Web.config`: + +{% tabs %} +{% highlight js tabtitle=".env" %} + + + + +{% endhighlight %} +{% endtabs %} + +>`Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments. + +## Configure ChatUI + +Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the direct line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the direct line API: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "You" }; + var botUserModel = new ChatUIUser { Id = "bot", User = "Bot" }; +} + +
+ @Html.EJS().ChatUI("chatUI").User(currentUserModel).MessageSend("onMessageSend").Created("onCreated").Render() +
+ + + + + +{% endhighlight %} +{% endtabs %} + +>Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, include the Bot Framework Web Chat script for Direct Line functionality. Register the Syncfusion script manager in `_Layout.cshtml`. + +## Configure Web.config for CORS (if needed) + +To enable CORS for API requests, add to `Web.config` under ``: + +{% tabs %} +{% highlight js tabtitle="Web.config.js" %} + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Run and Test + +### Start the Application: + +Run the project in Visual Studio or use IIS Express. +Open your app in the browser Hosted link to interact with your Microsoft Bot Framework chatbot. + +## Troubleshooting + +* `Token Server Error (500)`: Ensure the `DirectLineSecret` in `Web.config` is correct and the token endpoint is accessible. +* `CORS Error`: Verify the CORS configuration in `Web.config` allows requests from your frontend URL. +* `Bot is Not Responding`: + - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it’s running correctly. + - Check the bot’s `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. +* `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. +* `Token Expiration`: Direct Line tokens are short-lived. The Direct Line client typically handles token refresh, but if issues persist, restart the Direct Line connection. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md new file mode 100644 index 0000000000..874d8dade9 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md @@ -0,0 +1,219 @@ +--- +layout: post +title: Integration of Dialogflow in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Dialogflow in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Dialogflow +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Google Dialogflow With ASP.NET MVC Chat UI component + +The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your ASP.NET MVC applications. + +## Getting Started With the ChatUI Component + +Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: + +[ASP.NET MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). +* Visual Studio with ASP.NET MVC development tools. +* Syncfusion EJ2 ASP.NET MVC installed in your project. +* Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. + +## Install Dependencies + +* Install backend dependencies for Dialogflow and server setup using NuGet: + +```bash + +Install-Package Google.Cloud.Dialogflow.V2 +Install-Package Newtonsoft.Json + +``` +* Install the Syncfusion EJ2 ASP.NET MVC package in your project: + +```bash + +Install-Package Syncfusion.EJ2.MVC5 + +``` + +## Set Up the Dialogflow Agent + +1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). + +2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. + +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. + +> `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. + +## Configure ASP.NET MVC Backend + +Create `service-acct.json` with your Dialogflow service account credentials in your project root: + +{% tabs %} +{% highlight js tabtitle="service-acct.json" %} + +{ + "type": "service_account", + "project_id": "your-dialogflow-project-id", + "private_key_id": "abc123xyz...", + "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", + "client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", + ... +} + +{% endhighlight %} +{% endtabs %} + +Set up a Web API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: + +{% tabs %} +{% highlight cs tabtitle="ChatController.cs" %} + +using Google.Cloud.Dialogflow.V2; +using Google.Apis.Auth.OAuth2; +using System; +using System.Configuration; +using System.Threading.Tasks; +using System.Web.Http; + +namespace YourNamespace.Controllers +{ + public class ChatController : ApiController + { + private readonly SessionsClient _sessionsClient; + private readonly string _projectId; + public ChatController() + { + var credential = GoogleCredential.FromFile("service-acct.json"); + _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); + _projectId = ConfigurationManager.AppSettings["DialogflowProjectId"]; // Or hardcode from JSON + } + [HttpPost] + [Route("api/chat/message")] + public async Task SendMessage([FromBody] MessageRequest request) + { + var sessionId = request.SessionId ?? "default-session"; + var session = SessionName.FromProjectSession(_projectId, sessionId); + var queryInput = new QueryInput + { + Text = new TextInput + { + Text = request.Text, + LanguageCode = "en-US" + } + }; + try + { + var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); + var reply = response.QueryResult.FulfillmentText; + return Ok(new { reply }); + } + catch (Exception ex) + { + return InternalServerError(new Exception("Error connecting to Dialogflow.", ex)); + } + } + } + public class MessageRequest + { + public string Text { get; set; } + public string SessionId { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +> Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to Web.config if needed: + +## Configure message send + +Use the Chat UI `messageSend` event to exchange messages. This event is triggered before a message is sent, allowing you to forward it to the backend. + +### Forward Message to backend: + +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to dialogflow and returns the response. + +### Displaying Bot response: + +Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; + var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; +} + +
+ @Html.EJS().ChatUI("chatUI").HeaderText("Bot").HeaderIconCss("e-header-icon").User(currentUserModel).MessageSend("onMessageSend").Render() +
+ + + + +{% endhighlight %} +{% endtabs %} + +> Ensure to include Syncfusion scripts and styles in `_Layout.cshtml` as per the getting started guide. Also, register the Syncfusion script manager in `_Layout.cshtml`. + +## Run and Test + +### Start the Application: + +Run the project in Visual Studio or use IIS Express. + +Open your app in the browser and chat with your dialogflow-powered bot. + +![ChatUI with Dialogflow](../images/dialogflow.png) + +## Troubleshooting: + +* `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. +* `CORS Error`: If using separate origins, configure CORS in Web.config (e.g., add custom headers under ). +* `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. +* `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. +* `Network Issues`: Confirm the application is running and the frontend is pointing to the correct API URL. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md new file mode 100644 index 0000000000..a7b98e7559 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md @@ -0,0 +1,275 @@ +--- +layout: post +title: Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Microsoft Bot +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Microsoft Bot Framework With ASP.NET Core Chat UI component + +The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET Core application. + +## Getting Started With the ChatUI Component + +Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET Core app: +[ASP.NET Core Getting Started Guide](../getting-started) + +## Prerequisites + +* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. +* `.NET SDK`: Version 6.0 or higher for ASP.NET Core. +* `Syncfusion EJ2 ASP.NET Core`: Install Syncfusion.EJ2.AspNet.Core in your project. +* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/). + +## Install Dependencies +* Install backend dependencies for bot communication using NuGet: + +```bash + +dotnet add package Microsoft.Bot.Connector.DirectLine +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson + +``` + +* Install the Syncfusion EJ2 ASP.NET Core package: + +```bash + +dotnet add package Syncfusion.EJ2.AspNet.Core + +``` + +## Configure the Azure Bot + +1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. + +2. Enable the direct line channel: + * Go to `Channels` > `Direct Line` > `Default-Site`. + * Copy one of the displayed secret keys. + +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). + +> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. + +## Set Up Token Server + +Create a controller in your ASP.NET Core project to handle direct line token generation. Add `Controllers/TokenController.cs`: + +{% tabs %} +{% highlight cs tabtitle="TokenController.cs" %} + +using Microsoft.AspNetCore.Mvc; +using System.Net.Http; +using System.Threading.Tasks; +using Newtonsoft.Json; + +namespace YourNamespace.Controllers +{ + [ApiController] + [Route("api/[controller]")] + public class TokenController : ControllerBase + { + private readonly IConfiguration _configuration; + private readonly HttpClient _httpClient; + + public TokenController(IConfiguration configuration, IHttpClientFactory httpClientFactory) + { + _configuration = configuration; + _httpClient = httpClientFactory.CreateClient(); + } + + [HttpPost("directline/token")] + public async Task GenerateToken() + { + var directLineSecret = _configuration["DirectLine:Secret"]; + if (string.IsNullOrEmpty(directLineSecret)) + { + return BadRequest(new { error = "Direct Line secret is not configured." }); + } + + try + { + var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); + request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); + + var response = await _httpClient.SendAsync(request); + response.EnsureSuccessStatusCode(); + + var responseContent = await response.Content.ReadAsStringAsync(); + var tokenResponse = JsonConvert.DeserializeObject(responseContent); + return Ok(new { token = tokenResponse.token }); + } + catch (HttpRequestException ex) + { + return StatusCode(500, new { error = "Failed to generate Direct Line token.", details = ex.Message }); + } + } + } +} + +{% endhighlight %} +{% endtabs %} + +Add the Direct Line secret to `appsettings.json`: + +{% tabs %} +{% highlight js tabtitle="appsettings.json" %} + +{ + "DirectLine": { + "Secret": "PASTE_YOUR_DIRECT_LINE_SECRET_HERE" + } +} + +{% endhighlight %} +{% endtabs %} + +> `Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments.| + +## Configure ChatUI + +Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the Direct Line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. +Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat UI with the Direct Line API: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "You" }; + var botUserModel = new ChatUIUser { Id = "bot", User = "Bot" }; +} + +
+ + + +
+ + + + + +{% endhighlight %} +{% endtabs %} + +> Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, register `` in `_Layout.cshtml`. Include the Bot Framework Web Chat script for Direct Line functionality. + +## Configure Program.cs + +Ensure CORS and HttpClient are configured in `Program.cs`: + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddControllers().AddNewtonsoftJson(); +builder.Services.AddHttpClient(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", builder => + { + builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); + }); +}); + +var app = builder.Build(); + +app.UseCors("AllowAll"); +app.UseRouting(); +app.MapControllers(); + +app.Run(); + +{% endhighlight %} +{% endtabs %} + +## Run and Test + +### Start the Application: + +Navigate to your project folder and run: + +```bash + +dotnet run + +``` + +Open your app in the browser Hosted link to interact with your Microsoft Bot Framework chatbot. + +## Troubleshooting + +* `Token Server Error (500)`: Ensure the DirectLine:Secret in appsettings.json is correct and the token endpoint is accessible. +* `CORS Error`: Verify the CORS policy in Program.cs allows requests from your frontend URL. +* `Bot is Not Responding`: + - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it's running correctly. + - Check the bot's `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. +* `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. +* `Token Expiration`: direct line tokens are short-lived. The direct line client typically handles token refresh, but if issues persist, restart the direct line connection. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md new file mode 100644 index 0000000000..d104cd8d6d --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md @@ -0,0 +1,216 @@ +--- +layout: post +title: Integration of Dialogflow in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Dialogflow in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Dialogflow +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Google Dialogflow With ASP.NET Core Chat UI component + +The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your ASP.NET Core applications. + +## Getting Started With the ChatUI Component + +Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET Core app: +[ASP.NET Core Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). +* .NET SDK (version 6.0 or higher) for ASP.NET Core. +* Syncfusion EJ2 ASP.NET Core installed in your project. +* Dialogflow Service Account with the Dialogflow API Client role and its JSON key file. + +## Install Dependencies +* Install backend dependencies for Dialogflow and server setup using NuGet: + +```bash + +dotnet add package Google.Cloud.Dialogflow.V2 +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson + +``` +* Install the Syncfusion EJ2 ASP.NET Core package in your project: + +```bash + +dotnet add package Syncfusion.EJ2.AspNet.Core + +``` +## Set Up the Dialogflow Agent + +1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). + +2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. + +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. + +> `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. + +## Configure Node.js Backend + +Create `service-acct.json` with your Dialogflow service account credentials in your project root (or use User Secrets for development): + +{% tabs %} +{% highlight js tabtitle="service-acct.json" %} + +{ +"type": "service_account", +"project_id": "your-dialogflow-project-id", +"private_key_id": "abc123xyz...", +"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", +"client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", +... +} +{% endhighlight %} +{% endtabs %} + +Set up an API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: + +{% tabs %} +{% highlight cs tabtitle="ChatController.cs" %} + +using Google.Cloud.Dialogflow.V2; +using Google.Apis.Auth.OAuth2; +using Microsoft.AspNetCore.Mvc; +using System.Threading.Tasks; + +namespace YourNamespace.Controllers +{ + [ApiController] + [Route("api/[controller]")] + public class ChatController : ControllerBase + { + private readonly SessionsClient _sessionsClient; + private readonly string _projectId; + public ChatController(IConfiguration configuration) + { + var credential = GoogleCredential.FromFile("service-acct.json"); + _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); + _projectId = "your-dialogflow-project-id"; // Or from configuration + } + [HttpPost("message")] + public async Task SendMessage([FromBody] MessageRequest request) + { + var sessionId = request.SessionId ?? "default-session"; + var session = SessionName.FromProjectSession(_projectId, sessionId); + var queryInput = new QueryInput + { + Text = new TextInput + { + Text = request.Text, + LanguageCode = "en-US" + } + }; + try + { + var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); + var reply = response.QueryResult.FulfillmentText; + return Ok(new { reply }); + } + catch (Exception ex) + { + return StatusCode(500, new { reply = "Error connecting to Dialogflow." }); + } + } + } + public class MessageRequest + { + public string Text { get; set; } + public string SessionId { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +> Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to appsettings.json if needed. + +## Configure message send + +Use the Chat UI `messageSend` event to exchange messages. This event is triggered before a message is sent, allowing you to forward it to the backend. + +### Forward Message to backend: + +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to dialogflow and returns the response. + +### Displaying Bot response: + +Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; + var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; +} +
+ +
+ + + +{% endhighlight %} +{% endtabs %} + +> Ensure to include Syncfusion scripts and styles in _Layout.cshtml as per the getting started guide. Also, register ` in _Layout.cshtml.` + +## Run and Test + +### Start the Application: + +Navigate to your project folder and run: + +```bash + +dotnet run + +``` + +Open your app in the browser and chat with your dialogflow-powered bot. + +![ChatUI with Dialogflow](../images/dialogflow.png) + +## Troubleshooting: + +* `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. +* `CORS Error`: Configure CORS in Program.cs if needed (e.g., app.UseCors()). +* `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. +* `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. +* `Network Issues`: Confirm the application is running and the API URL is correct. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/images/dialogflow.png b/ej2-asp-core-mvc/chat-ui/images/dialogflow.png new file mode 100644 index 0000000000..8b96f608e9 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/dialogflow.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/gemini.png b/ej2-asp-core-mvc/chat-ui/images/gemini.png new file mode 100644 index 0000000000..d548f62208 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/gemini.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/openai.png b/ej2-asp-core-mvc/chat-ui/images/openai.png new file mode 100644 index 0000000000..3f56e695a9 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/openai.png differ diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs new file mode 100644 index 0000000000..9d34a474eb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs @@ -0,0 +1,79 @@ +using Mscc.GenerativeAI; + +namespace WebApplication4.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + + // Initialize prompt suggestions + ViewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + } + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); //Replace Your Model Name Here + + var response = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(response?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", response.Text); + return new JsonResult(response.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs new file mode 100644 index 0000000000..6c0054c9c0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs @@ -0,0 +1,65 @@ +using Mscc.GenerativeAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + return View(); + } + + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + + + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); //Replace Your Model Name Here + + var responseText = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(responseText?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", responseText?.Text); + return Json(responseText?.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor new file mode 100644 index 0000000000..ecd93a6004 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor @@ -0,0 +1,112 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Syncfusion.EJ2 + +@{ + ViewData["Title"] = "AI Assistance with OpenAI"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).StopRespondingClick("stopRespondingClick").Render() +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper new file mode 100644 index 0000000000..69282bbe0c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper @@ -0,0 +1,108 @@ +@using Syncfusion.EJ2.InteractiveChat +@{ + ViewData["Title"] = "AI Assistance with Gemini"; +} + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs new file mode 100644 index 0000000000..0ff4e66bf0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs @@ -0,0 +1,89 @@ +using OpenAI; +using Azure; +using Azure.AI.OpenAI; +namespace WebApplication4.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + + // Initialize prompt suggestions + ViewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + } + + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string endpoint = ""; // Replace with your Azure OpenAI endpoint + string apiKey = ""; // Replace with your Azure OpenAI API key + string deploymentName = ""; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs new file mode 100644 index 0000000000..912076e1f3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs @@ -0,0 +1,75 @@ +using OpenAI; +using OpenAI.Chat; +using Azure; +using Azure.AI.OpenAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + return View(); + } + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // Azure OpenAI configuration + string endpoint = ""; // Replace with your Azure OpenAI endpoint + string apiKey = ""; // Replace with your Azure OpenAI API key + string deploymentName = ""; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor new file mode 100644 index 0000000000..4f93076204 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor @@ -0,0 +1,103 @@ +@using Syncfusion.EJ2.InteractiveChat + +@{ + ViewData["Title"] = "AI Assistance with OpenAI"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).StopRespondingClick("stopRespondingClick").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper new file mode 100644 index 0000000000..560e6b7e1c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper @@ -0,0 +1,108 @@ +@using Syncfusion.EJ2.InteractiveChat +@{ + ViewData["Title"] = "AI Assistance with Gemini"; +} + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs new file mode 100644 index 0000000000..08e0eb9fc7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs @@ -0,0 +1,62 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using Mscc.GenerativeAI; +using Syncfusion.EJ2.InteractiveChat; +using Newtonsoft.Json; + +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); +public HomeController(ILogger logger) +{ + _logger = logger; +} +public IActionResult Index() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh", tooltip = "Refresh" }); + ViewBag.HeaderToolbar = HeaderToolbar; + var currentUser = new ChatUIUser { Id = "user1", User = "You" }; + var aiUser = new ChatUIUser { Id = "ai", User = "Gemini" }; + ViewBag.CurrentUser = currentUser; + ViewBag.AIUser = aiUser; + + return View(); +} + +[HttpPost] +public async Task GetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); // Replace Your Model Name Here + + var responseText = await model.GenerateContent(request.Prompt); + if (string.IsNullOrEmpty(responseText?.Text)) + { + _logger.LogError("Gemini AI API returned no text."); + return BadRequest("No response from Gemini AI."); + } + _logger.LogInformation("Gemini AI response received: {Response}", responseText.Text); + return Json(responseText.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini AI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string tooltip { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor new file mode 100644 index 0000000000..08eaac9cd2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor @@ -0,0 +1,87 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Newtonsoft.Json +@using Syncfusion.EJ2 +@{ + ViewData["Title"] = "AI Chat with Gemini AI"; +} + +
+ @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).HeaderText("Chat with Gemini AI").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar, ItemClicked = "itemClicked" }).HeaderIconCss("e-icons e-ai-chat").EmptyChatTemplate("#emptyChatTemplate").MessageSend("onMessageSend").Created("onCreated").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs new file mode 100644 index 0000000000..835a39f831 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs @@ -0,0 +1,75 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using OpenAI; +using OpenAI.Chat; +using Syncfusion.EJ2.InteractiveChat; +using Newtonsoft.Json; +using Azure.AI.OpenAI; +using Azure; +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); +public HomeController(ILogger logger) +{ + _logger = logger; +} + +public IActionResult Index() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh", tooltip = "Refresh" }); + ViewBag.HeaderToolbar = HeaderToolbar; + var currentUser = new ChatUIUser { Id = "user1", User = "You" }; + var aiUser = new ChatUIUser { Id = "ai", User = "Azure Open AI" }; + ViewBag.CurrentUser = currentUser; + ViewBag.AIUser = aiUser; + + return View(); +} + +[HttpPost] +public async Task GetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure Open AI."); + } + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure Open AI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string tooltip { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor new file mode 100644 index 0000000000..ec39532a80 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor @@ -0,0 +1,87 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Newtonsoft.Json +@using Syncfusion.EJ2 +@{ + ViewData["Title"] = "AI Chat with Azure Open AI"; +} + +
+ @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).HeaderText("Chat with Azure Open AI").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar, ItemClicked = "itemClicked" }).HeaderIconCss("e-icons e-ai-chat").EmptyChatTemplate("#emptyChatTemplate").MessageSend("onMessageSend").Created("onCreated").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs new file mode 100644 index 0000000000..b0ef1d5362 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs @@ -0,0 +1,62 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Mscc.GenerativeAI; // Correct namespace for Mscc.GenerativeAI package +using System.Threading.Tasks; + +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); + +public IndexModel(ILogger logger) +{ + _logger = logger; +} + +public void OnGet() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", type = "Button", iconCss = "e-icons e-refresh" }); + HeaderToolbar = HeaderToolbar; +} + +public async Task OnPostGetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); // Replace Your Model Name Here + + var response = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(response?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", response.Text); + return new JsonResult(response.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class PromptRequest +{ + public string Prompt { get; set; } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string type { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper new file mode 100644 index 0000000000..ba3e7f92f4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper @@ -0,0 +1,101 @@ +@page +@model IndexModel +@{ + ViewData["Title"] = "Chat UI with Gemini"; +} + + +
+ + + + +
+ +@section Scripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs new file mode 100644 index 0000000000..afb07f147b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs @@ -0,0 +1,73 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using System.Threading.Tasks; +using OpenAI.Chat; +using OpenAI; +using Azure; +using Azure.AI.OpenAI; +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); + +public IndexModel(ILogger logger) +{ + _logger = logger; +} + +public void OnGet() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", type = "Button", iconCss = "e-icons e-refresh" }); + HeaderToolbar = HeaderToolbar; +} + +public async Task OnPostGetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure Open AI API returned no text."); + return BadRequest("No response from Azure Open AI."); + } + + _logger.LogInformation("Azure Open AI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure Open AI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class PromptRequest +{ + public string Prompt { get; set; } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string type { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper new file mode 100644 index 0000000000..2f1a689619 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper @@ -0,0 +1,98 @@ +@page +@model IndexModel +@{ + ViewData["Title"] = "Chat UI with Azure Open AI"; +} + + +
+ + + + +
+ +@section Scripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/razor b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/razor new file mode 100644 index 0000000000..7c643cd891 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/razor @@ -0,0 +1,9 @@ +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + +@Html.EJS().DatePicker("datepicker") + .ServerTimezoneOffset(serverTimezoneOffset) + .Value(initialDate) + .Render() diff --git a/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/tagHelper new file mode 100644 index 0000000000..79f54501f7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/tagHelper @@ -0,0 +1,7 @@ + +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/timezone.cs b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/timezone.cs new file mode 100644 index 0000000000..a4db34d06a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/timezone.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers +{ + public class HomeController : Controller + { + public ActionResult Datepicker() + { + ViewBag.serverTimezoneOffset=5.5; + ViewBag.initalDate=new Date(); + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/razor b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/razor new file mode 100644 index 0000000000..0de998bc68 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/razor @@ -0,0 +1,9 @@ +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + +@Html.EJS().DateTimePicker("datetimepicker") + .ServerTimezoneOffset(serverTimezoneOffset) + .Value(initialDate) + .Render() diff --git a/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/tagHelper new file mode 100644 index 0000000000..79f54501f7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/tagHelper @@ -0,0 +1,7 @@ + +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/timezone.cs b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/timezone.cs new file mode 100644 index 0000000000..789ffb657a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/timezone.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers +{ + public class HomeController : Controller + { + public ActionResult DateTimepicker() + { + ViewBag.serverTimezoneOffset=5.5; + ViewBag.initalDate=new Date(); + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md b/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md index 9effedceeb..51d6078b84 100644 --- a/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md +++ b/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md @@ -14,7 +14,7 @@ The DatePicker component displays and maintains the selected date value based on N> if the system time zone is changed dynamically after a value is selected, the DatePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DatePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DatePicker component */ -let datepicker: DatePicker = new DatePicker({ - placeholder: "Select Date", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datepicker.appendTo('#datepicker'); +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datepicker/timezone-cs1/razor %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md b/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md index 9effedceeb..59d74e8696 100644 --- a/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md +++ b/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md @@ -14,7 +14,7 @@ The DatePicker component displays and maintains the selected date value based on N> if the system time zone is changed dynamically after a value is selected, the DatePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DatePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DatePicker component */ -let datepicker: DatePicker = new DatePicker({ - placeholder: "Select Date", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datepicker.appendTo('#datepicker'); +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datepicker/timezone-cs1/tagHelper %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md index e41385de28..f89a699b60 100644 --- a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md +++ b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md @@ -14,7 +14,7 @@ The DateTimePicker component displays and maintains the selected date and time v N> if the system time zone is changed dynamically after a value is selected, the DateTimePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DateTimePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DateTimePicker component */ -let datetimepicker: DateTimePicker = new DateTimePicker({ - placeholder: "Select Date Time", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datetimepicker.appendTo('#datetimepicker'); +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datetimepicker/timezone-cs1/razor %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md index 0dd0647856..c41cf8cf1b 100644 --- a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md +++ b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md @@ -14,7 +14,7 @@ The DateTimePicker component displays and maintains the selected date and time v N> if the system time zone is changed dynamically after a value is selected, the DateTimePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DateTimePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DateTimePicker component */ -let datetimepicker: DateTimePicker = new DateTimePicker({ - placeholder: "Select Date Time", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datetimepicker.appendTo('#datetimepicker'); \ No newline at end of file +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datetimepicker/timezone-cs1/tagHelper %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md index 50802867fc..1abe5790d7 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md @@ -28,6 +28,7 @@ The following table shows built-in toolbar items and its actions. | Cancel | Cancels the edit state.| | Search | Searches the records by the given key.| | Print | Prints the treegrid.| +| ColumnChooser | Opens a dialog to select column visibility.| | ExcelExport | Exports the treegrid to Excel.| | PdfExport | Exports the treegrid to PDF.| | WordExport | Exports the treegrid to Word.| diff --git a/ej2-asp-core-mvc/tree-grid/tool-bar.md b/ej2-asp-core-mvc/tree-grid/tool-bar.md index 909be27ff5..686fb88ef2 100644 --- a/ej2-asp-core-mvc/tree-grid/tool-bar.md +++ b/ej2-asp-core-mvc/tree-grid/tool-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Tool Bar in ##Platform_Name## Tree Grid Component +title: Toolbar in ##Platform_Name## Tree Grid Component | Syncfusion description: Learn here all about Tool Bar in Syncfusion ##Platform_Name## Tree Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Tool Bar @@ -9,7 +9,7 @@ documentation: ug --- -# ToolBar +# ToolBar in TreeGrid Component The TreeGrid provides ToolBar support to handle treegrid actions. The [`Toolbar`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGrid~Toolbar.html) property accepts either the collection of built-in toolbar items and [`ItemModel`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Navigations.ToolbarItem_members.html) objects for custom toolbar items or HTML element ID for toolbar template. @@ -32,6 +32,7 @@ The following table shows built-in toolbar items and its actions. | Cancel | Cancels the edit state.| | Search | Searches the records by the given key.| | Print | Prints the treegrid.| +| ColumnChooser | Opens a dialog to select column visibility.| | ExcelExport | Exports the treegrid to Excel.| | PdfExport | Exports the treegrid to PDF.| | WordExport | Exports the treegrid to Word.| diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 49e7c72bff..ca75e3a4d5 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -200,6 +200,16 @@