diff --git a/docs/xplat/astro.config.ts b/docs/xplat/astro.config.ts index 0f2866b008..25b988dca1 100644 --- a/docs/xplat/astro.config.ts +++ b/docs/xplat/astro.config.ts @@ -385,6 +385,13 @@ export default createDocsSite({ '@xplat-images': path.resolve(__dirname, 'src/assets/images'), }, }, - server: { fs: { strict: false } }, + server: { + fs: { strict: false }, + ...(mode === 'development' && platform === 'Blazor' && demosBaseUrl ? { + proxy: { + '/code-viewer': { target: demosBaseUrl, changeOrigin: true, secure: false }, + }, + } : {}), + }, }, }); diff --git a/docs/xplat/src/content/en/components/bullet-graph.mdx b/docs/xplat/src/content/en/components/bullet-graph.mdx index 3f982e25d1..cee3e6804e 100644 --- a/docs/xplat/src/content/en/components/bullet-graph.mdx +++ b/docs/xplat/src/content/en/components/bullet-graph.mdx @@ -49,7 +49,7 @@ The requires the following modules: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbBulletGraphModule)); diff --git a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx index 038a830cde..9ec0318941 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx @@ -55,7 +55,7 @@ Although {Platform} charts support rendering of multiple data sources by binding -```razor +```csharp this.CategoryChart.DataSource = FlattenDataSource.Create(); this.FinancialChart.DataSource = FlattenDataSource.Create(); diff --git a/docs/xplat/src/content/en/components/customize-marker-display-in-blazor-charts.mdx b/docs/xplat/src/content/en/components/customize-marker-display-in-blazor-charts.mdx index cc5447614e..e422a1762e 100644 --- a/docs/xplat/src/content/en/components/customize-marker-display-in-blazor-charts.mdx +++ b/docs/xplat/src/content/en/components/customize-marker-display-in-blazor-charts.mdx @@ -43,7 +43,7 @@ The Volume property value of the Blazor Chart will be used as the size of the -```razor +```csharp public record SampleDataType ( string Name, double XValue, diff --git a/docs/xplat/src/content/en/components/dashboard-tile.mdx b/docs/xplat/src/content/en/components/dashboard-tile.mdx index 10d60f0e22..11f6aa5ce3 100644 --- a/docs/xplat/src/content/en/components/dashboard-tile.mdx +++ b/docs/xplat/src/content/en/components/dashboard-tile.mdx @@ -118,7 +118,7 @@ Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file: The following modules are suggested when using the Dashboard Tile component: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx index 8f29a9fe99..63cb3d8809 100644 --- a/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -86,7 +86,7 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx b/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx index 943384ccea..cf2b4287b4 100644 --- a/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx +++ b/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx @@ -83,7 +83,7 @@ export enum EsriStyle { -```razor +```csharp public class EsriStyle { // these Esri maps show geographic tiles for the whole of world diff --git a/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx b/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx index a4666be9f8..de5d8362ab 100644 --- a/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx +++ b/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx @@ -143,7 +143,7 @@ export default class WorldConnections { -```razor +```csharp public class WorldConnections { diff --git a/docs/xplat/src/content/en/components/geo-map.mdx b/docs/xplat/src/content/en/components/geo-map.mdx index c30681360e..139d6fe978 100644 --- a/docs/xplat/src/content/en/components/geo-map.mdx +++ b/docs/xplat/src/content/en/components/geo-map.mdx @@ -57,7 +57,7 @@ The requires the following modules, however the -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx index 80f519ed4b..062421d278 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx @@ -129,7 +129,8 @@ public webGridCountryDropDownTemplate: IgcRenderFunction In order to handle the selection change, we need the change event. The emitted event arguments contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo. -```razor + +```javascript //In Javascript igRegisterScript("CountryChange", (ctx) => { const value = e.detail.newValue; @@ -150,6 +151,7 @@ igRegisterScript("CountryChange", (ctx) => { } }); ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx index 99280eb4ab..dd976a6c83 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx @@ -317,7 +317,6 @@ If you want to provide a custom template which will be applied to a cell, you ca and pass the template: ```razor -// In JavaScript igRegisterScript("WebGridCellEditCellTemplate", (ctx) => { let cellValues = []; @@ -1165,7 +1164,8 @@ function handleCellEdit(args: IgrGridEditEventArgs): void { -```razor + +```javascript // In JavaScript igRegisterScript("HandleCellEdit", (ev) => { var d = ev.detail; @@ -1177,6 +1177,7 @@ igRegisterScript("HandleCellEdit", (ev) => { } }, false); ``` + If the value entered in a cell under the **Units On Order** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and the user will be alerted to the cancellation. @@ -1206,7 +1207,8 @@ public webTreeGridCellEdit(event: CustomEvent): void { -```razor + +```javascript // In JavaScript igRegisterScript("HandleCellEdit", (ev) => { const column = event.detail.column; @@ -1280,7 +1282,8 @@ Here, we are validating two columns. If the user tries to set an invalid value f -```razor + +```javascript // In JavaScript igRegisterScript("WebGridEditingEventsCellEdit", (ev) => { var d = ev.detail; @@ -1294,6 +1297,7 @@ igRegisterScript("WebGridEditingEventsCellEdit", (ev) => { }, false); ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx index 33162f715f..3cf91433b3 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx @@ -269,8 +269,9 @@ const columnPinning = (event: IgrPinColumnCancellableEventArgs) = { ```razor <{ComponentSelector} Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/> +``` - +```javascript //In JavaScript function onColumnPin(e) { if (e.detail.column.field == "Country") { @@ -281,6 +282,7 @@ function onColumnPin(e) { igRegisterScript("onColumnPin", onColumnPin, false); ``` + ## Pinning Position @@ -446,7 +448,10 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { +``` + +```javascript // In JavaScript igRegisterScript("WebGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; @@ -462,6 +467,7 @@ igRegisterScript("WebGridPinHeaderTemplate", (ctx) => { `; }, false); ``` + @@ -610,10 +616,11 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { +``` +```javascript // In JavaScript - igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; window.toggleColumnPin = function toggleColumnPin(field) { @@ -628,6 +635,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { `; }, false); ``` + ```tsx diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx index bf39e46c50..fe63c8506d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx @@ -682,12 +682,16 @@ const formatCurrency = (value: number) => { +``` + +```javascript //In Javascript igRegisterScript("CurrencyFormatter", (value) => { return `$ ${value.toFixed(0)}`; }, false); ``` + @@ -705,6 +709,7 @@ public init(column: IgxColumnComponent) { default: return; } + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx index e3466e55c7..3a1eff8f76 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx @@ -153,7 +153,9 @@ public onSorting(event: IgcSortingEventArgs) { SortingScript="SortingHandler" RowEditable="true"> +``` +```javascript //In JavaScript function SortingHandler() { grid.endEdit(true); @@ -161,6 +163,7 @@ function SortingHandler() { igRegisterScript("SortingHandler", SortingHandler, false); ``` + @@ -172,6 +175,7 @@ function onSorting(args: IgrSortingEventArgs) { <{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}> + ``` diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx index cd6dee57ce..b1aae85464 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx @@ -302,7 +302,9 @@ The following code demonstrates how to customize the Excel style filter menu usi FilterMode="FilterMode.ExcelStyleFilter" ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate"> +``` +```javascript // In JavaScript igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { var html = window.igTemplating.html; @@ -310,6 +312,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { }, false); ``` + @@ -322,6 +325,7 @@ constructor() { public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => { return html`Continued` } + ``` @@ -346,6 +350,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx index 056038013b..6b3d17712a 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx @@ -189,9 +189,9 @@ Let's try the API to demonstrate how to achieve common scenarios like user input -```razor -// In JavaScript +```javascript +// In JavaScript igRegisterScript("WebGridCustomKBNav", (evtArgs) => { const args = evtArgs.detail; const target = args.target; @@ -207,6 +207,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { }, false); ``` + @@ -300,10 +301,9 @@ Based on the event arg values we identified two cases, where to provide our own -```razor +```javascript // In JavaScript - igRegisterScript("WebGridCustomKBNav", (evtArgs) => { const args = evtArgs.detail; const target = args.target; @@ -323,6 +323,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { }, false); ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx index 1e595dab2f..820fc8365d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx @@ -639,7 +639,9 @@ this.grid.rowEditActionsTemplate = (endRowEdit: IgcGridRowEditActionsTemplateCon ```razor <{ComponentSelector} Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate"> +``` +```javascript //In JavaScript: igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx index 616114444e..98868d0a65 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx @@ -613,7 +613,9 @@ constructor() { ```razor +``` +```javascript // In JavaScript igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; @@ -641,6 +643,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } ``` + @@ -704,7 +707,9 @@ constructor() { ```razor +``` +```javascript // In JavaScript igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; @@ -732,6 +737,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } ``` + @@ -1031,7 +1037,8 @@ public webTreeGridReorderRowStartHandler(args: CustomEvent -```razor + +```javascript //in JavaScript igRegisterScript("WebTreeGridReorderRowStartHandler", (args) => { const draggedRow = args.detail.dragElement; @@ -1208,8 +1215,10 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { ```razor +``` -//In JavaScript +```javascript +//in JavaScript igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); @@ -1236,6 +1245,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx index 15de6f1447..333cffaba4 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx @@ -198,9 +198,9 @@ const rowPinning = (event: IgrPinRowEventArgs) => { -```razor -// In JavaScript +```javascript +// In JavaScript function rowPinningHandler(event) { event.detail.insertAtIndex = 0; } @@ -208,6 +208,7 @@ function rowPinningHandler(event) { igRegisterScript("rowPinningHandler", rowPinningHandler, false); ``` + ## Pinning Position @@ -289,6 +290,9 @@ This can be done by adding an extra column with a cell template containing the c ```razor +``` + +```javascript // In Javascript igRegisterScript("WebGridRowPinCellTemplate", (ctx) => { @@ -385,6 +389,9 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => { ```razor +``` + +```javascript // In Javascript igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => { diff --git a/docs/xplat/src/content/en/components/grids/_shared/search.mdx b/docs/xplat/src/content/en/components/grids/_shared/search.mdx index 030acfbd4e..88307a3a97 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/search.mdx @@ -891,7 +891,7 @@ To do this, let's go and grab the , -```razor +```csharp // eg. Program.cs register the following: builder.Services.AddIgniteUIBlazor( typeof(IgbGridModule), @@ -904,7 +904,7 @@ builder.Services.AddIgniteUIBlazor( -```razor +```csharp // eg. Program.cs register the following: builder.Services.AddIgniteUIBlazor( typeof(IgbTreeGridModule), diff --git a/docs/xplat/src/content/en/components/grids/_shared/size.mdx b/docs/xplat/src/content/en/components/grids/_shared/size.mdx index bf9486c70f..593640447d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/size.mdx @@ -870,16 +870,16 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio -```razor -@code { - // In JavaScript + +```javascript +// In JavaScript igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => { var newVal = evtArgs.newValue.toLowerCase(); var grid = document.getElementById("grid"); grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); }, false); -} ``` + diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx index f9023535ba..3dc0d02972 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx @@ -708,7 +708,8 @@ function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) { -```razor + +```javascript // In Javascript public void OnColumnInit(IgbColumnComponentEventArgs args) { @@ -719,6 +720,7 @@ public void OnColumnInit(IgbColumnComponentEventArgs args) } } ``` + @@ -873,7 +875,8 @@ public onValueInit(event: any) { -```razor + +```javascript // In Javascript const totalSale = (members, data) => { return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0); @@ -922,6 +925,7 @@ igRegisterScript("OnValueInit", (args) => { }, false); ``` + - In the `DimensionInit` event handler set all custom implementations: diff --git a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx index 6c84020ced..de3bf397b4 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx @@ -571,8 +571,8 @@ class MySummary extends IgcNumberSummaryOperand { -```razor +```javascript //In JavaScript class WebGridDiscontinuedSummary { operate(data, allData, fieldName) { @@ -603,12 +603,13 @@ class WebGridDiscontinuedSummary { } ``` + -```razor +```csharp //In JavaScript class PtoSummary { @@ -642,6 +643,7 @@ class PtoSummary { return result; } } + ``` @@ -659,6 +661,7 @@ interface IgxSummaryResult { summaryResult: any; } ``` + @@ -746,6 +749,9 @@ export class GridComponent implements OnInit { ColumnInitScript="WebGridCustomSummary"> +``` + +```javascript // In Javascript igRegisterScript("WebGridCustomSummary", (event) => { if (event.detail.field === "UnitsInStock") { @@ -754,6 +760,7 @@ igRegisterScript("WebGridCustomSummary", (event) => { }, false); ``` + @@ -813,6 +820,9 @@ export class HierarchicalGridComponent implements OnInit { ColumnInitScript="WebHierarchicalGridCustomSummary"> +``` + +```javascript // In Javascript igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { if (event.detail.field === "GrammyAwards") { @@ -821,6 +831,7 @@ igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { }, false); ``` + @@ -876,6 +887,9 @@ export class TreeGridComponent implements OnInit { ColumnInitScript="WebTreeGridCustomSummary"> +``` + +```javascript // In Javascript igRegisterScript("WebTreeGridCustomSummary", (event) => { if (event.detail.field === "Title") { @@ -884,6 +898,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { }, false); ``` + @@ -927,7 +942,7 @@ class MySummary extends IgcNumberSummaryOperand { -```razor +```csharp class WebGridDiscontinuedSummary { operate(data, allData, fieldName) { const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]); @@ -971,7 +986,7 @@ class MySummary extends IgcNumberSummaryOperand { ``` -```razor +```csharp class PtoSummary { operate(data, allData, fieldName) { const result = []; diff --git a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx index 30d6d57530..93dcf29402 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx @@ -470,7 +470,9 @@ public rowIslandToolbarTemplate = () => { +``` +```javascript //In JavaScript: igRegisterScript("RowIslandToolbarTemplate", () => { var html = window.igTemplating.html; @@ -485,6 +487,7 @@ igRegisterScript("RowIslandToolbarTemplate", () => { }, false); ``` + @@ -1085,7 +1088,8 @@ public configureExport(evt: CustomEvent) { -```razor + +```javascript // In Javascript igRegisterScript("WebGridToolbarExporting", (evt) => { const args = evt.detail; @@ -1096,6 +1100,7 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { }); }, false); ``` + @@ -1148,6 +1153,9 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { ```razor <{ComponentSelector} ToolbarExportingScript="ConfigureExport"> +``` + +```javascript // In Javascript igRegisterScript("ConfigureExport", (evt) => { const args = evt.detail; @@ -1210,6 +1218,9 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { ```razor <{ComponentSelector} ToolbarExportingScript="ConfigureExport"> +``` + +```javascript // In Javascript igRegisterScript("ConfigureExport", (evt) => { const args = evt.detail; diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx index 7ec92959c3..fc2c56031c 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx @@ -201,7 +201,7 @@ For more details on how to customize the appearance of the grid, you may have a The  requires the following modules: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule)); @@ -455,7 +455,9 @@ public formatUppercase(value: string) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("UpperCaseTemplate", (ctx) => { @@ -541,7 +543,9 @@ public formatTitleCase(value: string) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("NameCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -699,7 +703,9 @@ function formatTitleCase(value: string) { +``` +```javascript //In JavaScript: igRegisterScript("NameCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -836,7 +842,9 @@ function updateValue(value: number) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("PriceCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -987,7 +995,9 @@ column.bodyTemplate = smallViewTemplate; column.BodyTemplateScript = "NormalViewTemplate"; } } +``` +```javascript //In JavaScript: igRegisterScript("NormalViewTemplate", (ctx) => { var html = window.igTemplating.html; @@ -1420,7 +1430,7 @@ interface AminoAcid { -```razor +```csharp public class AminoAcid { public string Name { get; set; } @@ -1634,7 +1644,9 @@ function abbreviationLongCellTemplate(ctx: IgrCellTemplateContext) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("AbbreviationLongCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -1708,7 +1720,7 @@ export const EMPLOYEE_DATA = [ -```razor +```csharp public class EmployeesNestedData : List { public EmployeesNestedData() @@ -1892,7 +1904,9 @@ function addressCellTemplate(ctx: IgrCellTemplateContext) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -1963,7 +1977,7 @@ export const DATA: any[] = [ -```razor +```csharp public class CustomersData : List { public CustomersData() @@ -2104,7 +2118,9 @@ function addressCellTemplate(ctx: IgrCellTemplateContext) { +``` +```javascript //In JavaScript: igRegisterScript("AddressCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -2257,7 +2273,9 @@ function addressEditCellTemplate(ctx: IgrCellTemplateContext) { +``` +```javascript //In JavaScript: igRegisterScript("AddressEditCellTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx index dda009cf83..197e8436af 100644 --- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx @@ -449,8 +449,9 @@ const template = (ctx: IgrGroupByRowTemplateContext) => { ```razor +``` - +```javascript //In JavaScript: igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { var html = window.igTemplating.html; @@ -504,6 +505,9 @@ public groupByRowSelectorTemplate = (ctx: IgcGroupByRowSelectorTemplateContext) ```razor +``` + +```javascript //In Javascript igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { var html = window.igTemplating.html; @@ -551,6 +555,9 @@ public groupByRowSelectorTemplate = (ctx: IgcGroupByRowSelectorTemplateContext) ```razor +``` + +```javascript //In Javascript igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx b/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx index cefd8605c2..d00e690a9f 100644 --- a/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx @@ -101,7 +101,8 @@ Context of the template is the master record data, so that values from the maste -```razor + +```javascript // In JavaScript igRegisterScript("DetailTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx index aff3a2973f..8473349a1a 100644 --- a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx @@ -175,7 +175,9 @@ public get textArea() { +``` +```javascript // In JavaScript igRegisterScript("WebGridPasteFromExcel", (evtArgs) => { const grid = document.getElementById("grid"); diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx index 7812271c94..a3de6fb631 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx @@ -147,7 +147,7 @@ For more details on how to customize the appearance of the hierarchical grid, yo ### Component Modules -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule)); @@ -224,7 +224,7 @@ export const singers = [{ -```razor +```csharp public class SingersData : List { public SingersData() diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx index 5748d76a92..c62e73260b 100644 --- a/docs/xplat/src/content/en/components/grids/list.mdx +++ b/docs/xplat/src/content/en/components/grids/list.mdx @@ -68,7 +68,7 @@ Before using the , you need to register it as -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx index 72a2132bb6..62a1cf8d60 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx @@ -131,7 +131,7 @@ For more details on how to customize the appearance of the tree grid, you may ha ### Component Modules -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule)); @@ -220,7 +220,7 @@ const EMPLOYEE_DATA = [ -```razor +```csharp public class EmployeesNestedDataItem { public double ID { get; set; } @@ -394,7 +394,7 @@ When we are using the **primary and foreign keys** option, every data object con -```razor +```csharp public class EmployeesFlatDataItem { public double Age { get; set; } diff --git a/docs/xplat/src/content/en/components/grids/tree.mdx b/docs/xplat/src/content/en/components/grids/tree.mdx index 9cee3d04fc..f09205da45 100644 --- a/docs/xplat/src/content/en/components/grids/tree.mdx +++ b/docs/xplat/src/content/en/components/grids/tree.mdx @@ -95,7 +95,7 @@ You will also need to link an additional CSS file to apply the styling to the -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/inputs/badge.mdx b/docs/xplat/src/content/en/components/inputs/badge.mdx index abdc93c39e..a44d73483c 100644 --- a/docs/xplat/src/content/en/components/inputs/badge.mdx +++ b/docs/xplat/src/content/en/components/inputs/badge.mdx @@ -75,7 +75,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); diff --git a/docs/xplat/src/content/en/components/inputs/button-group.mdx b/docs/xplat/src/content/en/components/inputs/button-group.mdx index 9b69674be5..11c9d61eb9 100644 --- a/docs/xplat/src/content/en/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/en/components/inputs/button-group.mdx @@ -70,7 +70,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx index 9f5713e811..44d56b83de 100644 --- a/docs/xplat/src/content/en/components/inputs/button.mdx +++ b/docs/xplat/src/content/en/components/inputs/button.mdx @@ -84,7 +84,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); diff --git a/docs/xplat/src/content/en/components/inputs/checkbox.mdx b/docs/xplat/src/content/en/components/inputs/checkbox.mdx index 94628f6c08..d26e8ccab9 100644 --- a/docs/xplat/src/content/en/components/inputs/checkbox.mdx +++ b/docs/xplat/src/content/en/components/inputs/checkbox.mdx @@ -77,7 +77,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule)); diff --git a/docs/xplat/src/content/en/components/inputs/chip.mdx b/docs/xplat/src/content/en/components/inputs/chip.mdx index 5f763b7057..dc66384f03 100644 --- a/docs/xplat/src/content/en/components/inputs/chip.mdx +++ b/docs/xplat/src/content/en/components/inputs/chip.mdx @@ -75,7 +75,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); diff --git a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx index 32be7f5ba2..405284246e 100644 --- a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx +++ b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx @@ -77,7 +77,7 @@ IgrCircularProgressModule.register(); Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule)); diff --git a/docs/xplat/src/content/en/components/inputs/color-editor.mdx b/docs/xplat/src/content/en/components/inputs/color-editor.mdx index c0ebfa28f8..2798b6abb3 100644 --- a/docs/xplat/src/content/en/components/inputs/color-editor.mdx +++ b/docs/xplat/src/content/en/components/inputs/color-editor.mdx @@ -87,7 +87,7 @@ First, add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** The following modules are required when using the Dashboard Tile component: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( typeof(IgbColorEditorModule) diff --git a/docs/xplat/src/content/en/components/inputs/combo/features.mdx b/docs/xplat/src/content/en/components/inputs/combo/features.mdx index 562a1e9d48..ec5a3c7443 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/features.mdx @@ -43,7 +43,7 @@ defineComponents(IgcComboComponent, IgcSwitchComponent); -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); diff --git a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx index 5c5db0b007..c83545d1af 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx @@ -60,7 +60,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] To get started with the component, first we need to register its module as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); diff --git a/docs/xplat/src/content/en/components/inputs/date-time-input.mdx b/docs/xplat/src/content/en/components/inputs/date-time-input.mdx index 334a4d7c41..2997780af1 100644 --- a/docs/xplat/src/content/en/components/inputs/date-time-input.mdx +++ b/docs/xplat/src/content/en/components/inputs/date-time-input.mdx @@ -74,7 +74,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule)); diff --git a/docs/xplat/src/content/en/components/inputs/dropdown.mdx b/docs/xplat/src/content/en/components/inputs/dropdown.mdx index fc820e9d49..2f61c415b5 100644 --- a/docs/xplat/src/content/en/components/inputs/dropdown.mdx +++ b/docs/xplat/src/content/en/components/inputs/dropdown.mdx @@ -83,7 +83,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); diff --git a/docs/xplat/src/content/en/components/inputs/highlight.mdx b/docs/xplat/src/content/en/components/inputs/highlight.mdx index c8763a263e..75db891aad 100644 --- a/docs/xplat/src/content/en/components/inputs/highlight.mdx +++ b/docs/xplat/src/content/en/components/inputs/highlight.mdx @@ -63,7 +63,7 @@ dotnet add package IgniteUI.Blazor --version {PackageVerLatest} Register the module in the `Program.cs` file as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbHighlightModule)); diff --git a/docs/xplat/src/content/en/components/inputs/icon-button.mdx b/docs/xplat/src/content/en/components/inputs/icon-button.mdx index 89f102e17f..7cc1af631d 100644 --- a/docs/xplat/src/content/en/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/en/components/inputs/icon-button.mdx @@ -76,7 +76,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule)); diff --git a/docs/xplat/src/content/en/components/inputs/input.mdx b/docs/xplat/src/content/en/components/inputs/input.mdx index c6799a1b9b..525ae26e6a 100644 --- a/docs/xplat/src/content/en/components/inputs/input.mdx +++ b/docs/xplat/src/content/en/components/inputs/input.mdx @@ -45,7 +45,7 @@ To get started with the Input component, you first need to register its module. -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule)); diff --git a/docs/xplat/src/content/en/components/inputs/linear-progress.mdx b/docs/xplat/src/content/en/components/inputs/linear-progress.mdx index 4c5ffb5ec9..437b1cff6c 100644 --- a/docs/xplat/src/content/en/components/inputs/linear-progress.mdx +++ b/docs/xplat/src/content/en/components/inputs/linear-progress.mdx @@ -75,7 +75,7 @@ IgrLinearProgressModule.register(); Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule)); diff --git a/docs/xplat/src/content/en/components/inputs/mask-input.mdx b/docs/xplat/src/content/en/components/inputs/mask-input.mdx index 2d57914938..0887b11b36 100644 --- a/docs/xplat/src/content/en/components/inputs/mask-input.mdx +++ b/docs/xplat/src/content/en/components/inputs/mask-input.mdx @@ -86,7 +86,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule)); diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx index 6072a9aa00..74c4565b93 100644 --- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx +++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx @@ -180,7 +180,8 @@ this.queryBuilder.addEventListener('expressionTreeChange', (e: CustomEvent is a bindable property which means you can use `ExpressionTreeChangeScript` to receive notifications when the end-user changes the UI by creating, editing or removing conditions. -```razor + +```javascript // In JavaScript igRegisterScript("WebQueryBuilderExpressionTreeChange", (evtArgs) => { const expressionTree = evtArgs.detail; @@ -408,7 +409,8 @@ private buildSearchValueTemplate(ctx: IgcQueryBuilderSearchValueContext) { ``` -```razor + +```javascript // In JavaScript igRegisterScript("SearchValueTemplate", (ctx) => { const field = ctx.selectedField?.field; @@ -661,7 +663,8 @@ For the Region Select example: new() { Field = "Region", DataType = GridColumnDataType.String } ``` -```razor + +```javascript // In JavaScript // Template function buildRegionSelect(ctx) { @@ -691,7 +694,8 @@ For the Status Radio Group example: new() { Field = "OrderStatus", DataType = GridColumnDataType.String } ``` -```razor + +```javascript // In JavaScript // Template function buildStatusRadios(ctx) { @@ -732,7 +736,8 @@ For the Date Picker example: new() { Field = "OrderDate", DataType = GridColumnDataType.Date } ``` -```razor + +```javascript // In JavaScript // Template function buildDatePicker(ctx) { @@ -771,7 +776,8 @@ new() } ``` -```razor + +```javascript // In JavaScript // Template function buildTimeInput(ctx) { @@ -803,7 +809,8 @@ new() { Field = "OrderID", DataType = GridColumnDataType.Number } new() { Field = "IsRushOrder", DataType = GridColumnDataType.Boolean } ``` -```razor + +```javascript // In JavaScript // Template that handles all these types function buildDefaultInput(ctx, equalityCondition) { diff --git a/docs/xplat/src/content/en/components/inputs/radio.mdx b/docs/xplat/src/content/en/components/inputs/radio.mdx index 449dd26f7a..a70a83fe9f 100644 --- a/docs/xplat/src/content/en/components/inputs/radio.mdx +++ b/docs/xplat/src/content/en/components/inputs/radio.mdx @@ -79,7 +79,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the and the , you need to register them as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/inputs/rating.mdx b/docs/xplat/src/content/en/components/inputs/rating.mdx index f5f53f4540..bd4348a01d 100644 --- a/docs/xplat/src/content/en/components/inputs/rating.mdx +++ b/docs/xplat/src/content/en/components/inputs/rating.mdx @@ -54,7 +54,7 @@ Before using the , you need to register it a -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); diff --git a/docs/xplat/src/content/en/components/inputs/ripple.mdx b/docs/xplat/src/content/en/components/inputs/ripple.mdx index 36224d1573..5b82b75910 100644 --- a/docs/xplat/src/content/en/components/inputs/ripple.mdx +++ b/docs/xplat/src/content/en/components/inputs/ripple.mdx @@ -74,7 +74,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); diff --git a/docs/xplat/src/content/en/components/inputs/select.mdx b/docs/xplat/src/content/en/components/inputs/select.mdx index e6049045bb..2d7f5983ab 100644 --- a/docs/xplat/src/content/en/components/inputs/select.mdx +++ b/docs/xplat/src/content/en/components/inputs/select.mdx @@ -61,7 +61,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] Before using the component, you need to register it together with its additional components: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); diff --git a/docs/xplat/src/content/en/components/inputs/slider.mdx b/docs/xplat/src/content/en/components/inputs/slider.mdx index 59c28d70c3..8c575b9ba9 100644 --- a/docs/xplat/src/content/en/components/inputs/slider.mdx +++ b/docs/xplat/src/content/en/components/inputs/slider.mdx @@ -75,7 +75,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the and , you need to register them as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/inputs/switch.mdx b/docs/xplat/src/content/en/components/inputs/switch.mdx index 3a08b81f9d..2897b3e34e 100644 --- a/docs/xplat/src/content/en/components/inputs/switch.mdx +++ b/docs/xplat/src/content/en/components/inputs/switch.mdx @@ -80,7 +80,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); diff --git a/docs/xplat/src/content/en/components/inputs/text-area.mdx b/docs/xplat/src/content/en/components/inputs/text-area.mdx index 61a622ff8f..6b17750afd 100644 --- a/docs/xplat/src/content/en/components/inputs/text-area.mdx +++ b/docs/xplat/src/content/en/components/inputs/text-area.mdx @@ -30,7 +30,7 @@ The {ProductName} Text Area represents a multi-line plain-text editing control, -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule)); diff --git a/docs/xplat/src/content/en/components/inputs/tooltip.mdx b/docs/xplat/src/content/en/components/inputs/tooltip.mdx index ad07606beb..81b5623c6d 100644 --- a/docs/xplat/src/content/en/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/en/components/inputs/tooltip.mdx @@ -75,7 +75,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); diff --git a/docs/xplat/src/content/en/components/layouts/accordion.mdx b/docs/xplat/src/content/en/components/layouts/accordion.mdx index a3e4235fb8..c12e05d3b8 100644 --- a/docs/xplat/src/content/en/components/layouts/accordion.mdx +++ b/docs/xplat/src/content/en/components/layouts/accordion.mdx @@ -86,7 +86,7 @@ Before using the , you need to register i -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); diff --git a/docs/xplat/src/content/en/components/layouts/avatar.mdx b/docs/xplat/src/content/en/components/layouts/avatar.mdx index 1ac804ffdd..832e65470b 100644 --- a/docs/xplat/src/content/en/components/layouts/avatar.mdx +++ b/docs/xplat/src/content/en/components/layouts/avatar.mdx @@ -62,7 +62,7 @@ Before using the , you need to register it a -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); diff --git a/docs/xplat/src/content/en/components/layouts/card.mdx b/docs/xplat/src/content/en/components/layouts/card.mdx index 098d4c0906..20df92c3ee 100644 --- a/docs/xplat/src/content/en/components/layouts/card.mdx +++ b/docs/xplat/src/content/en/components/layouts/card.mdx @@ -71,7 +71,7 @@ Before using the , you need to register it as -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule)); diff --git a/docs/xplat/src/content/en/components/layouts/carousel.mdx b/docs/xplat/src/content/en/components/layouts/carousel.mdx index f95deb72ee..9daaa57c92 100644 --- a/docs/xplat/src/content/en/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/en/components/layouts/carousel.mdx @@ -73,7 +73,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); diff --git a/docs/xplat/src/content/en/components/layouts/divider.mdx b/docs/xplat/src/content/en/components/layouts/divider.mdx index 953e8a245e..27ac790b81 100644 --- a/docs/xplat/src/content/en/components/layouts/divider.mdx +++ b/docs/xplat/src/content/en/components/layouts/divider.mdx @@ -64,7 +64,7 @@ Before using the , you need to register it -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule)); diff --git a/docs/xplat/src/content/en/components/layouts/icon.mdx b/docs/xplat/src/content/en/components/layouts/icon.mdx index 39323c4290..6bdd4a4e51 100644 --- a/docs/xplat/src/content/en/components/layouts/icon.mdx +++ b/docs/xplat/src/content/en/components/layouts/icon.mdx @@ -50,7 +50,7 @@ Before using the , you need to register it as -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); diff --git a/docs/xplat/src/content/en/components/layouts/splitter.mdx b/docs/xplat/src/content/en/components/layouts/splitter.mdx index fd1b31a960..9c83d9efca 100644 --- a/docs/xplat/src/content/en/components/layouts/splitter.mdx +++ b/docs/xplat/src/content/en/components/layouts/splitter.mdx @@ -66,7 +66,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/layouts/stepper.mdx b/docs/xplat/src/content/en/components/layouts/stepper.mdx index 112a11fd92..aeeab51bca 100644 --- a/docs/xplat/src/content/en/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/en/components/layouts/stepper.mdx @@ -78,7 +78,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/layouts/tabs.mdx b/docs/xplat/src/content/en/components/layouts/tabs.mdx index e1dc948dbf..045bf31a87 100644 --- a/docs/xplat/src/content/en/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/en/components/layouts/tabs.mdx @@ -68,7 +68,7 @@ import { IgrTabs, IgrTab } from "igniteui-react"; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule)); diff --git a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx index 1ce47e45d9..c490d3a606 100644 --- a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx @@ -98,7 +98,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule)); diff --git a/docs/xplat/src/content/en/components/linear-gauge.mdx b/docs/xplat/src/content/en/components/linear-gauge.mdx index 509c071854..64f6ca7123 100644 --- a/docs/xplat/src/content/en/components/linear-gauge.mdx +++ b/docs/xplat/src/content/en/components/linear-gauge.mdx @@ -45,7 +45,7 @@ The requires the following modules: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbLinearGaugeModule)); diff --git a/docs/xplat/src/content/en/components/menus/navbar.mdx b/docs/xplat/src/content/en/components/menus/navbar.mdx index d7f3103193..3ef1f48781 100644 --- a/docs/xplat/src/content/en/components/menus/navbar.mdx +++ b/docs/xplat/src/content/en/components/menus/navbar.mdx @@ -42,7 +42,7 @@ Before using the , you need to register it a -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule)); diff --git a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx index 0bfcf19a51..e889eb60a7 100644 --- a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx @@ -66,7 +66,7 @@ Before using the , you need to register i -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/menus/toolbar.mdx b/docs/xplat/src/content/en/components/menus/toolbar.mdx index 68f7bb67c7..6c9821fc8c 100644 --- a/docs/xplat/src/content/en/components/menus/toolbar.mdx +++ b/docs/xplat/src/content/en/components/menus/toolbar.mdx @@ -110,7 +110,7 @@ Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file: The following modules are required when using the with the component and it's features. -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/notifications/banner.mdx b/docs/xplat/src/content/en/components/notifications/banner.mdx index 7391020d0d..511f40740b 100644 --- a/docs/xplat/src/content/en/components/notifications/banner.mdx +++ b/docs/xplat/src/content/en/components/notifications/banner.mdx @@ -70,7 +70,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; Before using the , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); @@ -388,7 +388,8 @@ banner.addEventListener('igcClosing', (event) => { -```razor + +```javascript //In JavaScript: function handleClosing() { const banner = document.getElementById('banner'); diff --git a/docs/xplat/src/content/en/components/notifications/dialog.mdx b/docs/xplat/src/content/en/components/notifications/dialog.mdx index 3c906a11c9..bd3773e05c 100644 --- a/docs/xplat/src/content/en/components/notifications/dialog.mdx +++ b/docs/xplat/src/content/en/components/notifications/dialog.mdx @@ -79,7 +79,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] Before using the {Platform} , you need to register it as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDialogModule)); diff --git a/docs/xplat/src/content/en/components/notifications/snackbar.mdx b/docs/xplat/src/content/en/components/notifications/snackbar.mdx index 1946ef2aa4..f8bae568c1 100644 --- a/docs/xplat/src/content/en/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/en/components/notifications/snackbar.mdx @@ -66,7 +66,7 @@ Before using the , you need to register it -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule)); diff --git a/docs/xplat/src/content/en/components/notifications/toast.mdx b/docs/xplat/src/content/en/components/notifications/toast.mdx index 153d99627b..f3064ee9f7 100644 --- a/docs/xplat/src/content/en/components/notifications/toast.mdx +++ b/docs/xplat/src/content/en/components/notifications/toast.mdx @@ -69,7 +69,7 @@ Before using the {Platform} , you need to reg -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule)); diff --git a/docs/xplat/src/content/en/components/radial-gauge.mdx b/docs/xplat/src/content/en/components/radial-gauge.mdx index 776353989b..d7113f5d09 100644 --- a/docs/xplat/src/content/en/components/radial-gauge.mdx +++ b/docs/xplat/src/content/en/components/radial-gauge.mdx @@ -64,7 +64,7 @@ The requires the following modules: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule)); diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx index 763108026c..a134a5ab73 100644 --- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx @@ -70,7 +70,7 @@ Before using the , you need to register it -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule)); diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index 1ff08d7bc6..40513d0aad 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -72,7 +72,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; To get started with the component, first we need to register its module as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); diff --git a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx index b1bb5b85e2..6fc8669640 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx @@ -74,7 +74,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; To get started with the component, first we need to register its module as follows: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); diff --git a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx index f106f00edf..ef5c27194e 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx @@ -73,7 +73,7 @@ The requires the following modules: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/en/components/zoomslider-overview.mdx b/docs/xplat/src/content/en/components/zoomslider-overview.mdx index 83460670dd..e45ef4ee8c 100644 --- a/docs/xplat/src/content/en/components/zoomslider-overview.mdx +++ b/docs/xplat/src/content/en/components/zoomslider-overview.mdx @@ -57,7 +57,7 @@ The requires the following modules: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/bullet-graph.mdx b/docs/xplat/src/content/jp/components/bullet-graph.mdx index ce5a88592d..67d93200d9 100644 --- a/docs/xplat/src/content/jp/components/bullet-graph.mdx +++ b/docs/xplat/src/content/jp/components/bullet-graph.mdx @@ -51,7 +51,7 @@ npm install --save {PackageGauges} -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbBulletGraphModule)); diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx index f3385abb3c..68fe1e86f0 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx @@ -57,7 +57,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -```razor +```csharp this.CategoryChart.DataSource = FlattenDataSource.Create(); this.FinancialChart.DataSource = FlattenDataSource.Create(); diff --git a/docs/xplat/src/content/jp/components/customize-marker-display-in-blazor-charts.mdx b/docs/xplat/src/content/jp/components/customize-marker-display-in-blazor-charts.mdx index 91f10f9b67..2e8e376e2d 100644 --- a/docs/xplat/src/content/jp/components/customize-marker-display-in-blazor-charts.mdx +++ b/docs/xplat/src/content/jp/components/customize-marker-display-in-blazor-charts.mdx @@ -45,7 +45,7 @@ import blazorWasmApp2 from '@xplat-images/general/blazor-wasm-app-2.png'; -```razor +```csharp public record SampleDataType ( string Name, double XValue, diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx index 076fc83f78..835b5b7fc3 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx @@ -88,7 +88,7 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx index 4c468aba2c..7c99b8b223 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx @@ -85,7 +85,7 @@ export enum EsriStyle { -```razor +```csharp public class EsriStyle { // these Esri maps show geographic tiles for the whole of world diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx index fd9178ac39..3f4c9895a2 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx @@ -145,7 +145,7 @@ export default class WorldConnections { -```razor +```csharp public class WorldConnections { diff --git a/docs/xplat/src/content/jp/components/geo-map.mdx b/docs/xplat/src/content/jp/components/geo-map.mdx index 1584ac3905..3270bd10de 100644 --- a/docs/xplat/src/content/jp/components/geo-map.mdx +++ b/docs/xplat/src/content/jp/components/geo-map.mdx @@ -53,7 +53,7 @@ npm install --save {PackageMaps} -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx index 582f16bc3c..4ad82c4a23 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx @@ -131,7 +131,8 @@ public webGridCountryDropDownTemplate: IgcRenderFunction 選択の変更を処理するには、`onChange` イベントが必要です。発行されたイベント引数には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。 -```razor + +```javascript //In Javascript igRegisterScript("CountryChange", (ctx) => { const value = e.detail.newValue; @@ -152,6 +153,7 @@ igRegisterScript("CountryChange", (ctx) => { } }); ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx index 7ecc25d91f..4b9579ee6c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx @@ -1119,7 +1119,8 @@ function handleCellEdit(args: IgrGridEditEventArgs): void { -```razor + +```javascript // In JavaScript igRegisterScript("HandleCellEdit", (ev) => { var d = ev.detail; @@ -1131,6 +1132,7 @@ igRegisterScript("HandleCellEdit", (ev) => { } }, false); ``` + **Units On Order (注文済み)** 列の下のセルに入力された値が使用可能量 (**Units in Stock、在庫数** の値) よりも大きい場合、編集はキャンセルされ、ユーザーにキャンセルの警告が表示されます。 @@ -1160,7 +1162,8 @@ public webTreeGridCellEdit(event: CustomEvent): void { -```razor + +```javascript // In JavaScript igRegisterScript("HandleCellEdit", (ev) => { const column = event.detail.column; @@ -1243,7 +1246,8 @@ public webHierarchicalGridCellEdit(event: CustomEvent): vo -```razor + +```javascript // In JavaScript igRegisterScript("HandleCellEdit", (ev) => { const today = new Date(); @@ -1261,6 +1265,7 @@ igRegisterScript("HandleCellEdit", (ev) => { } }, false); ``` + Here, we are validating two columns. If the user tries to change an artist's **Debut** year or an album's **Launch Date**, the grid will not allow any dates that are greater than today. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx index 1e8a090685..8d3757f533 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx @@ -449,7 +449,9 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { +``` +```javascript // In JavaScript igRegisterScript("WebGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; @@ -465,6 +467,7 @@ igRegisterScript("WebGridPinHeaderTemplate", (ctx) => { `; }, false); ``` + @@ -613,10 +616,10 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { +``` - +```javascript // In JavaScript - igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { var html = window.igTemplating.html; window.toggleColumnPin = function toggleColumnPin(field) { @@ -631,6 +634,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { `; }, false); ``` + ```tsx diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx index 478b49a2df..14198d5481 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx @@ -687,12 +687,16 @@ const formatCurrency = (value: number) => { +``` + +```javascript //In Javascript igRegisterScript("CurrencyFormatter", (value) => { return `$ ${value.toFixed(0)}`; }, false); ``` + @@ -710,6 +714,7 @@ public init(column: IgxColumnComponent) { default: return; } + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx index 32ef9bd313..321a39b836 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx @@ -154,7 +154,9 @@ public onSorting(event: IgcSortingEventArgs) { SortingScript="SortingHandler" RowEditable="true"> +``` +```javascript //In JavaScript function SortingHandler() { grid.endEdit(true); @@ -162,6 +164,7 @@ function SortingHandler() { igRegisterScript("SortingHandler", SortingHandler, false); ``` + @@ -173,6 +176,7 @@ function onSorting(args: IgrSortingEventArgs) { <{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}> + ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx index 90b92fec52..0e2a9d74b0 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx @@ -299,7 +299,9 @@ Excel スタイル フィルター メニューをさらにカスタマイズす FilterMode="FilterMode.ExcelStyleFilter" ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate"> +``` +```javascript // In JavaScript igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { var html = window.igTemplating.html; @@ -307,6 +309,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { }, false); ``` + @@ -319,6 +322,7 @@ constructor() { public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => { return html`Continued` } + ``` @@ -343,6 +347,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { ``` + @@ -554,7 +559,9 @@ Add razor snipets FilterMode="FilterMode.ExcelStyleFilter" ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate"> +``` +```javascript // In JavaScript igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx index beaf499408..e3f2d02e26 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx @@ -213,9 +213,9 @@ API を使用して、ユーザー入力の検証やカスタム ナビゲーシ -```razor -// In JavaScript +```javascript +// In JavaScript igRegisterScript("WebGridCustomKBNav", (evtArgs) => { const args = evtArgs.detail; const target = args.target; @@ -231,6 +231,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { }, false); ``` + @@ -324,10 +325,9 @@ public customKeydown(args: : CustomEvent) { -```razor +```javascript // In JavaScript - igRegisterScript("WebGridCustomKBNav", (evtArgs) => { const args = evtArgs.detail; const target = args.target; @@ -347,6 +347,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { }, false); ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx index 3c9b6a35a9..278ca7d2f1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx @@ -639,7 +639,9 @@ this.grid.rowEditActionsTemplate = (endRowEdit: IgcGridRowEditActionsTemplateCon ```razor <{ComponentSelector} Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate"> +``` +```javascript //In JavaScript: igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx index ba0622202b..efd8b069ed 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx @@ -632,7 +632,9 @@ constructor() { ```razor +``` +```javascript // In JavaScript igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; @@ -660,6 +662,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } ``` + @@ -723,7 +726,9 @@ constructor() { ```razor +``` +```javascript // In JavaScript igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; @@ -751,6 +756,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } ``` + @@ -1050,7 +1056,8 @@ public webTreeGridReorderRowStartHandler(args: CustomEvent -```razor + +```javascript //in JavaScript igRegisterScript("WebTreeGridReorderRowStartHandler", (args) => { const draggedRow = args.detail.dragElement; @@ -1226,8 +1233,10 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { ```razor +``` -//In JavaScript +```javascript +//in JavaScript igRegisterScript("WebGridReorderRowHandler", (args) => { const ghostElement = args.detail.dragDirective.ghostElement; const dragElementPos = ghostElement.getBoundingClientRect(); @@ -1254,6 +1263,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { } ``` + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx index f5601f71e9..b88bce9e3e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx @@ -287,6 +287,9 @@ const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom }; ```razor +``` + +```javascript // In Javascript igRegisterScript("WebGridRowPinCellTemplate", (ctx) => { @@ -383,6 +386,9 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => { ```razor +``` + +```javascript // In Javascript igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => { diff --git a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx index 620b3bae14..6652ebd16a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx @@ -882,7 +882,7 @@ defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconB -```razor +```csharp // eg. Program.cs register the following: builder.Services.AddIgniteUIBlazor( typeof(IgbGridModule), @@ -895,7 +895,7 @@ builder.Services.AddIgniteUIBlazor( -```razor +```csharp // eg. Program.cs register the following: builder.Services.AddIgniteUIBlazor( typeof(IgbTreeGridModule), @@ -907,7 +907,7 @@ builder.Services.AddIgniteUIBlazor( -```razor +```csharp // eg. Program.cs register the following: builder.Services.AddIgniteUIBlazor( typeof(IgbGridModule), @@ -928,7 +928,7 @@ builder.Services.AddIgniteUIBlazor( -```razor +```csharp // eg. Program.cs register the following: builder.Services.AddIgniteUIBlazor( typeof(IgbTreeGridModule), diff --git a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx index 2828be1c96..447865e043 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx @@ -861,16 +861,17 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio -```razor -@code { - // In JavaScript + + +```javascript +// In JavaScript igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => { var newVal = evtArgs.newValue.toLowerCase(); var grid = document.getElementById("grid"); grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); }, false); -} ``` + @@ -921,24 +922,6 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio サンプル機能を拡張して `RowHeight` プロパティを `{ComponentName}` に追加します。 - ```html - <{ComponentSelector} #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true"> - - ``` - - - ```razor - <{ComponentSelector} - @ref="grid" - Id="grid" - Class="gridSize" - Width="100%" - Height="100%" - AutoGenerate="true" - Data="northwindEmployees" - RowHeight="rowHeight"> - - ```html <{ComponentSelector} #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true"> diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx index 0a1e1caf7a..f74b07a9ae 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx @@ -612,7 +612,8 @@ function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) { -```razor + +```javascript // In Javascript public void OnColumnInit(IgbColumnComponentEventArgs args) { @@ -623,6 +624,7 @@ public void OnColumnInit(IgbColumnComponentEventArgs args) } } ``` + @@ -776,7 +778,8 @@ public onValueInit(event: any) { -```razor + +```javascript // In Javascript const totalSale = (members, data) => { return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0); @@ -825,6 +828,7 @@ igRegisterScript("OnValueInit", (args) => { }, false); ``` + - In the `DimensionInit` event handler set all custom implementations: diff --git a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx index 4754b76035..bd91515e74 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx @@ -567,8 +567,8 @@ class MySummary extends IgcNumberSummaryOperand { -```razor +```javascript //In JavaScript class WebGridDiscontinuedSummary { operate(data, allData, fieldName) { @@ -599,12 +599,13 @@ class WebGridDiscontinuedSummary { } ``` + -```razor +```csharp //In JavaScript class PtoSummary { @@ -638,6 +639,7 @@ class PtoSummary { return result; } } + ``` @@ -655,6 +657,7 @@ interface IgxSummaryResult { summaryResult: any; } ``` + @@ -734,6 +737,9 @@ export class GridComponent implements OnInit { ColumnInitScript="WebGridCustomSummary"> +``` + +```javascript // In Javascript igRegisterScript("WebGridCustomSummary", (event) => { if (event.detail.field === "UnitsInStock") { @@ -742,6 +748,7 @@ igRegisterScript("WebGridCustomSummary", (event) => { }, false); ``` + @@ -801,6 +808,9 @@ export class HierarchicalGridComponent implements OnInit { ColumnInitScript="WebHierarchicalGridCustomSummary"> +``` + +```javascript // In Javascript igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { if (event.detail.field === "GrammyAwards") { @@ -809,6 +819,7 @@ igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { }, false); ``` + @@ -864,6 +875,9 @@ export class TreeGridComponent implements OnInit { ColumnInitScript="WebTreeGridCustomSummary"> +``` + +```javascript // In Javascript igRegisterScript("WebTreeGridCustomSummary", (event) => { if (event.detail.field === "Title") { @@ -872,6 +886,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { }, false); ``` + @@ -915,7 +930,7 @@ class MySummary extends IgcNumberSummaryOperand { -```razor +```csharp class WebGridDiscontinuedSummary { operate(data, allData, fieldName) { const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]); @@ -959,7 +974,7 @@ class MySummary extends IgcNumberSummaryOperand { ``` -```razor +```csharp class PtoSummary { operate(data, allData, fieldName) { const result = []; diff --git a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx index f6527840f8..d97fc60cf0 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx @@ -470,7 +470,9 @@ public rowIslandToolbarTemplate = () => { +``` +```javascript //In JavaScript: igRegisterScript("RowIslandToolbarTemplate", () => { var html = window.igTemplating.html; @@ -485,6 +487,7 @@ igRegisterScript("RowIslandToolbarTemplate", () => { }, false); ``` + @@ -1081,7 +1084,8 @@ public configureExport(evt: CustomEvent) { -```razor + +```javascript // In Javascript igRegisterScript("WebGridToolbarExporting", (evt) => { const args = evt.detail; @@ -1092,6 +1096,7 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { }); }, false); ``` + @@ -1144,6 +1149,9 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { ```razor <{ComponentSelector} ToolbarExportingScript="ConfigureExport"> +``` + +```javascript // In Javascript igRegisterScript("ConfigureExport", (evt) => { const args = evt.detail; @@ -1206,6 +1214,9 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => { ```razor <{ComponentSelector} ToolbarExportingScript="ConfigureExport"> +``` + +```javascript // In Javascript igRegisterScript("ConfigureExport", (evt) => { const args = evt.detail; diff --git a/docs/xplat/src/content/jp/components/grids/data-grid.mdx b/docs/xplat/src/content/jp/components/grids/data-grid.mdx index 27e669c14e..67db7c971c 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid.mdx @@ -172,7 +172,7 @@ For more details on how to customize the appearance of the grid, you may have a  には以下のモジュールが必要です。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule)); @@ -426,7 +426,9 @@ public formatUppercase(value: string) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("UpperCaseTemplate", (ctx) => { @@ -512,7 +514,9 @@ public formatTitleCase(value: string) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("NameCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -670,7 +674,9 @@ function formatTitleCase(value: string) { +``` +```javascript //In JavaScript: igRegisterScript("NameCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -806,7 +812,9 @@ function updateValue(value: number) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("PriceCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -957,7 +965,9 @@ column.bodyTemplate = smallViewTemplate; column.BodyTemplateScript = "NormalViewTemplate"; } } +``` +```javascript //In JavaScript: igRegisterScript("NormalViewTemplate", (ctx) => { var html = window.igTemplating.html; @@ -1390,7 +1400,7 @@ interface AminoAcid { -```razor +```csharp public class AminoAcid { public string Name { get; set; } @@ -1602,7 +1612,9 @@ function abbreviationLongCellTemplate(ctx: IgrCellTemplateContext) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("AbbreviationLongCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -1676,7 +1688,7 @@ export const EMPLOYEE_DATA = [ -```razor +```csharp public class EmployeesNestedData : List { public EmployeesNestedData() @@ -1860,7 +1872,9 @@ function addressCellTemplate(ctx: IgrCellTemplateContext) { ```razor +``` +```javascript //In JavaScript: igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -1931,7 +1945,7 @@ export const DATA: any[] = [ -```razor +```csharp public class CustomersData : List { public CustomersData() @@ -2072,7 +2086,9 @@ function addressCellTemplate(ctx: IgrCellTemplateContext) { +``` +```javascript //In JavaScript: igRegisterScript("AddressCellTemplate", (ctx) => { var html = window.igTemplating.html; @@ -2225,7 +2241,9 @@ function addressEditCellTemplate(ctx: IgrCellTemplateContext) { +``` +```javascript //In JavaScript: igRegisterScript("AddressEditCellTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx index cb45ff7123..367a132ed3 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx @@ -404,8 +404,10 @@ const template = (ctx: IgrGroupByRowTemplateContext) => { ```razor +``` +```javascript //In JavaScript: igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { var html = window.igTemplating.html; @@ -458,6 +460,9 @@ const template = (ctx: IgrGroupByRowSelectorTemplateContext) => { ```razor +``` + +```javascript //In Javascript igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { var html = window.igTemplating.html; @@ -505,6 +510,9 @@ const template = (ctx: IgrGroupByRowSelectorTemplateContext) => { ```razor +``` + +```javascript //In Javascript igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx b/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx index 835f73affc..762834be08 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx @@ -97,7 +97,8 @@ constructor() { -```razor + +```javascript // In JavaScript igRegisterScript("DetailTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx index 5a51c119c2..e2dd636b7d 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx @@ -177,7 +177,9 @@ public get textArea() { +``` +```javascript // In JavaScript igRegisterScript("WebGridPasteFromExcel", (evtArgs) => { const grid = document.getElementById("grid"); diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx index 688abbec24..d6a31acdb9 100644 --- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx @@ -136,7 +136,7 @@ For more details on how to customize the appearance of the hierarchical grid, yo ### コンポーネント モジュール -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule)); @@ -211,7 +211,7 @@ export const singers = [{ -```razor +```csharp public class SingersData : List { public SingersData() diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx index fa0ffafc72..9525167626 100644 --- a/docs/xplat/src/content/jp/components/grids/list.mdx +++ b/docs/xplat/src/content/jp/components/grids/list.mdx @@ -68,7 +68,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx index 613ce1095a..c5f973d491 100644 --- a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx @@ -123,7 +123,7 @@ For more details on how to customize the appearance of the tree grid, you may ha ### コンポーネント モジュール -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule)); @@ -211,7 +211,7 @@ const EMPLOYEE_DATA = [ -```razor +```csharp public class EmployeesNestedDataItem { public double ID { get; set; } @@ -383,7 +383,7 @@ public class EmployeesItem -```razor +```csharp public class EmployeesFlatDataItem { public double Age { get; set; } diff --git a/docs/xplat/src/content/jp/components/grids/tree.mdx b/docs/xplat/src/content/jp/components/grids/tree.mdx index b0501d55a2..2689d5a407 100644 --- a/docs/xplat/src/content/jp/components/grids/tree.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree.mdx @@ -95,7 +95,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx index ed4714ca17..07c95bb7e3 100644 --- a/docs/xplat/src/content/jp/components/inputs/badge.mdx +++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx @@ -77,7 +77,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/button-group.mdx b/docs/xplat/src/content/jp/components/inputs/button-group.mdx index 71c1b6bf32..09e0f0f54b 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -72,7 +72,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index e4069adc05..c01811b4e2 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -72,7 +72,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/checkbox.mdx b/docs/xplat/src/content/jp/components/inputs/checkbox.mdx index 525cf97002..18f3d90bd1 100644 --- a/docs/xplat/src/content/jp/components/inputs/checkbox.mdx +++ b/docs/xplat/src/content/jp/components/inputs/checkbox.mdx @@ -79,7 +79,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx index 0cdeaf7e5d..1353e888a2 100644 --- a/docs/xplat/src/content/jp/components/inputs/chip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx @@ -77,7 +77,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx index c18402068e..73082f7eb0 100644 --- a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx +++ b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx @@ -79,7 +79,7 @@ IgrCircularProgressModule.register(); を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx index 673fe57e35..2e71b62736 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx @@ -45,7 +45,7 @@ defineComponents(IgcComboComponent, IgcSwitchComponent); -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx index 6474d38d1b..5973a8105c 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx @@ -61,7 +61,7 @@ defineComponents(IgcComboComponent); コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx index af16d4b09f..ec1990a214 100644 --- a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx @@ -76,7 +76,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx index f71aa8c87a..596ce1f1ad 100644 --- a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx +++ b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx @@ -85,7 +85,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/highlight.mdx b/docs/xplat/src/content/jp/components/inputs/highlight.mdx index 20a8139f97..7a5ef35926 100644 --- a/docs/xplat/src/content/jp/components/inputs/highlight.mdx +++ b/docs/xplat/src/content/jp/components/inputs/highlight.mdx @@ -64,7 +64,7 @@ dotnet add package IgniteUI.Blazor --version {PackageVerLatest} `Program.cs` で モジュールを次のように登録します。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbHighlightModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx index 520df83767..3d3c2aaeb4 100644 --- a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx @@ -78,7 +78,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/input.mdx b/docs/xplat/src/content/jp/components/inputs/input.mdx index 740121af59..f5d2a4e81f 100644 --- a/docs/xplat/src/content/jp/components/inputs/input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/input.mdx @@ -47,7 +47,7 @@ Input コンポーネントの使用を開始するには、最初にそのモ -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx index 525d8632ec..8b2ec0963d 100644 --- a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx +++ b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx @@ -77,7 +77,7 @@ IgrLinearProgressModule.register(); を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx index 2bf3d2ac3d..507df50bac 100644 --- a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx @@ -88,7 +88,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/query-builder.mdx b/docs/xplat/src/content/jp/components/inputs/query-builder.mdx index 6c95e61064..ca0f7d77f7 100644 --- a/docs/xplat/src/content/jp/components/inputs/query-builder.mdx +++ b/docs/xplat/src/content/jp/components/inputs/query-builder.mdx @@ -181,7 +181,9 @@ this.queryBuilder.addEventListener('expressionTreeChange', (e: CustomEvent はバインド可能なプロパティです。つまり、`ExpressionTreeChangeScript` を使用して、エンドユーザーが条件を作成、編集、削除して UI を変更したときに通知を受け取ることができます。 -```razor + + +```javascript // In JavaScript igRegisterScript("WebQueryBuilderExpressionTreeChange", (evtArgs) => { const expressionTree = evtArgs.detail; @@ -408,7 +410,9 @@ private buildSearchValueTemplate(ctx: IgcQueryBuilderSearchValueContext) { ``` -```razor + + +```javascript // In JavaScript igRegisterScript("SearchValueTemplate", (ctx) => { const field = ctx.selectedField?.field; @@ -661,7 +665,9 @@ Region Select の例: new() { Field = "Region", DataType = GridColumnDataType.String } ``` -```razor + + +```javascript // In JavaScript // Template function buildRegionSelect(ctx) { @@ -691,7 +697,9 @@ Status Radio Group の例: new() { Field = "OrderStatus", DataType = GridColumnDataType.Number } ``` -```razor + + +```javascript // In JavaScript // Template function buildStatusRadios(ctx) { @@ -732,7 +740,9 @@ Date Picker の例: new() { Field = "OrderDate", DataType = GridColumnDataType.Date } ``` -```razor + + +```javascript // In JavaScript // Template function buildDatePicker(ctx) { @@ -771,7 +781,9 @@ new() } ``` -```razor + + +```javascript // In JavaScript // Template function buildTimeInput(ctx) { @@ -803,7 +815,9 @@ new() { Field = "OrderID", DataType = GridColumnDataType.Number } new() { Field = "IsRushOrder", DataType = GridColumnDataType.Boolean } ``` -```razor + + +```javascript // In JavaScript // Template that handles all these types function buildDefaultInput(ctx, equalityCondition) { diff --git a/docs/xplat/src/content/jp/components/inputs/radio.mdx b/docs/xplat/src/content/jp/components/inputs/radio.mdx index b148ddb2e0..dbf6b966e6 100644 --- a/docs/xplat/src/content/jp/components/inputs/radio.mdx +++ b/docs/xplat/src/content/jp/components/inputs/radio.mdx @@ -80,7 +80,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; と を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/inputs/rating.mdx b/docs/xplat/src/content/jp/components/inputs/rating.mdx index 75e224f94d..09e9a5aa13 100644 --- a/docs/xplat/src/content/jp/components/inputs/rating.mdx +++ b/docs/xplat/src/content/jp/components/inputs/rating.mdx @@ -56,7 +56,7 @@ npm install igniteui-react -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/ripple.mdx b/docs/xplat/src/content/jp/components/inputs/ripple.mdx index 1f6fe668dd..8d4b3933d6 100644 --- a/docs/xplat/src/content/jp/components/inputs/ripple.mdx +++ b/docs/xplat/src/content/jp/components/inputs/ripple.mdx @@ -76,7 +76,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/select.mdx b/docs/xplat/src/content/jp/components/inputs/select.mdx index 544f7d09b2..9fad53f6ef 100644 --- a/docs/xplat/src/content/jp/components/inputs/select.mdx +++ b/docs/xplat/src/content/jp/components/inputs/select.mdx @@ -63,7 +63,7 @@ defineComponents(IgcSelectComponent); コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/slider.mdx b/docs/xplat/src/content/jp/components/inputs/slider.mdx index f4d123cd90..0758fe1e0e 100644 --- a/docs/xplat/src/content/jp/components/inputs/slider.mdx +++ b/docs/xplat/src/content/jp/components/inputs/slider.mdx @@ -77,7 +77,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; と を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/inputs/switch.mdx b/docs/xplat/src/content/jp/components/inputs/switch.mdx index 519f14fc4d..2710f764a1 100644 --- a/docs/xplat/src/content/jp/components/inputs/switch.mdx +++ b/docs/xplat/src/content/jp/components/inputs/switch.mdx @@ -81,7 +81,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; まず、次のコマンドを実行して {ProductName} をインストールする必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/text-area.mdx b/docs/xplat/src/content/jp/components/inputs/text-area.mdx index 1ff3f8bc43..6d1761c33a 100644 --- a/docs/xplat/src/content/jp/components/inputs/text-area.mdx +++ b/docs/xplat/src/content/jp/components/inputs/text-area.mdx @@ -32,7 +32,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule)); diff --git a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx index 2b970764ed..b09be5539f 100644 --- a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx @@ -77,7 +77,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/accordion.mdx b/docs/xplat/src/content/jp/components/layouts/accordion.mdx index 7000cc5e5e..8521ffd1ba 100644 --- a/docs/xplat/src/content/jp/components/layouts/accordion.mdx +++ b/docs/xplat/src/content/jp/components/layouts/accordion.mdx @@ -88,7 +88,7 @@ import "igniteui-webcomponents/themes/light/bootstrap.css"; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/avatar.mdx b/docs/xplat/src/content/jp/components/layouts/avatar.mdx index fcd6a3aacc..b2ddfac02f 100644 --- a/docs/xplat/src/content/jp/components/layouts/avatar.mdx +++ b/docs/xplat/src/content/jp/components/layouts/avatar.mdx @@ -53,7 +53,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/card.mdx b/docs/xplat/src/content/jp/components/layouts/card.mdx index feddae675d..057912573c 100644 --- a/docs/xplat/src/content/jp/components/layouts/card.mdx +++ b/docs/xplat/src/content/jp/components/layouts/card.mdx @@ -71,7 +71,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index fa1ba360c2..e8eafe5e0d 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -75,7 +75,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/divider.mdx b/docs/xplat/src/content/jp/components/layouts/divider.mdx index a6e14e265d..b1702a0999 100644 --- a/docs/xplat/src/content/jp/components/layouts/divider.mdx +++ b/docs/xplat/src/content/jp/components/layouts/divider.mdx @@ -66,7 +66,7 @@ IgrDividerModule.register(); -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/icon.mdx b/docs/xplat/src/content/jp/components/layouts/icon.mdx index b91e083658..32e3529551 100644 --- a/docs/xplat/src/content/jp/components/layouts/icon.mdx +++ b/docs/xplat/src/content/jp/components/layouts/icon.mdx @@ -52,7 +52,7 @@ defineComponents(IgcIconComponent); -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/stepper.mdx b/docs/xplat/src/content/jp/components/layouts/stepper.mdx index 1f867cb2c6..cb8c9c78d9 100644 --- a/docs/xplat/src/content/jp/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/jp/components/layouts/stepper.mdx @@ -79,7 +79,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index 09ad3be73f..e168ef75ff 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -70,7 +70,7 @@ import { IgrTabs, IgrTab } from "igniteui-react"; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule)); diff --git a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx index 89077167bb..e8fc5ec877 100644 --- a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx @@ -100,7 +100,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule)); diff --git a/docs/xplat/src/content/jp/components/linear-gauge.mdx b/docs/xplat/src/content/jp/components/linear-gauge.mdx index b017956363..a49224cc23 100644 --- a/docs/xplat/src/content/jp/components/linear-gauge.mdx +++ b/docs/xplat/src/content/jp/components/linear-gauge.mdx @@ -47,7 +47,7 @@ npm install --save {PackageGauges} -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbLinearGaugeModule)); diff --git a/docs/xplat/src/content/jp/components/menus/navbar.mdx b/docs/xplat/src/content/jp/components/menus/navbar.mdx index c11902c23c..08e9609da3 100644 --- a/docs/xplat/src/content/jp/components/menus/navbar.mdx +++ b/docs/xplat/src/content/jp/components/menus/navbar.mdx @@ -44,7 +44,7 @@ npm install {PackageWebComponents} -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule)); diff --git a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx index ed71896cc6..eb73537dac 100644 --- a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx @@ -68,7 +68,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/notifications/banner.mdx b/docs/xplat/src/content/jp/components/notifications/banner.mdx index fbc9dba15c..000633e101 100644 --- a/docs/xplat/src/content/jp/components/notifications/banner.mdx +++ b/docs/xplat/src/content/jp/components/notifications/banner.mdx @@ -72,7 +72,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); @@ -388,7 +388,8 @@ banner.addEventListener('igcClosing', (event) => { -```razor + +```javascript //In JavaScript: function handleClosing() { const banner = document.getElementById('banner'); diff --git a/docs/xplat/src/content/jp/components/notifications/dialog.mdx b/docs/xplat/src/content/jp/components/notifications/dialog.mdx index 883b1e50f1..b31256949f 100644 --- a/docs/xplat/src/content/jp/components/notifications/dialog.mdx +++ b/docs/xplat/src/content/jp/components/notifications/dialog.mdx @@ -81,7 +81,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; {Platform} を使用する前に、次のように登録する必要があります: -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDialogModule)); diff --git a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx index e128bff087..68cb9ba3e8 100644 --- a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx @@ -67,7 +67,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule)); diff --git a/docs/xplat/src/content/jp/components/notifications/toast.mdx b/docs/xplat/src/content/jp/components/notifications/toast.mdx index 54c09c135d..223f1cab38 100644 --- a/docs/xplat/src/content/jp/components/notifications/toast.mdx +++ b/docs/xplat/src/content/jp/components/notifications/toast.mdx @@ -71,7 +71,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule)); diff --git a/docs/xplat/src/content/jp/components/radial-gauge.mdx b/docs/xplat/src/content/jp/components/radial-gauge.mdx index 9e5b7ea595..993aa7fe46 100644 --- a/docs/xplat/src/content/jp/components/radial-gauge.mdx +++ b/docs/xplat/src/content/jp/components/radial-gauge.mdx @@ -67,7 +67,7 @@ Afterwards you may start implementing the control by adding the following namesp -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule)); diff --git a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx index 1af331ad7c..2b8967d5ca 100644 --- a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx @@ -59,7 +59,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule)); diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 60f23bd9c3..311bf42b6e 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -65,7 +65,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); diff --git a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx index ec6c8ccad6..5393902c32 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx @@ -76,7 +76,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); diff --git a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx index 166d5ec4c8..556100fa73 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx @@ -73,7 +73,7 @@ npm install --save {PackageSpreadsheet} -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor( diff --git a/docs/xplat/src/content/jp/components/zoomslider-overview.mdx b/docs/xplat/src/content/jp/components/zoomslider-overview.mdx index c2f7e9b0e5..e93404f973 100644 --- a/docs/xplat/src/content/jp/components/zoomslider-overview.mdx +++ b/docs/xplat/src/content/jp/components/zoomslider-overview.mdx @@ -59,7 +59,7 @@ npm install --save {PackageCharts} -```razor +```csharp // in Program.cs file builder.Services.AddIgniteUIBlazor(