diff --git a/CODEOWNERS b/CODEOWNERS index 5506c587e..7cb79a530 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,10 +1,10 @@ # code owners must approve PRs with they make changes to these files: # @HUSSAR-mtrela must approve DV topics -**/charts/**/*.md @HUSSAR-mtrela -**/maps/**/*.md @HUSSAR-mtrela -**/gauges/**/*.md @HUSSAR-mtrela -**/geo-map*.md @HUSSAR-mtrela +# **/charts/**/*.md @HUSSAR-mtrela +# **/maps/**/*.md @HUSSAR-mtrela +# **/gauges/**/*.md @HUSSAR-mtrela +# **/geo-map*.md @HUSSAR-mtrela # @HUSSAR-mtrela must approve XPLAT docs source src/**/*.* @HUSSAR-mtrela @@ -14,8 +14,8 @@ gulpfile.js @HUSSAR-mtrela # @HUSSAR-mtrela must approve XPLAT docs config ./.gitignore @HUSSAR-mtrela -./*.json @HUSSAR-mtrela -**/*.config @HUSSAR-mtrela -apiMap/**/*.* @HUSSAR-mtrela +# ./*.json @HUSSAR-mtrela +# **/*.config @HUSSAR-mtrela +# apiMap/**/*.* @HUSSAR-mtrela CODEOWNERS @HUSSAR-mtrela \ No newline at end of file diff --git a/apiMap/Angular/webInputs.JS.apiMap.json b/apiMap/Angular/webInputs.JS.apiMap.json index e2e034388..e63bd2f71 100644 --- a/apiMap/Angular/webInputs.JS.apiMap.json +++ b/apiMap/Angular/webInputs.JS.apiMap.json @@ -3,7 +3,11 @@ "igx-accordion-module.ts", "igx-avatar-module.ts", "igx-badge-module.ts", + "igx-base-alert-like-module.ts", + "igx-base-combo-box-like-module.ts", + "igx-base-option-like-module.ts", "igx-button-base-module.ts", + "igx-button-group-module.ts", "igx-button-module.ts", "igx-calendar-base-module.ts", "igx-calendar-module.ts", @@ -41,6 +45,7 @@ "igx-nav-drawer-item-module.ts", "igx-nav-drawer-module.ts", "igx-navbar-module.ts", + "igx-popover-module.ts", "igx-progress-base-module.ts", "igx-radio-group-module.ts", "igx-radio-module.ts", @@ -62,7 +67,9 @@ "igx-tab-module.ts", "igx-tab-panel-module.ts", "igx-tabs-module.ts", + "igx-textarea-module.ts", "igx-toast-module.ts", + "igx-toggle-button-module.ts", "igx-tree-item-module.ts", "igx-tree-module.ts" ], @@ -99,6 +106,14 @@ {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "seconds"}], "originalName": "Seconds"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "year"}], "originalName": "Year"} ] }, + { + "originalName": "TreeSelectionChangeDetail", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-tree-selection-change-detail.ts","mappedName": "IgxTreeSelectionChangeDetail"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "IgxTreeItemComponent[]","mappedName": "newSelection"}], "originalName": "NewSelection"} ] + }, { "originalName": "ActivePaneEventArgsDetail", "originalNamespace": "Infragistics.Controls", @@ -142,6 +157,71 @@ "members":[ {"names":[{"platform": "Angular", "mappedType": "IgxActiveStepChangingArgsDetail","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "BaseAlertLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-base-alert-like-component.ts","mappedName": "IgxBaseAlertLikeComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "Angular", "mappedType": "BaseAlertLikePosition","mappedName": "position"}], "originalName": "Position"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseComboBoxLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-base-combo-box-like-component.ts","mappedName": "IgxBaseComboBoxLikeComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "any", "mappedName": "emitEvent"}], "originalName": "EmitEvent"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseOptionLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-base-option-like-component.ts","mappedName": "IgxBaseOptionLikeComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + }, + { + "originalName": "ButtonGroup", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-button-group-component.ts","mappedName": "IgxButtonGroupComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "ButtonGroupAlignment","mappedName": "alignment"}], "originalName": "Alignment"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "string[]","mappedName": "selectedItems"}], "originalName": "SelectedItems"}, + {"names":[{"platform": "Angular", "mappedType": "ButtonGroupSelection","mappedName": "selection"}], "originalName": "Selection"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] + }, { "originalName": "CalendarResourceStrings", "originalNamespace": "Infragistics.Controls", @@ -176,9 +256,9 @@ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "caseSensitiveIcon"}], "originalName": "CaseSensitiveIcon"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "any[]", "mappedName": "data"}], "originalName": "Data"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "deselect"}], "originalName": "Deselect"}, - {"names":[{"platform": "Angular", "mappedType": "ComboDir","mappedName": "dir"}], "originalName": "Dir"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disableFiltering"}], "originalName": "DisableFiltering"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "displayKey"}], "originalName": "DisplayKey"}, @@ -191,7 +271,6 @@ {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "(arg: any) => any","mappedName": "itemTemplate"}], "originalName": "ItemTemplate"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, @@ -200,6 +279,7 @@ {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, {"names":[{"platform": "Angular", "mappedType": "any[]", "mappedName": "selection"}], "originalName": "Selection"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "singleSelect"}], "originalName": "SingleSelect"}, @@ -239,15 +319,15 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-date-time-input-component.ts","mappedName": "IgxDateTimeInputComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "clear"}], "originalName": "Clear"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "displayFormat"}], "originalName": "DisplayFormat"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "inputFormat"}], "originalName": "InputFormat"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "locale"}], "originalName": "Locale"}, + {"names":[{"platform": "Angular", "mappedType": "Date","mappedName": "max"}], "originalName": "Max"}, {"names":[{"platform": "Angular", "mappedType": "Date","mappedName": "maxValue"}], "originalName": "MaxValue"}, + {"names":[{"platform": "Angular", "mappedType": "Date","mappedName": "min"}], "originalName": "Min"}, {"names":[{"platform": "Angular", "mappedType": "Date","mappedName": "minValue"}], "originalName": "MinValue"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "IgxDatePartDeltas","mappedName": "spinDelta"}], "originalName": "SpinDelta"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "spinLoop"}], "originalName": "SpinLoop"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, @@ -329,6 +409,18 @@ {"names":[{"platform": "Angular", "mappedType": "IgxDockManagerPoint","mappedName": "oldLocation"}], "originalName": "OldLocation"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "oldWidth"}], "originalName": "OldWidth"} ] }, + { + "originalName": "KeyBindingHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-key-binding-handler.ts","mappedName": "IgxKeyBindingHandler"}] + }, + { + "originalName": "KeyBindingOptions", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-key-binding-options.ts","mappedName": "IgxKeyBindingOptions"}] + }, { "originalName": "MaskInputBase", "originalNamespace": "Infragistics.Controls", @@ -338,10 +430,8 @@ "names":[{"platform": "Angular","fileName": "igx-mask-input-base-component.ts","mappedName": "IgxMaskInputBaseComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "prompt"}], "originalName": "Prompt"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"} ] + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"} ] }, { "originalName": "PaneCloseEventArgsDetail", @@ -407,58 +497,93 @@ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "IgxContentPaneComponent","mappedName": "sourcePane"}], "originalName": "SourcePane"} ] }, + { + "originalName": "Popover", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-popover-component.ts","mappedName": "IgxPopoverComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "anchor"}], "originalName": "Anchor"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "flip"}], "originalName": "Flip"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "offset"}], "originalName": "Offset"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "Angular", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "sameWidth"}], "originalName": "SameWidth"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "shift"}], "originalName": "Shift"}, + {"names":[{"platform": "Angular", "mappedType": "PopoverStrategy","mappedName": "strategy"}], "originalName": "Strategy"} ] + }, { "originalName": "Select", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "Dropdown", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-select-component.ts","mappedName": "IgxSelectComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "autofocus"}], "originalName": "Autofocus"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, - {"names":[{"platform": "Angular", "mappedType": "SelectDir","mappedName": "dir"}], "originalName": "Dir"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "clearSelection"}], "originalName": "ClearSelection"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "distance"}], "originalName": "Distance"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Angular", "mappedType": "IgxSelectGroupComponent[]","mappedName": "groups"}], "originalName": "Groups"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "Angular", "mappedType": "IgxSelectItemComponent[]","mappedName": "items"}], "originalName": "Items"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "Angular", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "Angular", "mappedType": "SelectScrollStrategy","mappedName": "scrollStrategy"}], "originalName": "ScrollStrategy"}, + {"names":[{"platform": "Angular", "mappedType": "IgxSelectItemComponent","mappedName": "selectedItem"}], "originalName": "SelectedItem"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] }, { "originalName": "SelectGroup", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownGroup", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-select-group-component.ts","mappedName": "IgxSelectGroupComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, - {"names":[{"platform": "Angular", "mappedType": "IgxSelectItemComponent[]","mappedName": "items"}], "originalName": "Items"} ] + {"names":[{"platform": "Angular", "mappedType": "IgxSelectItemComponent[]","mappedName": "items"}], "originalName": "Items"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectHeader", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownHeader", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", - "names":[{"platform": "Angular","fileName": "igx-select-header-component.ts","mappedName": "IgxSelectHeaderComponent"}] + "names":[{"platform": "Angular","fileName": "igx-select-header-component.ts","mappedName": "IgxSelectHeaderComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownItem", + "originalBaseTypeName": "BaseOptionLike", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-select-item-component.ts","mappedName": "IgxSelectItemComponent"}] + }, + { + "originalName": "SelectItemComponentEventArgs", + "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", - "names":[{"platform": "Angular","fileName": "igx-select-item-component.ts","mappedName": "IgxSelectItemComponent"}], + "names":[{"platform": "Angular","fileName": "igx-select-item-component-event-args.ts","mappedName": "IgxSelectItemComponentEventArgs"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "textContent"}], "originalName": "TextContent"} ] + {"names":[{"platform": "Angular", "mappedType": "IgxSelectItemComponent","mappedName": "detail"}], "originalName": "Detail"} ] }, { "originalName": "Step", @@ -470,18 +595,12 @@ "members":[ {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "complete"}], "originalName": "Complete"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "contentTop"}], "originalName": "ContentTop"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "index"}], "originalName": "Index"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "firstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "linearDisabled"}], "originalName": "LinearDisabled"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "optional"}], "originalName": "Optional"}, - {"names":[{"platform": "Angular", "mappedType": "StepOrientation","mappedName": "orientation"}], "originalName": "Orientation"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "previousComplete"}], "originalName": "PreviousComplete"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Angular", "mappedType": "StepStepType","mappedName": "stepType"}], "originalName": "StepType"}, - {"names":[{"platform": "Angular", "mappedType": "StepTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "visited"}], "originalName": "Visited"} ] + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggleAnimation"}], "originalName": "ToggleAnimation"} ] }, { "originalName": "Stepper", @@ -491,9 +610,10 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-stepper-component.ts","mappedName": "IgxStepperComponent"}], "members":[ + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "animationDuration"}], "originalName": "AnimationDuration"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "contentTop"}], "originalName": "ContentTop"}, - {"names":[{"platform": "Angular", "mappedType": "Direction","mappedName": "dir"}], "originalName": "Dir"}, + {"names":[{"platform": "Angular", "mappedType": "StepperHorizontalAnimation","mappedName": "horizontalAnimation"}], "originalName": "HorizontalAnimation"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "linear"}], "originalName": "Linear"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "navigateTo"}], "originalName": "NavigateTo"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "next"}], "originalName": "Next"}, @@ -503,7 +623,8 @@ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "StepperStepType","mappedName": "stepType"}], "originalName": "StepType"}, {"names":[{"platform": "Angular", "mappedType": "IgxStepComponent[]","mappedName": "steps"}], "originalName": "Steps"}, - {"names":[{"platform": "Angular", "mappedType": "StepperTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"} ] + {"names":[{"platform": "Angular", "mappedType": "StepperTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"}, + {"names":[{"platform": "Angular", "mappedType": "StepperVerticalAnimation","mappedName": "verticalAnimation"}], "originalName": "VerticalAnimation"} ] }, { "originalName": "Tab", @@ -565,12 +686,78 @@ {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "selected"}], "originalName": "Selected"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, + { + "originalName": "Textarea", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-textarea-component.ts","mappedName": "IgxTextareaComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "TextareaAutocapitalize","mappedName": "autocapitalize"}], "originalName": "Autocapitalize"}, + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "autocomplete"}], "originalName": "Autocomplete"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "Angular", "mappedType": "TextareaInputMode","mappedName": "inputMode"}], "originalName": "InputMode"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "maxLength"}], "originalName": "MaxLength"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "minLength"}], "originalName": "MinLength"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "Angular", "mappedType": "TextareaResize","mappedName": "resize"}], "originalName": "Resize"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "rows"}], "originalName": "Rows"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "scrollTo"}], "originalName": "ScrollTo"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setRangeText"}], "originalName": "SetRangeText"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setSelectionRange"}], "originalName": "SetSelectionRange"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "spellcheck"}], "originalName": "Spellcheck"}, + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"}, + {"names":[{"platform": "Angular", "mappedType": "TextareaWrap","mappedName": "wrap"}], "originalName": "Wrap"} ] + }, + { + "originalName": "ToggleButton", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-toggle-button-component.ts","mappedName": "IgxToggleButtonComponent"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + }, { "originalName": "ToggleOptions", "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-toggle-options.ts","mappedName": "IgxToggleOptions"}] }, + { + "originalName": "TreeSelectionChange", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-tree-selection-change.ts","mappedName": "IgxTreeSelectionChange"}] + }, + { + "originalName": "TreeSelectionChangeEventArgs", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-tree-selection-change-event-args.ts","mappedName": "IgxTreeSelectionChangeEventArgs"}], + "members":[ + {"names":[{"platform": "Angular", "mappedType": "IgxTreeSelectionChangeDetail","mappedName": "detail"}], "originalName": "Detail"} ] + }, { "originalName": "DockManager", "originalNamespace": "Infragistics.Controls", @@ -601,6 +788,12 @@ "members":[ {"names":[{"platform": "Angular", "mappedType": "IgxDockManagerLayout","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "ValidatorHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Angular","fileName": "igx-validator-handler.ts","mappedName": "IgxValidatorHandler"}] + }, { "originalName": "TreeSelectionOptionsEventArgs", "originalNamespace": "Infragistics.Controls", @@ -625,9 +818,8 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-mask-input-component.ts","mappedName": "IgxMaskInputComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "mask"}], "originalName": "Mask"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"}, {"names":[{"platform": "Angular", "mappedType": "MaskInputValueMode","mappedName": "valueMode"}], "originalName": "ValueMode"} ] }, @@ -640,12 +832,12 @@ "names":[{"platform": "Angular","fileName": "igx-tree-component.ts","mappedName": "IgxTreeComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Angular", "mappedType": "Direction","mappedName": "dir"}], "originalName": "Dir"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "expandToItem"}], "originalName": "ExpandToItem"}, {"names":[{"platform": "Angular", "mappedType": "TreeSelection","mappedName": "selection"}], "originalName": "Selection"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "singleBranchExpand"}], "originalName": "SingleBranchExpand"}, - {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] + {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "toggleNodeOnClick"}], "originalName": "ToggleNodeOnClick"} ] }, { "originalName": "TreeItem", @@ -664,6 +856,7 @@ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "expand"}], "originalName": "Expand"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "expandWithEvent"}], "originalName": "ExpandWithEvent"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "expanded"}], "originalName": "Expanded"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "firstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "level"}], "originalName": "Level"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "loading"}], "originalName": "Loading"}, @@ -981,12 +1174,13 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-button-base-component.ts","mappedName": "IgxButtonBaseComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "ariaLabel"}], "originalName": "AriaLabel"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Angular", "mappedType": "ButtonBaseType","mappedName": "displayType"}], "originalName": "DisplayType"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "download"}], "originalName": "Download"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Angular", "mappedType": "any", "mappedName": "form"}], "originalName": "Form"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "href"}], "originalName": "Href"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "rel"}], "originalName": "Rel"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, @@ -1003,51 +1197,47 @@ "members":[ {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "autocomplete"}], "originalName": "Autocomplete"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "autofocus"}], "originalName": "Autofocus"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Angular", "mappedType": "InputType","mappedName": "displayType"}], "originalName": "DisplayType"}, {"names":[{"platform": "Angular", "mappedType": "InputInputmode","mappedName": "inputmode"}], "originalName": "Inputmode"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "max"}], "originalName": "Max"}, - {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "maxlength"}], "originalName": "Maxlength"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "maxLength"}], "originalName": "MaxLength"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "min"}], "originalName": "Min"}, - {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "minlength"}], "originalName": "Minlength"}, + {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "minLength"}], "originalName": "MinLength"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "pattern"}], "originalName": "Pattern"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "step"}], "originalName": "Step"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "stepUp"}], "originalName": "StepUp"}, - {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "tabIndex"}], "originalName": "TabIndex"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] }, { "originalName": "Dropdown", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-dropdown-component.ts","mappedName": "IgxDropdownComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "clearSelection"}], "originalName": "ClearSelection"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "distance"}], "originalName": "Distance"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "flip"}], "originalName": "Flip"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "Angular", "mappedType": "IgxDropdownGroupComponent[]","mappedName": "groups"}], "originalName": "Groups"}, + {"names":[{"platform": "Angular", "mappedType": "IgxDropdownItemComponent[]","mappedName": "items"}], "originalName": "Items"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "navigateTo"}], "originalName": "NavigateTo"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, {"names":[{"platform": "Angular", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, {"names":[{"platform": "Angular", "mappedType": "DropdownPositionStrategy","mappedName": "positionStrategy"}], "originalName": "PositionStrategy"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "sameWidth"}], "originalName": "SameWidth"}, {"names":[{"platform": "Angular", "mappedType": "DropdownScrollStrategy","mappedName": "scrollStrategy"}], "originalName": "ScrollStrategy"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Angular", "mappedType": "IgxDropdownItemComponent","mappedName": "selectedItem"}], "originalName": "SelectedItem"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "showTarget"}], "originalName": "Show"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show2"}], "originalName": "Show"}, {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggleTarget"}], "originalName": "Toggle"} ] + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggleTarget"}], "originalName": "Toggle"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggle2"}], "originalName": "Toggle"} ] }, { "originalName": "Chip", @@ -1094,7 +1284,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-dropdown-group-component.ts","mappedName": "IgxDropdownGroupComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1111,16 +1300,9 @@ "originalName": "DropdownItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseOptionLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "Angular","fileName": "igx-dropdown-item-component.ts","mappedName": "IgxDropdownItemComponent"}], - "members":[ - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + "names":[{"platform": "Angular","fileName": "igx-dropdown-item-component.ts","mappedName": "IgxDropdownItemComponent"}] }, { "originalName": "DropdownItemComponentEventArgs", @@ -1139,20 +1321,23 @@ "names":[{"platform": "Angular","fileName": "igx-input-base-component.ts","mappedName": "IgxInputBaseComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setRangeText"}], "originalName": "SetRangeText"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setSelectionRange"}], "originalName": "SetSelectionRange"}, - {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "themeAdopted"}], "originalName": "ThemeAdopted"} ] + {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] }, { "originalName": "LinearProgress", @@ -1191,12 +1376,17 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-rating-component.ts","mappedName": "IgxRatingComponent"}], "members":[ + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "allowReset"}], "originalName": "AllowReset"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "hoverPreview"}], "originalName": "HoverPreview"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "max"}], "originalName": "Max"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "single"}], "originalName": "Single"}, {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, @@ -1221,18 +1411,11 @@ "originalName": "Snackbar", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-snackbar-component.ts","mappedName": "IgxSnackbarComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "actionText"}], "originalName": "ActionText"}, - {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "actionText"}], "originalName": "ActionText"} ] }, { "originalName": "ThemeController", @@ -1244,18 +1427,9 @@ "originalName": "Toast", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "Angular","fileName": "igx-toast-component.ts","mappedName": "IgxToastComponent"}], - "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + "names":[{"platform": "Angular","fileName": "igx-toast-component.ts","mappedName": "IgxToastComponent"}] }, { "originalName": "SliderLabel", @@ -1296,7 +1470,11 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-slider-component.ts","mappedName": "IgxSliderComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "ariaLabel"}], "originalName": "AriaLabel"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "stepUp"}], "originalName": "StepUp"}, {"names":[{"platform": "Angular", "mappedType": "number", "mappedName": "value"}], "originalName": "Value"} ] @@ -1310,8 +1488,6 @@ "names":[{"platform": "Angular","fileName": "igx-slider-base-component.ts","mappedName": "IgxSliderBaseComponent"}], "members":[ {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "discreteTrack"}], "originalName": "DiscreteTrack"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "hidePrimaryLabels"}], "originalName": "HidePrimaryLabels"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "hideSecondaryLabels"}], "originalName": "HideSecondaryLabels"}, @@ -1537,18 +1713,14 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-checkbox-base-component.ts","mappedName": "IgxCheckboxBaseComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "ariaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "checked"}], "originalName": "Checked"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "CheckboxBaseLabelPosition","mappedName": "labelPosition"}], "originalName": "LabelPosition"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, @@ -1608,7 +1780,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-list-component.ts","mappedName": "IgxListComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Angular", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] }, @@ -1620,7 +1791,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-list-header-component.ts","mappedName": "IgxListHeaderComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1631,7 +1801,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-list-item-component.ts","mappedName": "IgxListItemComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1780,18 +1949,14 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Angular","fileName": "igx-radio-component.ts","mappedName": "IgxRadioComponent"}], "members":[ - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "ariaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "checked"}], "originalName": "Checked"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Angular", "mappedType": "RadioLabelPosition","mappedName": "labelPosition"}], "originalName": "LabelPosition"}, - {"names":[{"platform": "Angular", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Angular", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "Angular", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, diff --git a/apiMap/Blazor/webInputs.JS.blazor.apiMap.json b/apiMap/Blazor/webInputs.JS.blazor.apiMap.json index bfa69d969..407989d3f 100644 --- a/apiMap/Blazor/webInputs.JS.blazor.apiMap.json +++ b/apiMap/Blazor/webInputs.JS.blazor.apiMap.json @@ -28,6 +28,14 @@ {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Seconds"}], "originalName": "Seconds"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Year"}], "originalName": "Year"} ] }, + { + "originalName": "TreeSelectionChangeDetail", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "TreeSelectionChangeDetail.cs","mappedName": "IgbTreeSelectionChangeDetail"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "IgbTreeItem[]","mappedName": "NewSelection"}], "originalName": "NewSelection"} ] + }, { "originalName": "ActivePaneEventArgsDetail", "originalNamespace": "Infragistics.Controls", @@ -71,6 +79,71 @@ "members":[ {"names":[{"platform": "Blazor", "mappedType": "IgbActiveStepChangingArgsDetail","mappedName": "Detail"}], "originalName": "Detail"} ] }, + { + "originalName": "BaseAlertLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "BaseAlertLike.cs","mappedName": "IgbBaseAlertLike"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "DisplayTime"}], "originalName": "DisplayTime"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Hide"}], "originalName": "Hide"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpen"}], "originalName": "KeepOpen"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Open"}], "originalName": "Open"}, + {"names":[{"platform": "Blazor", "mappedType": "BaseAlertLikePosition","mappedName": "Position"}], "originalName": "Position"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Show"}], "originalName": "Show"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseComboBoxLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "BaseComboBoxLike.cs","mappedName": "IgbBaseComboBoxLike"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "object","mappedName": "EmitEvent"}], "originalName": "EmitEvent"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Hide"}], "originalName": "Hide"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Open"}], "originalName": "Open"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Show"}], "originalName": "Show"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseOptionLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "BaseOptionLike.cs","mappedName": "IgbBaseOptionLike"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Active"}], "originalName": "Active"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Selected"}], "originalName": "Selected"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"} ] + }, + { + "originalName": "ButtonGroup", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "ButtonGroup.cs","mappedName": "IgbButtonGroup"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "ButtonGroupAlignment","mappedName": "Alignment"}], "originalName": "Alignment"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "string[]","mappedName": "SelectedItems"}], "originalName": "SelectedItems"}, + {"names":[{"platform": "Blazor", "mappedType": "ButtonGroupSelection","mappedName": "Selection"}], "originalName": "Selection"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] + }, { "originalName": "CalendarResourceStrings", "originalNamespace": "Infragistics.Controls", @@ -105,9 +178,9 @@ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "CaseSensitiveIcon"}], "originalName": "CaseSensitiveIcon"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "Object","mappedName": "Data"}], "originalName": "Data"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Deselect"}], "originalName": "Deselect"}, - {"names":[{"platform": "Blazor", "mappedType": "ComboDir","mappedName": "Dir"}], "originalName": "Dir"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "DisableFiltering"}], "originalName": "DisableFiltering"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "DisplayKey"}], "originalName": "DisplayKey"}, @@ -128,6 +201,7 @@ {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Required"}], "originalName": "Required"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Select"}], "originalName": "Select"}, {"names":[{"platform": "Blazor", "mappedType": "object[]","mappedName": "Selection"}], "originalName": "Selection"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Show"}], "originalName": "Show"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "SingleSelect"}], "originalName": "SingleSelect"}, @@ -167,15 +241,15 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "DateTimeInput.cs","mappedName": "IgbDateTimeInput"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Clear"}], "originalName": "Clear"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "DisplayFormat"}], "originalName": "DisplayFormat"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "InputFormat"}], "originalName": "InputFormat"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Locale"}], "originalName": "Locale"}, + {"names":[{"platform": "Blazor", "mappedType": "DateTime","mappedName": "Max"}], "originalName": "Max"}, {"names":[{"platform": "Blazor", "mappedType": "DateTime","mappedName": "MaxValue"}], "originalName": "MaxValue"}, + {"names":[{"platform": "Blazor", "mappedType": "DateTime","mappedName": "Min"}], "originalName": "Min"}, {"names":[{"platform": "Blazor", "mappedType": "DateTime","mappedName": "MinValue"}], "originalName": "MinValue"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Blazor", "mappedType": "IgbDatePartDeltas","mappedName": "SpinDelta"}], "originalName": "SpinDelta"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "SpinLoop"}], "originalName": "SpinLoop"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "StepDown"}], "originalName": "StepDown"}, @@ -257,6 +331,18 @@ {"names":[{"platform": "Blazor", "mappedType": "IgbDockManagerPoint","mappedName": "OldLocation"}], "originalName": "OldLocation"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "OldWidth"}], "originalName": "OldWidth"} ] }, + { + "originalName": "KeyBindingHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "KeyBindingHandler.cs","mappedName": "IgbKeyBindingHandler"}] + }, + { + "originalName": "KeyBindingOptions", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "KeyBindingOptions.cs","mappedName": "IgbKeyBindingOptions"}] + }, { "originalName": "MaskInputBase", "originalNamespace": "Infragistics.Controls", @@ -266,10 +352,8 @@ "names":[{"platform": "Blazor","fileName": "MaskInputBase.cs","mappedName": "IgbMaskInputBase"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Prompt"}], "originalName": "Prompt"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Select"}], "originalName": "Select"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"} ] + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Select"}], "originalName": "Select"} ] }, { "originalName": "PaneCloseEventArgsDetail", @@ -335,57 +419,93 @@ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "IgbContentPane","mappedName": "SourcePane"}], "originalName": "SourcePane"} ] }, + { + "originalName": "Popover", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "Popover.cs","mappedName": "IgbPopover"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Anchor"}], "originalName": "Anchor"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Flip"}], "originalName": "Flip"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Offset"}], "originalName": "Offset"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Open"}], "originalName": "Open"}, + {"names":[{"platform": "Blazor", "mappedType": "DropdownPlacement","mappedName": "Placement"}], "originalName": "Placement"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "SameWidth"}], "originalName": "SameWidth"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Shift"}], "originalName": "Shift"}, + {"names":[{"platform": "Blazor", "mappedType": "PopoverStrategy","mappedName": "Strategy"}], "originalName": "Strategy"} ] + }, { "originalName": "Select", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "Dropdown", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Select.cs","mappedName": "IgbSelect"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Autofocus"}], "originalName": "Autofocus"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, - {"names":[{"platform": "Blazor", "mappedType": "SelectDir","mappedName": "Dir"}], "originalName": "Dir"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ClearSelection"}], "originalName": "ClearSelection"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Distance"}], "originalName": "Distance"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FocusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "IgbSelectGroup[]","mappedName": "Groups"}], "originalName": "Groups"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "Blazor", "mappedType": "IgbSelectItem[]","mappedName": "Items"}], "originalName": "Items"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Label"}], "originalName": "Label"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "Blazor", "mappedType": "DropdownPlacement","mappedName": "Placement"}], "originalName": "Placement"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Required"}], "originalName": "Required"}, + {"names":[{"platform": "Blazor", "mappedType": "SelectScrollStrategy","mappedName": "ScrollStrategy"}], "originalName": "ScrollStrategy"}, + {"names":[{"platform": "Blazor", "mappedType": "IgbSelectItem","mappedName": "SelectedItem"}], "originalName": "SelectedItem"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"} ] }, { "originalName": "SelectGroup", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownGroup", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "SelectGroup.cs","mappedName": "IgbSelectGroup"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, - {"names":[{"platform": "Blazor", "mappedType": "IgbSelectItem[]","mappedName": "Items"}], "originalName": "Items"} ] + {"names":[{"platform": "Blazor", "mappedType": "IgbSelectItem[]","mappedName": "Items"}], "originalName": "Items"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectHeader", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownHeader", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", - "names":[{"platform": "Blazor","fileName": "SelectHeader.cs","mappedName": "IgbSelectHeader"}] + "names":[{"platform": "Blazor","fileName": "SelectHeader.cs","mappedName": "IgbSelectHeader"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownItem", + "originalBaseTypeName": "BaseOptionLike", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "SelectItem.cs","mappedName": "IgbSelectItem"}] + }, + { + "originalName": "SelectItemComponentEventArgs", + "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", - "names":[{"platform": "Blazor","fileName": "SelectItem.cs","mappedName": "IgbSelectItem"}], + "names":[{"platform": "Blazor","fileName": "SelectItemComponentEventArgs.cs","mappedName": "IgbSelectItemComponentEventArgs"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "TextContent"}], "originalName": "TextContent"} ] + {"names":[{"platform": "Blazor", "mappedType": "IgbSelectItem","mappedName": "Detail"}], "originalName": "Detail"} ] }, { "originalName": "Step", @@ -397,18 +517,12 @@ "members":[ {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Active"}], "originalName": "Active"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Complete"}], "originalName": "Complete"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "ContentTop"}], "originalName": "ContentTop"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Index"}], "originalName": "Index"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FirstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "LinearDisabled"}], "originalName": "LinearDisabled"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Optional"}], "originalName": "Optional"}, - {"names":[{"platform": "Blazor", "mappedType": "StepOrientation","mappedName": "Orientation"}], "originalName": "Orientation"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "PreviousComplete"}], "originalName": "PreviousComplete"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Blazor", "mappedType": "StepStepType","mappedName": "StepType"}], "originalName": "StepType"}, - {"names":[{"platform": "Blazor", "mappedType": "StepTitlePosition","mappedName": "TitlePosition"}], "originalName": "TitlePosition"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Visited"}], "originalName": "Visited"} ] + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ToggleAnimation"}], "originalName": "ToggleAnimation"} ] }, { "originalName": "Stepper", @@ -418,9 +532,10 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Stepper.cs","mappedName": "IgbStepper"}], "members":[ + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "AnimationDuration"}], "originalName": "AnimationDuration"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "ContentTop"}], "originalName": "ContentTop"}, - {"names":[{"platform": "Blazor", "mappedType": "Direction","mappedName": "Dir"}], "originalName": "Dir"}, + {"names":[{"platform": "Blazor", "mappedType": "StepperHorizontalAnimation","mappedName": "HorizontalAnimation"}], "originalName": "HorizontalAnimation"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Linear"}], "originalName": "Linear"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "NavigateTo"}], "originalName": "NavigateTo"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Next"}], "originalName": "Next"}, @@ -430,7 +545,8 @@ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "StepperStepType","mappedName": "StepType"}], "originalName": "StepType"}, {"names":[{"platform": "Blazor", "mappedType": "IgbStep[]","mappedName": "Steps"}], "originalName": "Steps"}, - {"names":[{"platform": "Blazor", "mappedType": "StepperTitlePosition","mappedName": "TitlePosition"}], "originalName": "TitlePosition"} ] + {"names":[{"platform": "Blazor", "mappedType": "StepperTitlePosition","mappedName": "TitlePosition"}], "originalName": "TitlePosition"}, + {"names":[{"platform": "Blazor", "mappedType": "StepperVerticalAnimation","mappedName": "VerticalAnimation"}], "originalName": "VerticalAnimation"} ] }, { "originalName": "Tab", @@ -492,12 +608,78 @@ {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Selected"}], "originalName": "Selected"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] }, + { + "originalName": "Textarea", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "Textarea.cs","mappedName": "IgbTextarea"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "TextareaAutocapitalize","mappedName": "Autocapitalize"}], "originalName": "Autocapitalize"}, + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Autocomplete"}], "originalName": "Autocomplete"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "Blazor", "mappedType": "TextareaInputMode","mappedName": "InputMode"}], "originalName": "InputMode"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Label"}], "originalName": "Label"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "MaxLength"}], "originalName": "MaxLength"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "MinLength"}], "originalName": "MinLength"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Outlined"}], "originalName": "Outlined"}, + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "ReadOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Required"}], "originalName": "Required"}, + {"names":[{"platform": "Blazor", "mappedType": "TextareaResize","mappedName": "Resize"}], "originalName": "Resize"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Rows"}], "originalName": "Rows"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ScrollTo"}], "originalName": "ScrollTo"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Select"}], "originalName": "Select"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetRangeText"}], "originalName": "SetRangeText"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetSelectionRange"}], "originalName": "SetSelectionRange"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Spellcheck"}], "originalName": "Spellcheck"}, + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"}, + {"names":[{"platform": "Blazor", "mappedType": "TextareaWrap","mappedName": "Wrap"}], "originalName": "Wrap"} ] + }, + { + "originalName": "ToggleButton", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "ToggleButton.cs","mappedName": "IgbToggleButton"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Click"}], "originalName": "Click"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FocusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Selected"}], "originalName": "Selected"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"} ] + }, { "originalName": "ToggleOptions", "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "ToggleOptions.cs","mappedName": "IgbToggleOptions"}] }, + { + "originalName": "TreeSelectionChange", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "TreeSelectionChange.cs","mappedName": "IgbTreeSelectionChange"}] + }, + { + "originalName": "TreeSelectionChangeEventArgs", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "TreeSelectionChangeEventArgs.cs","mappedName": "IgbTreeSelectionChangeEventArgs"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "IgbTreeSelectionChangeDetail","mappedName": "Detail"}], "originalName": "Detail"} ] + }, { "originalName": "DockManager", "originalNamespace": "Infragistics.Controls", @@ -528,6 +710,12 @@ "members":[ {"names":[{"platform": "Blazor", "mappedType": "IgbDockManagerLayout","mappedName": "Detail"}], "originalName": "Detail"} ] }, + { + "originalName": "ValidatorHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "ValidatorHandler.cs","mappedName": "IgbValidatorHandler"}] + }, { "originalName": "TreeSelectionOptionsEventArgs", "originalNamespace": "Infragistics.Controls", @@ -552,9 +740,8 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "MaskInput.cs","mappedName": "IgbMaskInput"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Mask"}], "originalName": "Mask"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"}, {"names":[{"platform": "Blazor", "mappedType": "MaskInputValueMode","mappedName": "ValueMode"}], "originalName": "ValueMode"} ] }, @@ -567,12 +754,12 @@ "names":[{"platform": "Blazor","fileName": "Tree.cs","mappedName": "IgbTree"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Blazor", "mappedType": "Direction","mappedName": "Dir"}], "originalName": "Dir"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ExpandToItem"}], "originalName": "ExpandToItem"}, {"names":[{"platform": "Blazor", "mappedType": "TreeSelection","mappedName": "Selection"}], "originalName": "Selection"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "SingleBranchExpand"}], "originalName": "SingleBranchExpand"}, - {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"} ] + {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "ToggleNodeOnClick"}], "originalName": "ToggleNodeOnClick"} ] }, { "originalName": "TreeItem", @@ -591,6 +778,7 @@ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Expand"}], "originalName": "Expand"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ExpandWithEvent"}], "originalName": "ExpandWithEvent"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Expanded"}], "originalName": "Expanded"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FirstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Label"}], "originalName": "Label"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Level"}], "originalName": "Level"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Loading"}], "originalName": "Loading"}, @@ -908,12 +1096,13 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "ButtonBase.cs","mappedName": "IgbButtonBase"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "AriaLabel"}], "originalName": "AriaLabel"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Click"}], "originalName": "Click"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Blazor", "mappedType": "ButtonBaseType","mappedName": "DisplayType"}], "originalName": "DisplayType"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Download"}], "originalName": "Download"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FocusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "object","mappedName": "Form"}], "originalName": "Form"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Href"}], "originalName": "Href"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Rel"}], "originalName": "Rel"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, @@ -930,47 +1119,43 @@ "members":[ {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Autocomplete"}], "originalName": "Autocomplete"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Autofocus"}], "originalName": "Autofocus"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Blazor", "mappedType": "InputType","mappedName": "DisplayType"}], "originalName": "DisplayType"}, {"names":[{"platform": "Blazor", "mappedType": "InputInputmode","mappedName": "Inputmode"}], "originalName": "Inputmode"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Max"}], "originalName": "Max"}, - {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Maxlength"}], "originalName": "Maxlength"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "MaxLength"}], "originalName": "MaxLength"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Min"}], "originalName": "Min"}, - {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Minlength"}], "originalName": "Minlength"}, + {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "MinLength"}], "originalName": "MinLength"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Pattern"}], "originalName": "Pattern"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Select"}], "originalName": "Select"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Step"}], "originalName": "Step"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "StepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "StepUp"}], "originalName": "StepUp"}, - {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "TabIndex"}], "originalName": "TabIndex"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"} ] }, { "originalName": "Dropdown", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Dropdown.cs","mappedName": "IgbDropdown"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ClearSelection"}], "originalName": "ClearSelection"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Distance"}], "originalName": "Distance"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Flip"}], "originalName": "Flip"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Hide"}], "originalName": "Hide"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "Blazor", "mappedType": "IgbDropdownGroup[]","mappedName": "Groups"}], "originalName": "Groups"}, + {"names":[{"platform": "Blazor", "mappedType": "IgbDropdownItem[]","mappedName": "Items"}], "originalName": "Items"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "NavigateTo"}], "originalName": "NavigateTo"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Open"}], "originalName": "Open"}, {"names":[{"platform": "Blazor", "mappedType": "DropdownPlacement","mappedName": "Placement"}], "originalName": "Placement"}, {"names":[{"platform": "Blazor", "mappedType": "DropdownPositionStrategy","mappedName": "PositionStrategy"}], "originalName": "PositionStrategy"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "SameWidth"}], "originalName": "SameWidth"}, {"names":[{"platform": "Blazor", "mappedType": "DropdownScrollStrategy","mappedName": "ScrollStrategy"}], "originalName": "ScrollStrategy"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Select"}], "originalName": "Select"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"} ] + {"names":[{"platform": "Blazor", "mappedType": "IgbDropdownItem","mappedName": "SelectedItem"}], "originalName": "SelectedItem"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Show2"}], "originalName": "Show"}, + {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Toggle2"}], "originalName": "Toggle"} ] }, { "originalName": "Chip", @@ -1017,7 +1202,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "DropdownGroup.cs","mappedName": "IgbDropdownGroup"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1034,16 +1218,9 @@ "originalName": "DropdownItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseOptionLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "Blazor","fileName": "DropdownItem.cs","mappedName": "IgbDropdownItem"}], - "members":[ - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Active"}], "originalName": "Active"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Selected"}], "originalName": "Selected"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Value"}], "originalName": "Value"} ] + "names":[{"platform": "Blazor","fileName": "DropdownItem.cs","mappedName": "IgbDropdownItem"}] }, { "originalName": "DropdownItemComponentEventArgs", @@ -1062,19 +1239,23 @@ "names":[{"platform": "Blazor","fileName": "InputBase.cs","mappedName": "IgbInputBase"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FocusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Label"}], "originalName": "Label"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Placeholder"}], "originalName": "Placeholder"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "ReadOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Required"}], "originalName": "Required"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetRangeText"}], "originalName": "SetRangeText"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetSelectionRange"}], "originalName": "SetSelectionRange"}, - {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ThemeAdopted"}], "originalName": "ThemeAdopted"} ] + {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"} ] }, { "originalName": "LinearProgress", @@ -1113,11 +1294,17 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Rating.cs","mappedName": "IgbRating"}], "members":[ + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "AllowReset"}], "originalName": "AllowReset"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "HoverPreview"}], "originalName": "HoverPreview"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "Label"}], "originalName": "Label"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Max"}], "originalName": "Max"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "ReadOnly"}], "originalName": "ReadOnly"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Single"}], "originalName": "Single"}, {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"}, @@ -1142,18 +1329,11 @@ "originalName": "Snackbar", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Snackbar.cs","mappedName": "IgbSnackbar"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "ActionText"}], "originalName": "ActionText"}, - {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "DisplayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Hide"}], "originalName": "Hide"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Open"}], "originalName": "Open"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Show"}], "originalName": "Show"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Toggle"}], "originalName": "Toggle"} ] + {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "ActionText"}], "originalName": "ActionText"} ] }, { "originalName": "ThemeController", @@ -1165,18 +1345,9 @@ "originalName": "Toast", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "Blazor","fileName": "Toast.cs","mappedName": "IgbToast"}], - "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "DisplayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Hide"}], "originalName": "Hide"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "KeepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Open"}], "originalName": "Open"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Show"}], "originalName": "Show"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Toggle"}], "originalName": "Toggle"} ] + "names":[{"platform": "Blazor","fileName": "Toast.cs","mappedName": "IgbToast"}] }, { "originalName": "SliderLabel", @@ -1217,7 +1388,11 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Slider.cs","mappedName": "IgbSlider"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "AriaLabel"}], "originalName": "AriaLabel"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ReportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "StepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "StepUp"}], "originalName": "StepUp"}, {"names":[{"platform": "Blazor", "mappedType": "double","mappedName": "Value"}], "originalName": "Value"} ] @@ -1231,8 +1406,6 @@ "names":[{"platform": "Blazor","fileName": "SliderBase.cs","mappedName": "IgbSliderBase"}], "members":[ {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "DiscreteTrack"}], "originalName": "DiscreteTrack"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "HidePrimaryLabels"}], "originalName": "HidePrimaryLabels"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "HideSecondaryLabels"}], "originalName": "HideSecondaryLabels"}, @@ -1453,14 +1626,11 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "CheckboxBase.cs","mappedName": "IgbCheckboxBase"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "AriaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Checked"}], "originalName": "Checked"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Click"}], "originalName": "Click"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FocusComponent"}], "originalName": "FocusComponent"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Blazor", "mappedType": "CheckboxBaseLabelPosition","mappedName": "LabelPosition"}], "originalName": "LabelPosition"}, @@ -1523,7 +1693,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "List.cs","mappedName": "IgbList"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "Blazor", "mappedType": "SizableComponentSize","mappedName": "Size"}], "originalName": "Size"} ] }, @@ -1535,7 +1704,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "ListHeader.cs","mappedName": "IgbListHeader"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1546,7 +1714,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "ListItem.cs","mappedName": "IgbListItem"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "SetNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1695,14 +1862,11 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "Blazor","fileName": "Radio.cs","mappedName": "IgbRadio"}], "members":[ - {"names":[{"platform": "Blazor", "mappedType": "string", "mappedName": "AriaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "BlurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "CheckValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Checked"}], "originalName": "Checked"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "Click"}], "originalName": "Click"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "ConnectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "DisconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "FocusComponent"}], "originalName": "FocusComponent"}, {"names":[{"platform": "Blazor", "mappedType": "bool", "mappedName": "Invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "Blazor", "mappedType": "RadioLabelPosition","mappedName": "LabelPosition"}], "originalName": "LabelPosition"}, diff --git a/apiMap/React/webInputs.JS.r.apiMap.json b/apiMap/React/webInputs.JS.r.apiMap.json index 3bae1abfd..c4a3b0c1a 100644 --- a/apiMap/React/webInputs.JS.r.apiMap.json +++ b/apiMap/React/webInputs.JS.r.apiMap.json @@ -3,7 +3,11 @@ "igr-accordion-module.ts", "igr-avatar-module.ts", "igr-badge-module.ts", + "igr-base-alert-like-module.ts", + "igr-base-combo-box-like-module.ts", + "igr-base-option-like-module.ts", "igr-button-base-module.ts", + "igr-button-group-module.ts", "igr-button-module.ts", "igr-calendar-base-module.ts", "igr-calendar-module.ts", @@ -41,6 +45,7 @@ "igr-nav-drawer-item-module.ts", "igr-nav-drawer-module.ts", "igr-navbar-module.ts", + "igr-popover-module.ts", "igr-progress-base-module.ts", "igr-radio-group-module.ts", "igr-radio-module.ts", @@ -62,7 +67,9 @@ "igr-tab-module.ts", "igr-tab-panel-module.ts", "igr-tabs-module.ts", + "igr-textarea-module.ts", "igr-toast-module.ts", + "igr-toggle-button-module.ts", "igr-tree-item-module.ts", "igr-tree-module.ts" ], @@ -99,6 +106,14 @@ {"names":[{"platform": "React", "mappedType": "number", "mappedName": "seconds"}], "originalName": "Seconds"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "year"}], "originalName": "Year"} ] }, + { + "originalName": "TreeSelectionChangeDetail", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-tree-selection-change-detail.ts","mappedName": "IgrTreeSelectionChangeDetail"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "IgrTreeItem[]","mappedName": "newSelection"}], "originalName": "NewSelection"} ] + }, { "originalName": "ActivePaneEventArgsDetail", "originalNamespace": "Infragistics.Controls", @@ -142,6 +157,71 @@ "members":[ {"names":[{"platform": "React", "mappedType": "IgrActiveStepChangingArgsDetail","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "BaseAlertLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-base-alert-like.ts","mappedName": "IgrBaseAlertLike"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "React", "mappedType": "BaseAlertLikePosition","mappedName": "position"}], "originalName": "Position"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseComboBoxLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-base-combo-box-like.ts","mappedName": "IgrBaseComboBoxLike"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "any", "mappedName": "emitEvent"}], "originalName": "EmitEvent"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseOptionLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-base-option-like.ts","mappedName": "IgrBaseOptionLike"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + }, + { + "originalName": "ButtonGroup", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-button-group.ts","mappedName": "IgrButtonGroup"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "ButtonGroupAlignment","mappedName": "alignment"}], "originalName": "Alignment"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "string[]","mappedName": "selectedItems"}], "originalName": "SelectedItems"}, + {"names":[{"platform": "React", "mappedType": "ButtonGroupSelection","mappedName": "selection"}], "originalName": "Selection"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] + }, { "originalName": "CalendarResourceStrings", "originalNamespace": "Infragistics.Controls", @@ -176,9 +256,9 @@ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "caseSensitiveIcon"}], "originalName": "CaseSensitiveIcon"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "any[]", "mappedName": "data"}], "originalName": "Data"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "deselect"}], "originalName": "Deselect"}, - {"names":[{"platform": "React", "mappedType": "ComboDir","mappedName": "dir"}], "originalName": "Dir"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disableFiltering"}], "originalName": "DisableFiltering"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "displayKey"}], "originalName": "DisplayKey"}, @@ -191,7 +271,6 @@ {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "(arg: any) => any","mappedName": "itemTemplate"}], "originalName": "ItemTemplate"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, @@ -200,6 +279,7 @@ {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, {"names":[{"platform": "React", "mappedType": "any[]", "mappedName": "selection"}], "originalName": "Selection"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "singleSelect"}], "originalName": "SingleSelect"}, @@ -239,15 +319,15 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-date-time-input.ts","mappedName": "IgrDateTimeInput"}], "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "clear"}], "originalName": "Clear"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "displayFormat"}], "originalName": "DisplayFormat"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "inputFormat"}], "originalName": "InputFormat"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "locale"}], "originalName": "Locale"}, + {"names":[{"platform": "React", "mappedType": "Date","mappedName": "max"}], "originalName": "Max"}, {"names":[{"platform": "React", "mappedType": "Date","mappedName": "maxValue"}], "originalName": "MaxValue"}, + {"names":[{"platform": "React", "mappedType": "Date","mappedName": "min"}], "originalName": "Min"}, {"names":[{"platform": "React", "mappedType": "Date","mappedName": "minValue"}], "originalName": "MinValue"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "IgrDatePartDeltas","mappedName": "spinDelta"}], "originalName": "SpinDelta"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "spinLoop"}], "originalName": "SpinLoop"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, @@ -329,6 +409,18 @@ {"names":[{"platform": "React", "mappedType": "IgrDockManagerPoint","mappedName": "oldLocation"}], "originalName": "OldLocation"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "oldWidth"}], "originalName": "OldWidth"} ] }, + { + "originalName": "KeyBindingHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-key-binding-handler.ts","mappedName": "IgrKeyBindingHandler"}] + }, + { + "originalName": "KeyBindingOptions", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-key-binding-options.ts","mappedName": "IgrKeyBindingOptions"}] + }, { "originalName": "MaskInputBase", "originalNamespace": "Infragistics.Controls", @@ -338,10 +430,8 @@ "names":[{"platform": "React","fileName": "igr-mask-input-base.ts","mappedName": "IgrMaskInputBase"}], "members":[ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "prompt"}], "originalName": "Prompt"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"} ] + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"} ] }, { "originalName": "PaneCloseEventArgsDetail", @@ -407,58 +497,93 @@ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "IgrContentPane","mappedName": "sourcePane"}], "originalName": "SourcePane"} ] }, + { + "originalName": "Popover", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-popover.ts","mappedName": "IgrPopover"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "anchor"}], "originalName": "Anchor"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "flip"}], "originalName": "Flip"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "offset"}], "originalName": "Offset"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "React", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "sameWidth"}], "originalName": "SameWidth"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "shift"}], "originalName": "Shift"}, + {"names":[{"platform": "React", "mappedType": "PopoverStrategy","mappedName": "strategy"}], "originalName": "Strategy"} ] + }, { "originalName": "Select", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "Dropdown", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-select.ts","mappedName": "IgrSelect"}], "members":[ {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "autofocus"}], "originalName": "Autofocus"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, - {"names":[{"platform": "React", "mappedType": "SelectDir","mappedName": "dir"}], "originalName": "Dir"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "clearSelection"}], "originalName": "ClearSelection"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "distance"}], "originalName": "Distance"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "React", "mappedType": "IgrSelectGroup[]","mappedName": "groups"}], "originalName": "Groups"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "React", "mappedType": "IgrSelectItem[]","mappedName": "items"}], "originalName": "Items"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "React", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "React", "mappedType": "SelectScrollStrategy","mappedName": "scrollStrategy"}], "originalName": "ScrollStrategy"}, + {"names":[{"platform": "React", "mappedType": "IgrSelectItem","mappedName": "selectedItem"}], "originalName": "SelectedItem"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] }, { "originalName": "SelectGroup", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownGroup", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-select-group.ts","mappedName": "IgrSelectGroup"}], "members":[ {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, - {"names":[{"platform": "React", "mappedType": "IgrSelectItem[]","mappedName": "items"}], "originalName": "Items"} ] + {"names":[{"platform": "React", "mappedType": "IgrSelectItem[]","mappedName": "items"}], "originalName": "Items"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectHeader", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownHeader", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", - "names":[{"platform": "React","fileName": "igr-select-header.ts","mappedName": "IgrSelectHeader"}] + "names":[{"platform": "React","fileName": "igr-select-header.ts","mappedName": "IgrSelectHeader"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownItem", + "originalBaseTypeName": "BaseOptionLike", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-select-item.ts","mappedName": "IgrSelectItem"}] + }, + { + "originalName": "SelectItemComponentEventArgs", + "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", - "names":[{"platform": "React","fileName": "igr-select-item.ts","mappedName": "IgrSelectItem"}], + "names":[{"platform": "React","fileName": "igr-select-item-component-event-args.ts","mappedName": "IgrSelectItemComponentEventArgs"}], "members":[ - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "textContent"}], "originalName": "TextContent"} ] + {"names":[{"platform": "React", "mappedType": "IgrSelectItem","mappedName": "detail"}], "originalName": "Detail"} ] }, { "originalName": "Step", @@ -470,18 +595,12 @@ "members":[ {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "complete"}], "originalName": "Complete"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "contentTop"}], "originalName": "ContentTop"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "React", "mappedType": "number", "mappedName": "index"}], "originalName": "Index"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "firstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "linearDisabled"}], "originalName": "LinearDisabled"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "optional"}], "originalName": "Optional"}, - {"names":[{"platform": "React", "mappedType": "StepOrientation","mappedName": "orientation"}], "originalName": "Orientation"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "previousComplete"}], "originalName": "PreviousComplete"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "React", "mappedType": "StepStepType","mappedName": "stepType"}], "originalName": "StepType"}, - {"names":[{"platform": "React", "mappedType": "StepTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "visited"}], "originalName": "Visited"} ] + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggleAnimation"}], "originalName": "ToggleAnimation"} ] }, { "originalName": "Stepper", @@ -491,9 +610,10 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-stepper.ts","mappedName": "IgrStepper"}], "members":[ + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "animationDuration"}], "originalName": "AnimationDuration"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "contentTop"}], "originalName": "ContentTop"}, - {"names":[{"platform": "React", "mappedType": "Direction","mappedName": "dir"}], "originalName": "Dir"}, + {"names":[{"platform": "React", "mappedType": "StepperHorizontalAnimation","mappedName": "horizontalAnimation"}], "originalName": "HorizontalAnimation"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "linear"}], "originalName": "Linear"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "navigateTo"}], "originalName": "NavigateTo"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "next"}], "originalName": "Next"}, @@ -503,7 +623,8 @@ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "StepperStepType","mappedName": "stepType"}], "originalName": "StepType"}, {"names":[{"platform": "React", "mappedType": "IgrStep[]","mappedName": "steps"}], "originalName": "Steps"}, - {"names":[{"platform": "React", "mappedType": "StepperTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"} ] + {"names":[{"platform": "React", "mappedType": "StepperTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"}, + {"names":[{"platform": "React", "mappedType": "StepperVerticalAnimation","mappedName": "verticalAnimation"}], "originalName": "VerticalAnimation"} ] }, { "originalName": "Tab", @@ -565,12 +686,78 @@ {"names":[{"platform": "React", "mappedType": "string", "mappedName": "selected"}], "originalName": "Selected"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, + { + "originalName": "Textarea", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-textarea.ts","mappedName": "IgrTextarea"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "TextareaAutocapitalize","mappedName": "autocapitalize"}], "originalName": "Autocapitalize"}, + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "autocomplete"}], "originalName": "Autocomplete"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, + {"names":[{"platform": "React", "mappedType": "TextareaInputMode","mappedName": "inputMode"}], "originalName": "InputMode"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "maxLength"}], "originalName": "MaxLength"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "minLength"}], "originalName": "MinLength"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "React", "mappedType": "TextareaResize","mappedName": "resize"}], "originalName": "Resize"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "rows"}], "originalName": "Rows"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "scrollTo"}], "originalName": "ScrollTo"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setRangeText"}], "originalName": "SetRangeText"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setSelectionRange"}], "originalName": "SetSelectionRange"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "spellcheck"}], "originalName": "Spellcheck"}, + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"}, + {"names":[{"platform": "React", "mappedType": "TextareaWrap","mappedName": "wrap"}], "originalName": "Wrap"} ] + }, + { + "originalName": "ToggleButton", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-toggle-button.ts","mappedName": "IgrToggleButton"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + }, { "originalName": "ToggleOptions", "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-toggle-options.ts","mappedName": "IgrToggleOptions"}] }, + { + "originalName": "TreeSelectionChange", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-tree-selection-change.ts","mappedName": "IgrTreeSelectionChange"}] + }, + { + "originalName": "TreeSelectionChangeEventArgs", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-tree-selection-change-event-args.ts","mappedName": "IgrTreeSelectionChangeEventArgs"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "IgrTreeSelectionChangeDetail","mappedName": "detail"}], "originalName": "Detail"} ] + }, { "originalName": "DockManager", "originalNamespace": "Infragistics.Controls", @@ -601,6 +788,12 @@ "members":[ {"names":[{"platform": "React", "mappedType": "IgrDockManagerLayout","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "ValidatorHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-validator-handler.ts","mappedName": "IgrValidatorHandler"}] + }, { "originalName": "TreeSelectionOptionsEventArgs", "originalNamespace": "Infragistics.Controls", @@ -625,9 +818,8 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-mask-input.ts","mappedName": "IgrMaskInput"}], "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "mask"}], "originalName": "Mask"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"}, {"names":[{"platform": "React", "mappedType": "MaskInputValueMode","mappedName": "valueMode"}], "originalName": "ValueMode"} ] }, @@ -640,12 +832,12 @@ "names":[{"platform": "React","fileName": "igr-tree.ts","mappedName": "IgrTree"}], "members":[ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "React", "mappedType": "Direction","mappedName": "dir"}], "originalName": "Dir"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "expandToItem"}], "originalName": "ExpandToItem"}, {"names":[{"platform": "React", "mappedType": "TreeSelection","mappedName": "selection"}], "originalName": "Selection"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "singleBranchExpand"}], "originalName": "SingleBranchExpand"}, - {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] + {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "toggleNodeOnClick"}], "originalName": "ToggleNodeOnClick"} ] }, { "originalName": "TreeItem", @@ -664,6 +856,7 @@ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "expand"}], "originalName": "Expand"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "expandWithEvent"}], "originalName": "ExpandWithEvent"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "expanded"}], "originalName": "Expanded"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "firstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "level"}], "originalName": "Level"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "loading"}], "originalName": "Loading"}, @@ -981,12 +1174,13 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-button-base.ts","mappedName": "IgrButtonBase"}], "members":[ - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "ariaLabel"}], "originalName": "AriaLabel"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "React", "mappedType": "ButtonBaseType","mappedName": "displayType"}], "originalName": "DisplayType"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "download"}], "originalName": "Download"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "React", "mappedType": "any", "mappedName": "form"}], "originalName": "Form"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "href"}], "originalName": "Href"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "rel"}], "originalName": "Rel"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, @@ -1003,51 +1197,47 @@ "members":[ {"names":[{"platform": "React", "mappedType": "string", "mappedName": "autocomplete"}], "originalName": "Autocomplete"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "autofocus"}], "originalName": "Autofocus"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "React", "mappedType": "InputType","mappedName": "displayType"}], "originalName": "DisplayType"}, {"names":[{"platform": "React", "mappedType": "InputInputmode","mappedName": "inputmode"}], "originalName": "Inputmode"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "max"}], "originalName": "Max"}, - {"names":[{"platform": "React", "mappedType": "number", "mappedName": "maxlength"}], "originalName": "Maxlength"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "maxLength"}], "originalName": "MaxLength"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "min"}], "originalName": "Min"}, - {"names":[{"platform": "React", "mappedType": "number", "mappedName": "minlength"}], "originalName": "Minlength"}, + {"names":[{"platform": "React", "mappedType": "number", "mappedName": "minLength"}], "originalName": "MinLength"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "pattern"}], "originalName": "Pattern"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "step"}], "originalName": "Step"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "stepUp"}], "originalName": "StepUp"}, - {"names":[{"platform": "React", "mappedType": "number", "mappedName": "tabIndex"}], "originalName": "TabIndex"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] }, { "originalName": "Dropdown", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-dropdown.ts","mappedName": "IgrDropdown"}], "members":[ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "clearSelection"}], "originalName": "ClearSelection"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "distance"}], "originalName": "Distance"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "flip"}], "originalName": "Flip"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "React", "mappedType": "IgrDropdownGroup[]","mappedName": "groups"}], "originalName": "Groups"}, + {"names":[{"platform": "React", "mappedType": "IgrDropdownItem[]","mappedName": "items"}], "originalName": "Items"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "navigateTo"}], "originalName": "NavigateTo"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, {"names":[{"platform": "React", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, {"names":[{"platform": "React", "mappedType": "DropdownPositionStrategy","mappedName": "positionStrategy"}], "originalName": "PositionStrategy"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "sameWidth"}], "originalName": "SameWidth"}, {"names":[{"platform": "React", "mappedType": "DropdownScrollStrategy","mappedName": "scrollStrategy"}], "originalName": "ScrollStrategy"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "React", "mappedType": "IgrDropdownItem","mappedName": "selectedItem"}], "originalName": "SelectedItem"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "showTarget"}], "originalName": "Show"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show2"}], "originalName": "Show"}, {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggleTarget"}], "originalName": "Toggle"} ] + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggleTarget"}], "originalName": "Toggle"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle2"}], "originalName": "Toggle"} ] }, { "originalName": "Chip", @@ -1094,7 +1284,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-dropdown-group.ts","mappedName": "IgrDropdownGroup"}], "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1111,16 +1300,9 @@ "originalName": "DropdownItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseOptionLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "React","fileName": "igr-dropdown-item.ts","mappedName": "IgrDropdownItem"}], - "members":[ - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + "names":[{"platform": "React","fileName": "igr-dropdown-item.ts","mappedName": "IgrDropdownItem"}] }, { "originalName": "DropdownItemComponentEventArgs", @@ -1139,20 +1321,23 @@ "names":[{"platform": "React","fileName": "igr-input-base.ts","mappedName": "IgrInputBase"}], "members":[ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setRangeText"}], "originalName": "SetRangeText"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setSelectionRange"}], "originalName": "SetSelectionRange"}, - {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "themeAdopted"}], "originalName": "ThemeAdopted"} ] + {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] }, { "originalName": "LinearProgress", @@ -1191,12 +1376,17 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-rating.ts","mappedName": "IgrRating"}], "members":[ + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "allowReset"}], "originalName": "AllowReset"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "hoverPreview"}], "originalName": "HoverPreview"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "max"}], "originalName": "Max"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "single"}], "originalName": "Single"}, {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, @@ -1221,18 +1411,11 @@ "originalName": "Snackbar", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-snackbar.ts","mappedName": "IgrSnackbar"}], "members":[ - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "actionText"}], "originalName": "ActionText"}, - {"names":[{"platform": "React", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + {"names":[{"platform": "React", "mappedType": "string", "mappedName": "actionText"}], "originalName": "ActionText"} ] }, { "originalName": "ThemeController", @@ -1244,18 +1427,9 @@ "originalName": "Toast", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "React","fileName": "igr-toast.ts","mappedName": "IgrToast"}], - "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "React", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + "names":[{"platform": "React","fileName": "igr-toast.ts","mappedName": "IgrToast"}] }, { "originalName": "SliderLabel", @@ -1296,7 +1470,11 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-slider.ts","mappedName": "IgrSlider"}], "members":[ - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "ariaLabel"}], "originalName": "AriaLabel"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "stepUp"}], "originalName": "StepUp"}, {"names":[{"platform": "React", "mappedType": "number", "mappedName": "value"}], "originalName": "Value"} ] @@ -1310,8 +1488,6 @@ "names":[{"platform": "React","fileName": "igr-slider-base.ts","mappedName": "IgrSliderBase"}], "members":[ {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, - {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "discreteTrack"}], "originalName": "DiscreteTrack"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "hidePrimaryLabels"}], "originalName": "HidePrimaryLabels"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "hideSecondaryLabels"}], "originalName": "HideSecondaryLabels"}, @@ -1537,18 +1713,14 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-checkbox-base.ts","mappedName": "IgrCheckboxBase"}], "members":[ - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "ariaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "checked"}], "originalName": "Checked"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "CheckboxBaseLabelPosition","mappedName": "labelPosition"}], "originalName": "LabelPosition"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, @@ -1608,7 +1780,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-list.ts","mappedName": "IgrList"}], "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "React", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] }, @@ -1620,7 +1791,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-list-header.ts","mappedName": "IgrListHeader"}], "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1631,7 +1801,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-list-item.ts","mappedName": "IgrListItem"}], "members":[ - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { @@ -1780,18 +1949,14 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "React","fileName": "igr-radio.ts","mappedName": "IgrRadio"}], "members":[ - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "ariaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "blurComponent"}], "originalName": "BlurComponent"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "checked"}], "originalName": "Checked"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "connectedCallback"}], "originalName": "ConnectedCallback"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "React", "mappedType": "method", "mappedName": "disconnectedCallback"}], "originalName": "DisconnectedCallback"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "focusComponent"}], "originalName": "FocusComponent"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "React", "mappedType": "RadioLabelPosition","mappedName": "labelPosition"}], "originalName": "LabelPosition"}, - {"names":[{"platform": "React", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "React", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, diff --git a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json index 5e542f081..7aff31d31 100644 --- a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json +++ b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json @@ -3,7 +3,11 @@ "igc-accordion-module.ts", "igc-avatar-module.ts", "igc-badge-module.ts", + "igc-base-alert-like-module.ts", + "igc-base-combo-box-like-module.ts", + "igc-base-option-like-module.ts", "igc-button-base-module.ts", + "igc-button-group-module.ts", "igc-button-module.ts", "igc-calendar-base-module.ts", "igc-calendar-module.ts", @@ -41,6 +45,7 @@ "igc-nav-drawer-item-module.ts", "igc-nav-drawer-module.ts", "igc-navbar-module.ts", + "igc-popover-module.ts", "igc-progress-base-module.ts", "igc-radio-group-module.ts", "igc-radio-module.ts", @@ -62,7 +67,9 @@ "igc-tab-module.ts", "igc-tab-panel-module.ts", "igc-tabs-module.ts", + "igc-textarea-module.ts", "igc-toast-module.ts", + "igc-toggle-button-module.ts", "igc-tree-item-module.ts", "igc-tree-module.ts" ], @@ -99,6 +106,14 @@ {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "seconds"}], "originalName": "Seconds"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "year"}], "originalName": "Year"} ] }, + { + "originalName": "TreeSelectionChangeDetail", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-tree-selection-change-detail.ts","mappedName": "IgcTreeSelectionChangeDetail"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "IgcTreeItemComponent[]","mappedName": "newSelection"}], "originalName": "NewSelection"} ] + }, { "originalName": "ActivePaneEventArgsDetail", "originalNamespace": "Infragistics.Controls", @@ -142,6 +157,68 @@ "members":[ {"names":[{"platform": "WebComponents", "mappedType": "IgcActiveStepChangingArgsDetail","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "BaseAlertLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-base-alert-like-component.ts","mappedName": "IgcBaseAlertLikeComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "WebComponents", "mappedType": "BaseAlertLikePosition","mappedName": "position"}], "originalName": "Position"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseComboBoxLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-base-combo-box-like-component.ts","mappedName": "IgcBaseComboBoxLikeComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "any", "mappedName": "emitEvent"}], "originalName": "EmitEvent"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, + { + "originalName": "BaseOptionLike", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-base-option-like-component.ts","mappedName": "IgcBaseOptionLikeComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + }, + { + "originalName": "ButtonGroup", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-button-group-component.ts","mappedName": "IgcButtonGroupComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "ButtonGroupAlignment","mappedName": "alignment"}], "originalName": "Alignment"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "WebComponents", "mappedType": "string[]","mappedName": "selectedItems"}], "originalName": "SelectedItems"}, + {"names":[{"platform": "WebComponents", "mappedType": "ButtonGroupSelection","mappedName": "selection"}], "originalName": "Selection"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] + }, { "originalName": "CalendarResourceStrings", "originalNamespace": "Infragistics.Controls", @@ -178,7 +255,6 @@ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "any[]", "mappedName": "data"}], "originalName": "Data"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "deselect"}], "originalName": "Deselect"}, - {"names":[{"platform": "WebComponents", "mappedType": "ComboDir","mappedName": "dir"}], "originalName": "Dir"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disableFiltering"}], "originalName": "DisableFiltering"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "displayKey"}], "originalName": "DisplayKey"}, @@ -191,7 +267,6 @@ {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "(arg: any) => any","mappedName": "itemTemplate"}], "originalName": "ItemTemplate"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, @@ -200,6 +275,7 @@ {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, {"names":[{"platform": "WebComponents", "mappedType": "any[]", "mappedName": "selection"}], "originalName": "Selection"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "singleSelect"}], "originalName": "SingleSelect"}, @@ -239,14 +315,14 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-date-time-input-component.ts","mappedName": "IgcDateTimeInputComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "clear"}], "originalName": "Clear"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "displayFormat"}], "originalName": "DisplayFormat"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "inputFormat"}], "originalName": "InputFormat"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "locale"}], "originalName": "Locale"}, + {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "max"}], "originalName": "Max"}, {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "maxValue"}], "originalName": "MaxValue"}, + {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "min"}], "originalName": "Min"}, {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "minValue"}], "originalName": "MinValue"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "IgcDatePartDeltas","mappedName": "spinDelta"}], "originalName": "SpinDelta"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "spinLoop"}], "originalName": "SpinLoop"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, @@ -327,6 +403,18 @@ {"names":[{"platform": "WebComponents", "mappedType": "IgcDockManagerPoint","mappedName": "oldLocation"}], "originalName": "OldLocation"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "oldWidth"}], "originalName": "OldWidth"} ] }, + { + "originalName": "KeyBindingHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-key-binding-handler.ts","mappedName": "IgcKeyBindingHandler"}] + }, + { + "originalName": "KeyBindingOptions", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-key-binding-options.ts","mappedName": "IgcKeyBindingOptions"}] + }, { "originalName": "MaskInputBase", "originalNamespace": "Infragistics.Controls", @@ -335,10 +423,8 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-mask-input-base-component.ts","mappedName": "IgcMaskInputBaseComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "prompt"}], "originalName": "Prompt"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"} ] + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"} ] }, { "originalName": "PaneCloseEventArgsDetail", @@ -404,57 +490,90 @@ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "WebComponents", "mappedType": "IgcContentPaneComponent","mappedName": "sourcePane"}], "originalName": "SourcePane"} ] }, + { + "originalName": "Popover", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-popover-component.ts","mappedName": "IgcPopoverComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "anchor"}], "originalName": "Anchor"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "flip"}], "originalName": "Flip"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "offset"}], "originalName": "Offset"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "WebComponents", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "sameWidth"}], "originalName": "SameWidth"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "shift"}], "originalName": "Shift"}, + {"names":[{"platform": "WebComponents", "mappedType": "PopoverStrategy","mappedName": "strategy"}], "originalName": "Strategy"} ] + }, { "originalName": "Select", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "Dropdown", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-select-component.ts","mappedName": "IgcSelectComponent"}], "members":[ {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "autofocus"}], "originalName": "Autofocus"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Blur"}], "originalName": "BlurComponent"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, - {"names":[{"platform": "WebComponents", "mappedType": "SelectDir","mappedName": "dir"}], "originalName": "Dir"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "clearSelection"}], "originalName": "ClearSelection"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "distance"}], "originalName": "Distance"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Focus"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "IgcSelectGroupComponent[]","mappedName": "groups"}], "originalName": "Groups"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "WebComponents", "mappedType": "IgcSelectItemComponent[]","mappedName": "items"}], "originalName": "Items"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "WebComponents", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "WebComponents", "mappedType": "SelectScrollStrategy","mappedName": "scrollStrategy"}], "originalName": "ScrollStrategy"}, + {"names":[{"platform": "WebComponents", "mappedType": "IgcSelectItemComponent","mappedName": "selectedItem"}], "originalName": "SelectedItem"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] }, { "originalName": "SelectGroup", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownGroup", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-select-group-component.ts","mappedName": "IgcSelectGroupComponent"}], "members":[ {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "WebComponents", "mappedType": "IgcSelectItemComponent[]","mappedName": "items"}], "originalName": "Items"} ] + {"names":[{"platform": "WebComponents", "mappedType": "IgcSelectItemComponent[]","mappedName": "items"}], "originalName": "Items"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectHeader", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownHeader", + "originalBaseTypeName": "BaseElement", "packageName": "igniteui-webinputs", - "names":[{"platform": "WebComponents","fileName": "igc-select-header-component.ts","mappedName": "IgcSelectHeaderComponent"}] + "names":[{"platform": "WebComponents","fileName": "igc-select-header-component.ts","mappedName": "IgcSelectHeaderComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, { "originalName": "SelectItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "DropdownItem", + "originalBaseTypeName": "BaseOptionLike", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-select-item-component.ts","mappedName": "IgcSelectItemComponent"}] + }, + { + "originalName": "SelectItemComponentEventArgs", + "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", - "names":[{"platform": "WebComponents","fileName": "igc-select-item-component.ts","mappedName": "IgcSelectItemComponent"}], + "names":[{"platform": "WebComponents","fileName": "igc-select-item-component-event-args.ts","mappedName": "IgcSelectItemComponentEventArgs"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "textContent"}], "originalName": "TextContent"} ] + {"names":[{"platform": "WebComponents", "mappedType": "IgcSelectItemComponent","mappedName": "detail"}], "originalName": "Detail"} ] }, { "originalName": "Step", @@ -466,18 +585,12 @@ "members":[ {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "complete"}], "originalName": "Complete"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "contentTop"}], "originalName": "ContentTop"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "index"}], "originalName": "Index"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "firstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "linearDisabled"}], "originalName": "LinearDisabled"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "optional"}], "originalName": "Optional"}, - {"names":[{"platform": "WebComponents", "mappedType": "StepOrientation","mappedName": "orientation"}], "originalName": "Orientation"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "previousComplete"}], "originalName": "PreviousComplete"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "WebComponents", "mappedType": "StepStepType","mappedName": "stepType"}], "originalName": "StepType"}, - {"names":[{"platform": "WebComponents", "mappedType": "StepTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "visited"}], "originalName": "Visited"} ] + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggleAnimation"}], "originalName": "ToggleAnimation"} ] }, { "originalName": "Stepper", @@ -487,8 +600,9 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-stepper-component.ts","mappedName": "IgcStepperComponent"}], "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "animationDuration"}], "originalName": "AnimationDuration"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "contentTop"}], "originalName": "ContentTop"}, - {"names":[{"platform": "WebComponents", "mappedType": "Direction","mappedName": "dir"}], "originalName": "Dir"}, + {"names":[{"platform": "WebComponents", "mappedType": "StepperHorizontalAnimation","mappedName": "horizontalAnimation"}], "originalName": "HorizontalAnimation"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "linear"}], "originalName": "Linear"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "navigateTo"}], "originalName": "NavigateTo"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "next"}], "originalName": "Next"}, @@ -498,7 +612,8 @@ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "WebComponents", "mappedType": "StepperStepType","mappedName": "stepType"}], "originalName": "StepType"}, {"names":[{"platform": "WebComponents", "mappedType": "IgcStepComponent[]","mappedName": "steps"}], "originalName": "Steps"}, - {"names":[{"platform": "WebComponents", "mappedType": "StepperTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"} ] + {"names":[{"platform": "WebComponents", "mappedType": "StepperTitlePosition","mappedName": "titlePosition"}], "originalName": "TitlePosition"}, + {"names":[{"platform": "WebComponents", "mappedType": "StepperVerticalAnimation","mappedName": "verticalAnimation"}], "originalName": "VerticalAnimation"} ] }, { "originalName": "Tab", @@ -557,12 +672,76 @@ {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "selected"}], "originalName": "Selected"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"} ] }, + { + "originalName": "Textarea", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-textarea-component.ts","mappedName": "IgcTextareaComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "TextareaAutocapitalize","mappedName": "autocapitalize"}], "originalName": "Autocapitalize"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "autocomplete"}], "originalName": "Autocomplete"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "WebComponents", "mappedType": "TextareaInputMode","mappedName": "inputMode"}], "originalName": "InputMode"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "maxLength"}], "originalName": "MaxLength"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "minLength"}], "originalName": "MinLength"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "WebComponents", "mappedType": "TextareaResize","mappedName": "resize"}], "originalName": "Resize"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "rows"}], "originalName": "Rows"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "scrollTo"}], "originalName": "ScrollTo"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setRangeText"}], "originalName": "SetRangeText"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setSelectionRange"}], "originalName": "SetSelectionRange"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "spellcheck"}], "originalName": "Spellcheck"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"}, + {"names":[{"platform": "WebComponents", "mappedType": "TextareaWrap","mappedName": "wrap"}], "originalName": "Wrap"} ] + }, + { + "originalName": "ToggleButton", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-toggle-button-component.ts","mappedName": "IgcToggleButtonComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Blur"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Focus"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + }, { "originalName": "ToggleOptions", "originalNamespace": "Infragistics.Controls", "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-toggle-options.ts","mappedName": "IgcToggleOptions"}] }, + { + "originalName": "TreeSelectionChange", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-tree-selection-change.ts","mappedName": "IgcTreeSelectionChange"}] + }, + { + "originalName": "TreeSelectionChangeEventArgs", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-tree-selection-change-event-args.ts","mappedName": "IgcTreeSelectionChangeEventArgs"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "IgcTreeSelectionChangeDetail","mappedName": "detail"}], "originalName": "Detail"} ] + }, { "originalName": "DockManager", "originalNamespace": "Infragistics.Controls", @@ -593,6 +772,12 @@ "members":[ {"names":[{"platform": "WebComponents", "mappedType": "IgcDockManagerLayout","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "ValidatorHandler", + "originalNamespace": "Infragistics.Controls", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-validator-handler.ts","mappedName": "IgcValidatorHandler"}] + }, { "originalName": "TreeSelectionOptionsEventArgs", "originalNamespace": "Infragistics.Controls", @@ -617,9 +802,7 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-mask-input-component.ts","mappedName": "IgcMaskInputComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "mask"}], "originalName": "Mask"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"}, {"names":[{"platform": "WebComponents", "mappedType": "MaskInputValueMode","mappedName": "valueMode"}], "originalName": "ValueMode"} ] }, @@ -631,12 +814,16 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-tree-component.ts","mappedName": "IgcTreeComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "Direction","mappedName": "dir"}], "originalName": "Dir"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "expandToItem"}], "originalName": "ExpandToItem"}, {"names":[{"platform": "WebComponents", "mappedType": "TreeSelection","mappedName": "selection"}], "originalName": "Selection"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "expand"}], "originalName": "Expand"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "collapse"}], "originalName": "Collapse"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "deselect"}], "originalName": "Deselect"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "singleBranchExpand"}], "originalName": "SingleBranchExpand"}, - {"names":[{"platform": "WebComponents", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] + {"names":[{"platform": "WebComponents", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "toggleNodeOnClick"}], "originalName": "ToggleNodeOnClick"} ] }, { "originalName": "TreeItem", @@ -653,6 +840,7 @@ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "expand"}], "originalName": "Expand"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "expandWithEvent"}], "originalName": "ExpandWithEvent"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "expanded"}], "originalName": "Expanded"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "firstUpdated"}], "originalName": "FirstUpdated"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "level"}], "originalName": "Level"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "loading"}], "originalName": "Loading"}, @@ -970,12 +1158,13 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-button-base-component.ts","mappedName": "IgcButtonBaseComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "ariaLabel"}], "originalName": "AriaLabel"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Blur"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "click"}], "originalName": "Click"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "WebComponents", "mappedType": "ButtonBaseType","mappedName": "Type"}], "originalName": "DisplayType"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "download"}], "originalName": "Download"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Focus"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "any", "mappedName": "form"}], "originalName": "Form"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "href"}], "originalName": "Href"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "rel"}], "originalName": "Rel"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, @@ -992,51 +1181,46 @@ "members":[ {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "autocomplete"}], "originalName": "Autocomplete"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "autofocus"}], "originalName": "Autofocus"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "InputType","mappedName": "Type"}], "originalName": "DisplayType"}, {"names":[{"platform": "WebComponents", "mappedType": "InputInputmode","mappedName": "inputmode"}], "originalName": "Inputmode"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "max"}], "originalName": "Max"}, - {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "maxlength"}], "originalName": "Maxlength"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "maxLength"}], "originalName": "MaxLength"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "min"}], "originalName": "Min"}, - {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "minlength"}], "originalName": "Minlength"}, + {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "minLength"}], "originalName": "MinLength"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "pattern"}], "originalName": "Pattern"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "step"}], "originalName": "Step"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "stepUp"}], "originalName": "StepUp"}, - {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "tabIndex"}], "originalName": "TabIndex"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] }, { "originalName": "Dropdown", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseComboBoxLike", "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-dropdown-component.ts","mappedName": "IgcDropdownComponent"}], "members":[ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "clearSelection"}], "originalName": "ClearSelection"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "distance"}], "originalName": "Distance"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "flip"}], "originalName": "Flip"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpenOnOutsideClick"}], "originalName": "KeepOpenOnOutsideClick"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpenOnSelect"}], "originalName": "KeepOpenOnSelect"}, + {"names":[{"platform": "WebComponents", "mappedType": "IgcDropdownGroupComponent[]","mappedName": "groups"}], "originalName": "Groups"}, + {"names":[{"platform": "WebComponents", "mappedType": "IgcDropdownItemComponent[]","mappedName": "items"}], "originalName": "Items"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "navigateTo"}], "originalName": "NavigateTo"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, {"names":[{"platform": "WebComponents", "mappedType": "DropdownPlacement","mappedName": "placement"}], "originalName": "Placement"}, {"names":[{"platform": "WebComponents", "mappedType": "DropdownPositionStrategy","mappedName": "positionStrategy"}], "originalName": "PositionStrategy"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "sameWidth"}], "originalName": "SameWidth"}, {"names":[{"platform": "WebComponents", "mappedType": "DropdownScrollStrategy","mappedName": "scrollStrategy"}], "originalName": "ScrollStrategy"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "select"}], "originalName": "Select"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, + {"names":[{"platform": "WebComponents", "mappedType": "IgcDropdownItemComponent","mappedName": "selectedItem"}], "originalName": "SelectedItem"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "showTarget"}], "originalName": "Show"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show2"}], "originalName": "Show"}, {"names":[{"platform": "WebComponents", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggleTarget"}], "originalName": "Toggle"} ] + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggleTarget"}], "originalName": "Toggle"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle2"}], "originalName": "Toggle"} ] }, { "originalName": "Chip", @@ -1099,15 +1283,9 @@ "originalName": "DropdownItem", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseOptionLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "WebComponents","fileName": "igc-dropdown-item-component.ts","mappedName": "IgcDropdownItemComponent"}], - "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "active"}], "originalName": "Active"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "selected"}], "originalName": "Selected"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "value"}], "originalName": "Value"} ] + "names":[{"platform": "WebComponents","fileName": "igc-dropdown-item-component.ts","mappedName": "IgcDropdownItemComponent"}] }, { "originalName": "DropdownItemComponentEventArgs", @@ -1126,19 +1304,21 @@ "names":[{"platform": "WebComponents","fileName": "igc-input-base-component.ts","mappedName": "IgcInputBaseComponent"}], "members":[ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Blur"}], "originalName": "BlurComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Focus"}], "originalName": "FocusComponent"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "outlined"}], "originalName": "Outlined"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "placeholder"}], "originalName": "Placeholder"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setRangeText"}], "originalName": "SetRangeText"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setSelectionRange"}], "originalName": "SetSelectionRange"}, - {"names":[{"platform": "WebComponents", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "themeAdopted"}], "originalName": "ThemeAdopted"} ] + {"names":[{"platform": "WebComponents", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"} ] }, { "originalName": "LinearProgress", @@ -1176,12 +1356,17 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-rating-component.ts","mappedName": "IgcRatingComponent"}], "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "allowReset"}], "originalName": "AllowReset"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "hoverPreview"}], "originalName": "HoverPreview"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "label"}], "originalName": "Label"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "max"}], "originalName": "Max"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "readOnly"}], "originalName": "ReadOnly"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "readonly"}], "originalName": "Readonly"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "single"}], "originalName": "Single"}, {"names":[{"platform": "WebComponents", "mappedType": "SizableComponentSize","mappedName": "size"}], "originalName": "Size"}, @@ -1205,18 +1390,11 @@ "originalName": "Snackbar", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-snackbar-component.ts","mappedName": "IgcSnackbarComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "actionText"}], "originalName": "ActionText"}, - {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "actionText"}], "originalName": "ActionText"} ] }, { "originalName": "ThemeController", @@ -1228,17 +1406,9 @@ "originalName": "Toast", "originalNamespace": "Infragistics.Controls", "originalBaseTypeNamespace": "Infragistics.Controls", - "originalBaseTypeName": "BaseElement", + "originalBaseTypeName": "BaseAlertLike", "packageName": "igniteui-webinputs", - "names":[{"platform": "WebComponents","fileName": "igc-toast-component.ts","mappedName": "IgcToastComponent"}], - "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "displayTime"}], "originalName": "DisplayTime"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "keepOpen"}], "originalName": "KeepOpen"}, - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setNativeElement"}], "originalName": "SetNativeElement"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, - {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + "names":[{"platform": "WebComponents","fileName": "igc-toast-component.ts","mappedName": "IgcToastComponent"}] }, { "originalName": "SliderLabel", @@ -1279,7 +1449,11 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-slider-component.ts","mappedName": "IgcSliderComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "ariaLabel"}], "originalName": "AriaLabel"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "stepDown"}], "originalName": "StepDown"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "stepUp"}], "originalName": "StepUp"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "value"}], "originalName": "Value"} ] @@ -1292,7 +1466,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-slider-base-component.ts","mappedName": "IgcSliderBaseComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "disabled"}], "originalName": "Disabled"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "discreteTrack"}], "originalName": "DiscreteTrack"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "hidePrimaryLabels"}], "originalName": "HidePrimaryLabels"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "hideSecondaryLabels"}], "originalName": "HideSecondaryLabels"}, @@ -1518,7 +1691,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-checkbox-base-component.ts","mappedName": "IgcCheckboxBaseComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "ariaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Blur"}], "originalName": "BlurComponent"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "checked"}], "originalName": "Checked"}, @@ -1527,7 +1699,6 @@ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Focus"}], "originalName": "FocusComponent"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "CheckboxBaseLabelPosition","mappedName": "labelPosition"}], "originalName": "LabelPosition"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, @@ -1753,7 +1924,6 @@ "packageName": "igniteui-webinputs", "names":[{"platform": "WebComponents","fileName": "igc-radio-component.ts","mappedName": "IgcRadioComponent"}], "members":[ - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "ariaLabelledby"}], "originalName": "AriaLabelledby"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Blur"}], "originalName": "BlurComponent"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "checkValidity"}], "originalName": "CheckValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "checked"}], "originalName": "Checked"}, @@ -1762,7 +1932,6 @@ {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "Focus"}], "originalName": "FocusComponent"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "invalid"}], "originalName": "Invalid"}, {"names":[{"platform": "WebComponents", "mappedType": "RadioLabelPosition","mappedName": "labelPosition"}], "originalName": "LabelPosition"}, - {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "name"}], "originalName": "Name"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "reportValidity"}], "originalName": "ReportValidity"}, {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "required"}], "originalName": "Required"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "setCustomValidity"}], "originalName": "SetCustomValidity"}, diff --git a/doc/en/components/charts/features/chart-data-legend.md b/doc/en/components/charts/features/chart-data-legend.md index e105f0fd3..7701399cb 100644 --- a/doc/en/components/charts/features/chart-data-legend.md +++ b/doc/en/components/charts/features/chart-data-legend.md @@ -106,19 +106,13 @@ You have the ability to change the default decimal display of values within the `sample="/charts/financial-chart/data-legend-formatting-currency", height="450", alt="{Platform} Formatting Currency Example"` +The `XamDataLegend` has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for: - -## {Platform} Data Legend Styling Events - -The `XamDataLegend` has three events that fire when rendering their corresponding row. These events are listed below with a description of what they are designed to be used for: - -- `StyleHeaderRow`: This event fires once when rendering the header row. - `StyleSeriesRow`: This event fires once for each series row, which allows conditional styling of the values of the series. - `StyleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart. - `StyleSummaryRow`: This event fires once when rendering the summary row. - `StyleSummaryColumn`: This event fires once when rendering the summary column. -Each of the above events exposes a `DataLegendStylingRowEventArgs` parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series. ## API References diff --git a/doc/en/components/charts/features/chart-data-tooltip.md b/doc/en/components/charts/features/chart-data-tooltip.md index 7c1c5c2eb..c9df0239c 100644 --- a/doc/en/components/charts/features/chart-data-tooltip.md +++ b/doc/en/components/charts/features/chart-data-tooltip.md @@ -71,18 +71,7 @@ The following example demonstrates a data tooltip with the added columns of Open `sample="/charts/financial-chart/data-tooltip", height="450", alt="{Platform} Financial Chart Data Tooltip Example"` - -## {Platform} Data Tooltip Styling - -The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the `DataToolTipTitleTextColor`, `DataToolTipLabelTextColor`, `DataToolTipValueTextColor`, and `DataToolTipUnitsTextColor` properties. - -The following example demonstrates usage of the styling properties mentioned above: - -`sample="/charts/financial-chart/data-tooltip-styling-props", height="450", alt="{Platform} Financial Chart Data Tooltip Styling Example"` - - - -## {Platform} Data Tooltip Grouping & Positioning +## {Platform} Data Tooltip Grouping & Positioning for Category Chart & Financial Chart You can set `DataToolTipGroupingMode` property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the `DataToolTipGroupedPositionModeX` and `DataToolTipGroupedPositionModeY` properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area. @@ -108,8 +97,6 @@ You can change the default decimal display of values within the **DataToolTip** `sample="/charts/financial-chart/data-tooltip-formatting-currency", height="450", alt="{Platform} Financial Chart Data Tooltip Formatting Currency Example"` - - ## API References - `DataToolTipExcludedColumns` diff --git a/doc/en/components/charts/features/chart-highlighting.md b/doc/en/components/charts/features/chart-highlighting.md index f8edbe1aa..bc6803b93 100644 --- a/doc/en/components/charts/features/chart-highlighting.md +++ b/doc/en/components/charts/features/chart-highlighting.md @@ -6,17 +6,11 @@ mentionedTypes: ["CategoryChart"] namespace: Infragistics.Controls.Charts --- -# {Platform} Chart Highlighting - -All {Platform} Charts support highlighting of visuals such as lines, columns, and markers when the end-user hovers mouse cursor over data items rendered in plot area. Highlighting is supported by the `CategoryChart`, `FinancialChart`, and `XamDataChart` controls and they have the same API for using the highlighting feature. - ## {Platform} Chart Highlighting Example -The following example demonstrates the different highlighting options that are available on the {Platform} chart. Click on the checkboxes to enable the different highlight types. - -`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} Highlighting Example"` - +The following example demonstrates the different highlighting options that are available on the {Platform} chart. +`sample="/charts/category-chart/annotations-highlighting", height="500", alt="{Platform} Highlighting Example"`
@@ -24,10 +18,22 @@ The following example demonstrates the different highlighting options that are a All {Platform} Charts support a variety of highlighting options. `HighlightingMode` can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. `HighlightingBehavior` can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the `CategoryChart`, `FinancialChart`, and `XamDataChart` controls and they have the same API for using the highlighting feature. +The following example demonstrates the `HighlightingMode` {Platform} chart. + +`sample="/charts/category-chart/highlighting-mode", height="500", alt="{Platform} Highlighting Mode Example"` + +The following example demonstrates the `HighlightingBehavior` {Platform} chart. + +`sample="/charts/category-chart/highlighting-behavior", height="500", alt="{Platform} Highlighting Mode Example"` + # {Platform} Chart Legend Highlighting All {Platform} Charts support legend highlighting. `LegendHighlightingMode` can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the `CategoryChart`, `FinancialChart`, and `XamDataChart` controls and they have the same API for using the highlighting feature. +The following example demonstrates the legend series highlighting {Platform} chart. + +`sample="/charts/category-chart/legend-highlighting", height="500", alt="{Platform} Highlighting Mode Example"` + ## Highlight Layers The {ProductName} `CategoryChart` can enable three types of highlighting when hovering over data items. @@ -38,6 +44,11 @@ The {ProductName} `CategoryChart` can enable three types of highlighting when ho 3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the `IsCategoryHighlightingEnabled` property to true. +The following example demonstrates the different highlighting layers that are available on the {Platform} chart. + +`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} Highlighting Example"` + + ## Additional Resources You can find more information about related chart features in these topics: diff --git a/doc/en/components/general-changelog-dv-blazor.md b/doc/en/components/general-changelog-dv-blazor.md index 2646f4e36..ea19f4ec9 100644 --- a/doc/en/components/general-changelog-dv-blazor.md +++ b/doc/en/components/general-changelog-dv-blazor.md @@ -2,7 +2,7 @@ title: {Platform} What's New | {ProductName} | Infragistics _description: Learn about new features in the {ProductName}. _keywords: Changelog, What's New, {ProductName}, Infragistics -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "Infragistics.Controls.DataGridCellEventArgs", "Infragistics.Controls.GridBaseDirective", "MaskInput", "Shape", "RoundShape"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "Infragistics.Controls.DataGridCellEventArgs", "Infragistics.Controls.GridBaseDirective", "MaskInput", "Shape", "RoundShape", "XamRadialGauge, XamLinearGauge, XamBulletGraph, XamTreemap", "XamRadialChart"] sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"] namespace: Infragistics.Controls.Charts --- @@ -10,27 +10,99 @@ namespace: Infragistics.Controls.Charts All notable changes for each version of {ProductName} are documented on this page. +## **{PackageVerChanges-23-2-APR2}** + +- `XamBulletGraph` + - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. +- `XamLinearGauge` + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamRadialGauge` + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamTreemap` + - Now exposes a `HighlightingMode` property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the `HighlightingTransitionDuration` property. + +## **{PackageVerChanges-23-2-APR}** + +- `Bug Fixes` + +## **{PackageVerChanges-23-2-MAR}** + +### New Components + +- [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) component +- `Textarea` component +- `ButtonGroup` component + +### New Features + +- `DockManager` + - New `ProximityDock` property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. + - New `ContainedInBoundaries` property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`. + - New `ShowPaneHeaders` property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`. +- `Tree` + - Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. +- `Rating` + - `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. +- `Select`, `Dropdown` + - exposed `selectedItem`, `items` and `groups` getters +- `XamRadialGauge` + - New title/subtitle properties. `TitleText`, `SubtitleText` will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and `TitleExtent`. Finally, the new `TitleDisplaysValue` will allow the value to correspond with the needle's position. + - New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling) + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamRadialChart` + - New Label Mode + The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + +### General + +- `Input`, `MaskInput`, `DateTimeInput`, `Rating` + - `Readonly` has been renamed to `ReadOnly` +- `Input` + - `Maxlength` has been renamed to `MaxLength` + - `Minlength` has been renamed to `MinLength` + +### Deprecations + +- The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the avatar component to small: + ```css + .avatar { + --ig-size: var(--ig-size-small); + } + ``` +- `DateTimeInput` + - `MinValue` and `MaxValue` properties have been deprecated. Please, use `Min` and `Max` instead. +- `RangeSlider` + - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use `ThumbLabelLower` and `ThumbLabelUpper` instead. + +### Removed + +- Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change. +- `Slider` - `ariaLabel` shadowed property. This is a non-breaking change. +- `Checkbox` - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- `Switch` - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- `Radio` - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. + ## **{PackageVerChanges-23-2-JAN}** ### .NET 8.0 support * 2023.2 release now support .NET 8. For more information on .NET 8 please refer to [this article on Microsoft's site](https://learn.microsoft.com/en-us/dotnet/core/whats-new/dotnet-8) . -### {PackageCharts} Charts +### {PackageCharts} (Charts) -* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `DataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `XamDataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. ## **{PackageVerChanges-23-2}** ### {PackageGrids} (Toolbar - Beta) -* A new tool has been added, as a default tool, to save the chart to an image via the clipboard. +* Save tool action has been added to save the chart to an image via the clipboard. * Vertical orientation has been added via the toolbar's `Orientation` property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. * Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ### {PackageGrids} (Grid) -* New Features Added: - - [State Persistence](grids/grid/state-persistence.md) + +* Added New Features - [State Persistence](grids/grid/state-persistence.md) ## **{PackageVerChanges-23-1}** @@ -38,7 +110,7 @@ All notable changes for each version of {ProductName} are documented on this pag * [Toolbar](menus/toolbar.md) - Beta. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tools when linked to our `XamDataChart` or `CategoryChart` components, but it also gives you the ability to create custom tools for your project. -### {PackageCharts} Charts +### {PackageCharts} (Charts) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the `ValueLayer` is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the `CategoryChart` and `FinancialChart` by adding to the new `ValueLines` collection. @@ -96,9 +168,7 @@ All notable changes for each version of {ProductName} are documented on this pag ### {PackageCharts} (Charts) -Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. - -These new chart improvements include: +Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: * Responsive layouts for horizontal label rotation based on browser / screen size. * Enhanced rendering for rounded labels on all platforms. @@ -140,7 +210,7 @@ These new chart improvements include: * Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. * Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. * Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the `IsTransitionInEnabled` property to true. From there, you can set the `TransitionInDuration` property to determine how long your animation should take to complete and the `TransitionInMode` to determine the type of animation that takes place. -* Added `AssigningCategoryStyle` event, is now available to all series in `DataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. +* Added `AssigningCategoryStyle` event, is now available to all series in `XamDataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. * New `AllowedPositions` enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. * New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. - `CalloutCornerRadius` for CalloutLayer @@ -154,10 +224,7 @@ These new chart improvements include: ### {PackageGrids} (Data Grid) -* New Feature Added: -- [Row Paging](grids/data-grid/row-paging.md) - -Pagination is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. +Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. ### {PackageDockManager} (Dock Manager) @@ -268,7 +335,7 @@ This release introduces a few improvements and simplifications to visual design #### Charts & Maps -This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `DataChart`, `CategoryChart`, and `FinancialChart`. +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `XamDataChart`, `CategoryChart`, and `FinancialChart`. * Changed Bar/Column/Waterfall series to have square corners instead of rounded corners * Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 diff --git a/doc/en/components/general-changelog-dv-react.md b/doc/en/components/general-changelog-dv-react.md index 51ac65c9c..e62da127a 100644 --- a/doc/en/components/general-changelog-dv-react.md +++ b/doc/en/components/general-changelog-dv-react.md @@ -2,32 +2,96 @@ title: {Platform} What's New | {ProductName} | Infragistics _description: Learn about new features in the {ProductName}. _keywords: Changelog, What's New, {ProductName}, Infragistics -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Grid", "GridSelectionMode", DataGridCellEventArgs, DataGridSelectionMode, DataSourceSummaryOperand] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Grid", "GridSelectionMode", DataGridCellEventArgs, DataGridSelectionMode, DataSourceSummaryOperand, "XamRadialGauge", "XamRadialChart"] namespace: Infragistics.Controls.Charts --- # {ProductName} Changelog All notable changes for each version of {ProductName} are documented on this page. +## **{PackageVerChanges-23-2-MAR}** + +### {PackageCharts} + +- `XamRadialChart` + - New Label Mode + The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + +### {PackageGrids} + +- New [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) component + +### {PackageGauges} + +- `XamRadialGauge` + - New title/subtitle properties. `TitleText`, `SubtitleText` will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and `TitleExtent`. Finally, the new `TitleDisplaysValue` will allow the value to correspond with the needle's position. + - New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling) + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamLinearGauge` + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamBulletGraph` + - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. + +### {PackageCommon} + +- New `Textarea` component +- New `ButtonGroup` component +- `DockManager` + - New `ProximityDock` property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. + - New `ContainedInBoundaries` property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`. + - New `ShowPaneHeaders` property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`. +- `Input`, `MaskInput`, `DateTimeInput`, `Rating` + - `Readonly` has been renamed to `ReadOnly` +- `Input` + - `Maxlength` has been renamed to `MaxLength` + - `Minlength` has been renamed to `MinLength` +- `Tree` + - Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. +- `Rating` + - `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. +- `Select`, `Dropdown` + - exposed `selectedItem`, `items` and `groups` getters + + +#### Deprecations + +- The `Form` component has been deprecated. Please, use the native form element instead. +- The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the avatar component to small: + ```css + .avatar { + --ig-size: var(--ig-size-small); + } + ``` +- `DateTimeInput` + - `MinValue` and `MaxValue` properties have been deprecated. Please, use `Min` and `Max` instead. +- `RangeSlider` + - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use `ThumbLabelLower` and `ThumbLabelUpper` instead. + +#### Removed + +- Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change. +- `Slider` - `ariaLabel` shadowed property. This is a non-breaking change. +- `Checkbox` - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- `Switch` - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- `Radio` - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. + ## **{PackageVerChanges-23-2-JAN}** -### {PackageCharts} Charts +### {PackageCharts} (Charts) -* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `DataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `XamDataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. ## **{PackageVerChanges-23-2-DEC}** ### {PackageGrids} (Grid) -* New Features Added: - - [State Persistence](grids/grid/state-persistence.md) -## **{PackageVerChanges-23-2}** +* Added New Features - [State Persistence](grids/grid/state-persistence.md) -### New Components +## **{PackageVerChanges-23-2}** ### {PackageGrids} (Toolbar - Beta) -* A new tool has been added, as a default tool, to save the chart to an image via the clipboard. +* Save tool action has been added to save the chart to an image via the clipboard. * Vertical orientation has been added via the toolbar's `Orientation` property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. * Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. @@ -35,7 +99,7 @@ All notable changes for each version of {ProductName} are documented on this pag ### Deprecated Components -> [DataGrid](grids/data-grid/overview.md) - The DataGrid is deprecated, please refer to [Grid](grids/data-grid.md) +> [DataGrid](grids/data-grid/overview.md) - The DataGrid is deprecated, please use [Grid](grids/data-grid.md) ## **{PackageVerChanges-23-1}** @@ -43,7 +107,7 @@ All notable changes for each version of {ProductName} are documented on this pag * [Toolbar](menus/toolbar.md) - Beta. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our `XamDataChart` or `CategoryChart` components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. -### {PackageCharts} Charts +### {PackageCharts} (Charts) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the `ValueLayer` is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the `CategoryChart` and `FinancialChart` by adding to the new `ValueLines` collection. @@ -51,9 +115,7 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerChanges-22-2}** -Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. - -These new chart improvements include: +Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: * Responsive layouts for horizontal label rotation based on browser / screen size. * Enhanced rendering for rounded labels on all platforms. @@ -94,7 +156,7 @@ These new chart improvements include: * Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. * Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. * Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the `IsTransitionInEnabled` property to true. From there, you can set the `TransitionInDuration` property to determine how long your animation should take to complete and the `TransitionInMode` to determine the type of animation that takes place. -* Added `AssigningCategoryStyle` event, is now available to all series in `DataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. +* Added `AssigningCategoryStyle` event, is now available to all series in `XamDataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. * New `AllowedPositions` enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. * New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. - `CalloutCornerRadius` for CalloutLayer @@ -108,10 +170,7 @@ These new chart improvements include: ### {PackageGrids} (Data Grid) -* New Feature Added: -- [Row Paging](grids/data-grid/row-paging.md) - -Pagination is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. +Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. ## **{PackageVerChanges-21-2.1}** @@ -195,7 +254,7 @@ This release introduces a few improvements and simplifications to visual design ## **{PackageVerChanges-21-1}** ### {PackageCharts} (Charts) -This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `DataChart`, `CategoryChart`, and `FinancialChart`. +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `XamDataChart`, `CategoryChart`, and `FinancialChart`. * Changed Bar/Column/Waterfall series to have square corners instead of rounded corners * Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 diff --git a/doc/en/components/general-changelog-dv-wc.md b/doc/en/components/general-changelog-dv-wc.md index 70d51caa6..01cbf1b8c 100644 --- a/doc/en/components/general-changelog-dv-wc.md +++ b/doc/en/components/general-changelog-dv-wc.md @@ -2,30 +2,53 @@ title: {Platform} What's New | {ProductName} | Infragistics _description: Learn about new features in the {ProductName}. _keywords: Changelog, What's New, {ProductName}, Infragistics -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "XamRadialGauge", "XamRadialChart"] namespace: Infragistics.Controls.Charts --- # {ProductName} Changelog All notable changes for each version of {ProductName} are documented on this page. +## **{PackageVerChanges-23-2-MAR}** + +### {PackageCharts} + +- `XamRadialChart` + - New Label Mode + The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + +### {PackageGauges} + +- `XamRadialGauge` + - New title/subtitle properties. `TitleText`, `SubtitleText` will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and `TitleExtent`. Finally, the new `TitleDisplaysValue` will allow the value to correspond with the needle's position. + - New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling) + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamLinearGauge` + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamBulletGraph` + - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. + +### {PackageGrids} + +- New [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) component + ## **{PackageVerChanges-23-2-JAN}** -### {PackageCharts} Charts +### {PackageCharts} (Charts) -* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `DataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `XamDataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. ## **{PackageVerChanges-23-2-DEC}** ### {PackageGrids} (Grid) -* New Features Added: - - [State Persistence](grids/grid/state-persistence.md) + +* Added New Features - [State Persistence](grids/grid/state-persistence.md) ## **{PackageVerChanges-23-2}** ### {PackageGrids} (Toolbar - Beta) -* A new tool has been added, as a default tool, to save the chart to an image via the clipboard. +* Save tool action has been added to save the chart to an image via the clipboard. * Vertical orientation has been added via the toolbar's `Orientation` property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. * Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. @@ -35,7 +58,7 @@ All notable changes for each version of {ProductName} are documented on this pag * [Toolbar](menus/toolbar.md) - Beta. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our `XamDataChart` or `CategoryChart` components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. -### {PackageCharts} Charts +### {PackageCharts} (Charts) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the `ValueLayer` is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the `CategoryChart` and `FinancialChart` by adding to the new `ValueLines` collection. @@ -93,9 +116,7 @@ All notable changes for each version of {ProductName} are documented on this pag ### {PackageCharts} -Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. - -These new chart improvements include: +Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: * Responsive layouts for horizontal label rotation based on browser / screen size. * Enhanced rendering for rounded labels on all platforms. @@ -136,7 +157,7 @@ These new chart improvements include: * Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. * Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. * Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the `IsTransitionInEnabled` property to true. From there, you can set the `TransitionInDuration` property to determine how long your animation should take to complete and the `TransitionInMode` to determine the type of animation that takes place. -* Added `AssigningCategoryStyle` event, is now available to all series in `DataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. +* Added `AssigningCategoryStyle` event, is now available to all series in `XamDataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. * New `AllowedPositions` enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. * New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. - `CalloutCornerRadius` for CalloutLayer @@ -150,10 +171,7 @@ These new chart improvements include: ### {PackageGrids} (Data Grid) -* New Feature Added: -- [Row Paging](grids/data-grid/row-paging.md) - -Pagination is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. +Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. ### New Components @@ -300,7 +318,7 @@ This release introduces a few improvements and simplifications to visual design ## **{PackageVerChanges-21-1}** ### {PackageCharts} (Charts) -This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `DataChart`, `CategoryChart`, and `FinancialChart`. +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `XamDataChart`, `CategoryChart`, and `FinancialChart`. * Changed Bar/Column/Waterfall series to have square corners instead of rounded corners * Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 diff --git a/doc/en/components/general-changelog-dv.md b/doc/en/components/general-changelog-dv.md index bf4dce057..efa8200c1 100644 --- a/doc/en/components/general-changelog-dv.md +++ b/doc/en/components/general-changelog-dv.md @@ -2,7 +2,7 @@ title: {Platform} What's New | {ProductName} | Infragistics _description: Learn about new features in the {ProductName}. _keywords: Changelog, What's New, {ProductName}, Infragistics -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart"] namespace: Infragistics.Controls.Charts --- # {ProductName} Changelog @@ -15,17 +15,36 @@ All notable changes for each version of {ProductName} are documented on this pag * [Ignite UI for Angular Changelog at Github](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md) +## **{PackageVerChanges-23-2-MAR}** + +### {PackageCharts} + +- `XamRadialChart` + - New Label Mode + The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + +### {PackageGauges} + +- `XamRadialGauge` + - New title/subtitle properties. `TitleText`, `SubtitleText` will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and `TitleExtent`. Finally, the new `TitleDisplaysValue` will allow the value to correspond with the needle's position. + - New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling) + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamLinearGauge` + - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- `XamBulletGraph` + - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. + ## **{PackageVerChanges-23-2-JAN}** -### {PackageCharts} Charts +### {PackageCharts} (Charts) -* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `DataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `XamDataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. ## **{PackageVerChanges-23-2}** ### {PackageGrids} (Toolbar - Beta) -* A new tool has been added, as a default tool, to save the chart to an image via the clipboard. +* Save tool action has been added to save the chart to an image via the clipboard. * Vertical orientation has been added via the toolbar's `Orientation` property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. * Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. @@ -35,7 +54,7 @@ All notable changes for each version of {ProductName} are documented on this pag * [Toolbar](menus/toolbar.md) - Beta. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our `XamDataChart` or `CategoryChart` components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. -### {PackageCharts} Charts +### {PackageCharts} (Charts) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the `ValueLayer` is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the `CategoryChart` and `FinancialChart` by adding to the new `ValueLines` collection. @@ -49,9 +68,7 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerChanges-22-2}** -Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. - -These new chart improvements include: +Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: * Responsive layouts for horizontal label rotation based on browser / screen size. * Enhanced rendering for rounded labels on all platforms. @@ -85,7 +102,7 @@ The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not w * Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. * Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. * Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the `IsTransitionInEnabled` property to true. From there, you can set the `TransitionInDuration` property to determine how long your animation should take to complete and the `TransitionInMode` to determine the type of animation that takes place. -* Added `AssigningCategoryStyle` event, is now available to all series in `DataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. +* Added `AssigningCategoryStyle` event, is now available to all series in `XamDataChart`. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. * New `AllowedPositions` enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. * New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. - `CalloutCornerRadius` for CalloutLayer @@ -142,7 +159,7 @@ This release introduces a few improvements and simplifications to visual design ## **{PackageVerChanges-21-1}** ### {PackageCharts} (Charts) -This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `DataChart`, `CategoryChart`, and `FinancialChart`. +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `XamDataChart`, `CategoryChart`, and `FinancialChart`. * Changed Bar/Column/Waterfall series to have square corners instead of rounded corners * Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 diff --git a/doc/en/components/general-getting-started.md b/doc/en/components/general-getting-started.md index ddb1fa1b3..cdfaf0c35 100644 --- a/doc/en/components/general-getting-started.md +++ b/doc/en/components/general-getting-started.md @@ -43,16 +43,16 @@ With above prerequisites installed, we can create a new React application. 2 - Type one of these commands in terminal window: ```cmd -npx create-react-app my-app-name --typescript +npx create-react-app MyAppName --typescript ``` ```cmd -yarn create react-app my-app-name --typescript +yarn create react-app MyAppName --typescript ``` Depending on the approach `npx` or `yarn` will be required. Refer to this website for more information on above commands. ```cmd -cd my-app-name +cd MyAppName ``` @@ -63,37 +63,24 @@ cd my-app-name {ProductName} is a complete set of UI widgets, components, UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting the browsers web components APIs. ## Charts & Graphs -{ProductName} Charts & Graphs is a library that lets you visualize any type of data through its 65+ types of series and combinations into stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device. +{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations into stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device. ## Gauges -{ProductName} Gauges provides a radial and a linear gauge components used to illustrate data in an easy and intuitive way. -The radial gauge has a variety of customization options in order to create a predefined shape and scale. -The linear gauge provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. - -{ProductName} Gauges also includes a `XamBulletGraph` component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts. +{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](bullet-graph.md) component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts. ## Maps -{ProductName} Maps brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors. +{ProductName} [Geographic Maps](geo-map.md) brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors. ## Grids & Inputs -{ProductName} Grid is a grid component that allows you to bind and display data with little configuration. It also provides features such as filtering, sorting, grouping, pinning and more. - -## IgniteUI Web Components -{ProductName} is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)! - -All components are based on the [Indigo.Design Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma. +{ProductName} provides several [Grids](grids/grids-header.md) components that allows you to bind and display data with little configuration in form of [Data Grid](grids/data-grid.md), [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). It also provides features such as filtering, sorting, grouping, pinning and more. + +## Buttons, Inputs, Layouts & Menus +{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma. # Getting Started With {ProductName} -This topic provides step-by-step instructions for creating Web Components application with Ignite UI for Web Components. - -## Ignite UI Web Components Example - -`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} Overview Example"` - - +This section provides step-by-step instructions for creating Web Components application with Ignite UI for Web Components. -# Configuration ## Install IgniteUI CLI @@ -166,8 +153,9 @@ After the components are imported you can use them in your html: ``` -# Install Charts and Map Web Component packages -## Step 1 - Create the Web Component Project +## Install Charts and Map Packages + +### Step 1 - Create the Web Component Project 1 - Open a command line and create a directory named **wc-html** ```cmd @@ -233,7 +221,7 @@ code . }, ``` -## Step 2 - Install Polyfills +### Step 2 - Install Polyfills 1 - Open a terminal in **VS Code** (**View** -> **Terminal** menu or press CTRL + ` keys) @@ -249,7 +237,7 @@ import '@webcomponents/custom-elements/custom-elements.min'; import '@webcomponents/custom-elements/src/native-shim.js'; ``` -## Step 3 - Install Ignite UI for Web Components and lit-html +### Step 3 - Install Ignite UI for Web Components and lit-html 1 - Install the Ignite UI for Web Component using **npm**. In this example, we will install the Map web component: @@ -287,7 +275,7 @@ ModuleManager.register( ``` -## Step 4 - Build and Run the Web Component Project +### Step 4 - Build and Run the Web Component Project 1 - Open a terminal in **VS Code** and execute the **build** script @@ -316,9 +304,13 @@ npm run build > [!Note] > Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). -4 - Navigate to the **index.html** using a web browser on your local server, and the Ignite UI for Web Components map should now be rendered with shape of the world. +4 - Navigate to the **index.html** using a web browser on your local server. The final result should show interactive map of the world: + + + +`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} Overview Example"` + - @@ -418,11 +410,12 @@ Finally, we can run our new application by using one of the following commands: npm run-script start ``` -After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use {ProductName} components in your project. +After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use {ProductName} components in your project. The final result should show interactive map of the world: + + -The final result should look something like this screenshot: +`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} Overview Example"` - @@ -477,7 +470,7 @@ var app = builder.Build(); @using IgniteUI.Blazor.Controls ``` -3 - Add the Style Sheet in the **** element of the **Pages/_Layout.cshtml** file: +3a - Add the Style Sheet in the **** element of the **Pages/_Layout.cshtml** or **Pages/_Host.cshtml** file: ```razor @@ -485,7 +478,7 @@ var app = builder.Build(); ``` -4 - Add Script Reference to the **Pages/_Host.cshtml** file: +3b - Add Script References: ```razor @@ -510,7 +503,7 @@ public void ConfigureServices(IServiceCollection services) @using IgniteUI.Blazor.Controls ``` -3 - Add the Style Sheet in the **** element of the **Pages/_Host.cshtml** file: +3a - Add the Style Sheet in the **** element of the **Pages/_Host.cshtml** file: ```razor @@ -518,7 +511,7 @@ public void ConfigureServices(IServiceCollection services) ``` -4 - Add Script Reference to the **Pages/_Host.cshtml** file: +3b - Add Script Reference to the **Pages/_Host.cshtml** file: ```razor diff --git a/doc/en/components/geo-map-display-heat-imagery.md b/doc/en/components/geo-map-display-heat-imagery.md index a4c3105f3..22c626b44 100644 --- a/doc/en/components/geo-map-display-heat-imagery.md +++ b/doc/en/components/geo-map-display-heat-imagery.md @@ -2,11 +2,11 @@ title: {Platform} Map | Data Visualization Tools | Infragistics _description: Use Infragistics' {Platform} JavaScript map to display heat map imagery. Check out {ProductName} map demos! _keywords: {Platform} map, heat map imagery, {ProductName}, Infragistics -mentionedTypes: ['XamGeographicMap', 'ShapefileConverter'] +mentionedTypes: ['XamGeographicMap', 'ShapefileConverter', 'HeatTileGenerator', 'GeographicTileSeries'] --- # {Platform} Displaying Heat Imagery -The {ProductName} map control has the ability to show heat-map imagery through the use of the `ShapeFileRecords` that are generated by a `ShapefileConverter` by loading geo-spatial data by loading shape files to a tile series. +The {ProductName} map control has the ability to show heat-map imagery through the use of the `ShapeFileRecord` that are generated by a `ShapefileConverter` by loading geo-spatial data by loading shape files to a tile series. It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic. @@ -18,7 +18,7 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati
-When a `ShapefileConverter` loads its shape files, it converts that data into `ShapeFileRecord` objects. These objects can be retrieved from the `GetPointData()` method of the `ShapefileConverter` and can then be used to create a heat-map through usage of a `TileGeneratorMapImagery` object with a `HeatTileGenerator` assigned to its `TileGenerator` property. This `TileGeneratorMapImagery` can then be used in a geographic tile series as its `TileImagery` source. +When a `ShapefileConverter` loads its shape files, it converts that data into `ShapefileRecord` objects. These objects can be retrieved from the `GetPointData()` method of the `ShapefileConverter` and can then be used to create a heat-map through usage of a `TileGeneratorMapImagery` object with a `HeatTileGenerator` assigned to its `TileGenerator` property. This `TileGeneratorMapImagery` can then be used in a `GeographicTileSeries` as its `TileImagery` source. The `HeatTileGenerator` object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. @@ -343,12 +343,11 @@ public onDataLoaded(csvData: string) { ## API References - - `HeatTileGenerator` + - `GeographicTileSeries` - `HeatTileGenerator` - `MaximumColor` - `MinimumColor` - - `ShapeFileRecord` - - `ShapeFileRecords` + - `ShapefileRecord` - `ShapefileConverter` - `TileGeneratorMapImagery` - `TileGenerator` diff --git a/doc/en/components/grids/_shared/advanced-filtering.md b/doc/en/components/grids/_shared/advanced-filtering.md index 671f1df66..f33291016 100644 --- a/doc/en/components/grids/_shared/advanced-filtering.md +++ b/doc/en/components/grids/_shared/advanced-filtering.md @@ -39,68 +39,91 @@ To enable the advanced filtering, the `AllowAdvancedFiltering` input property sh ``` + + +```html + + + +``` +```ts +constructor() { + let grid = document.getElementById("grid") as IgcGridComponent; + grid.data = this.data +} +``` + +```tsx + + + +``` + ```razor <{ComponentSelector} Data=data AutoGenerate="true" AllowAdvancedFiltering="true"> ``` + -```razor - - - -``` - - - ```html -<{ComponentSelector} id="grid" auto-generate="true" allow-advanced-filtering="true"> + - + ``` ```ts constructor() { - let grid = (document.getElementById("grid") as IgcGridComponent); - grid.data = this.data + let treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent; + treeGrid.data = this.data } ``` - -```html - - - +```tsx + + + ``` +```razor + + + +``` + + +```html + + + +``` ```ts constructor() { - let grid = document.getElementById("grid") as IgcTreeGridComponent; - grid.data = this.data + let hierarchicalGrid = document.getElementById("hierarchicalGrid") as IgcHierarchicalGridComponent; + hierarchicalGrid.data = this.data } ``` - + - - -```html -<{ComponentSelector} data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowAdvancedFiltering="true"> - - - - - - + + +```razor + + + ``` - + + + ```tsx -<{ComponentSelector} data={nwindData} autoGenerate="false" ref={gridRef} allowAdvancedFiltering="true"> + - + ``` + The advanced filtering generates a `FilteringExpressionsTree` which is stored in the `AdvancedFilteringExpressionsTree` input property. You could use the `AdvancedFilteringExpressionsTree` property to set an initial state of the advanced filtering. @@ -543,27 +566,22 @@ Don't forget to include the themes in the same way as it was demonstrated above. In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming.md). In case you would like to change some of the colors, you need to set a class for the grid first: + ```html - -``` - -```razor - +<{ComponentSelector} class="grid"> ``` + - - - -```html - + +```tsx +<{ComponentSelector} className="grid"> ``` + ```razor - +<{ComponentSelector} class="grid"> ``` - - Then set the related CSS properties to this class: ```css diff --git a/doc/en/components/grids/_shared/cell-editing.md b/doc/en/components/grids/_shared/cell-editing.md index e9fbe6b23..5e16e8c52 100644 --- a/doc/en/components/grids/_shared/cell-editing.md +++ b/doc/en/components/grids/_shared/cell-editing.md @@ -84,7 +84,9 @@ public updateCell() { ``` ```razor -this.treeGrid.UpdateCell(newValue, rowID, 'ReorderLevel') +@code { + this.treeGrid.UpdateCell(newValue, rowID, 'ReorderLevel'); +} ``` @@ -96,7 +98,9 @@ public updateCell() { ``` ```razor -this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel') +@code { + this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel'); +} ``` @@ -116,9 +120,11 @@ public updateCell() { ```razor -private UpdateCell() { - IgbCell cell = this.grid1.GetCellByColumn(rowIndex, "ReorderLevel"); - cell.Update(70); +@code { + private UpdateCell() { + IgbCell cell = this.grid1.GetCellByColumn(rowIndex, "ReorderLevel"); + cell.Update(70); + } } ``` @@ -145,9 +151,11 @@ public updateCell() { ``` ```razor -private UpdateCell() { - IgbCell cell = this.treeGrid.GetCellByColumn(rowIndex, "Age"); - cell.Update(9999); +@code { + private UpdateCell() { + IgbCell cell = this.treeGrid.GetCellByColumn(rowIndex, "Age"); + cell.Update(9999); + } } ``` @@ -163,9 +171,11 @@ public updateCell() { ``` ```razor -private UpdateCell() { - IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel"); - cell.Update(70); +@code { + private UpdateCell() { + IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel"); + cell.Update(70); + } } ``` @@ -232,6 +242,8 @@ This code is used in the sample below which implements an [SelectComponent](../s If you want to provide a custom template which will be applied to a cell, you can pass such template either to the cell itself, or to its header. First create the column as you usually would: + + @@ -252,7 +264,7 @@ If you want to provide a custom template which will be applied to a cell, you ca @@ -260,6 +272,19 @@ If you want to provide a custom template which will be applied to a cell, you ca ``` + +```razor + + +``` + + and pass the template: ```razor @@ -294,7 +319,6 @@ igRegisterScript("WebGridCellEditCellTemplate", (ctx) => { field="Race" data-type="string" editable="true" - name="column1" id="column1"> ``` @@ -342,73 +366,88 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { field="Category" data-type="string" editable="true" - name="column1" id="column1"> ``` and pass the templates to this column in the index.ts file: -```typescript +```ts + constructor() { - var treeGrid = document.getElementById('treeGrid') as {ComponentName}Component; + var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent; var column1 = document.getElementById('column1') as IgcColumnComponent; - treeGrid.data = this.ordersTreeData; - column1.inlineEditorTemplate = this.webTreeGridCellEditCellTemplate; + treeGrid.data = this.webGridCellEditSampleRoleplay; + column1.inlineEditorTemplate = this.webGridCellEditCellTemplate; + column2.inlineEditorTemplate = this.webGridCellEditCellTemplate; + column3.inlineEditorTemplate = this.webGridCellEditCellTemplate; } +public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { + let cellValues: any = []; + let uniqueValues: any = []; + for(const i of (this.webGridCellEditSampleRoleplay as any)){ + const field: string = ctx.cell.column.field; + if(uniqueValues.indexOf(i[field]) === -1 ) + { + cellValues.push(html`${(i[field])}`); + uniqueValues.push(i[field]); + } + } + return html` + ctx.cell.editValue = e.detail.value}> + ${cellValues} + + `; +} ``` + + + +```html + + +``` + +and pass the templates to this column in the index.ts file: - ```ts constructor() { - var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent; - var column1 = document.getElementById('column1') as IgcColumnComponent; - var column2 = document.getElementById('column2') as IgcColumnComponent; - var column3 = document.getElementById('column3') as IgcColumnComponent; - - treeGrid.data = this.webGridCellEditSampleRoleplay; - column1.inlineEditorTemplate = this.webGridCellEditCellTemplate; - column2.inlineEditorTemplate = this.webGridCellEditCellTemplate; - column3.inlineEditorTemplate = this.webGridCellEditCellTemplate; -} - -private _webGridCellEditSampleRoleplay: WebGridCellEditSampleRoleplay = null; -public get webGridCellEditSampleRoleplay(): WebGridCellEditSampleRoleplay { - if (this._webGridCellEditSampleRoleplay == null) - { - this._webGridCellEditSampleRoleplay = new WebGridCellEditSampleRoleplay(); - } + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent; + var column1 = document.getElementById('column1') as IgcColumnComponent; - return this._webGridCellEditSampleRoleplay; + hierarchicalGrid.data = this.singersData; + column1.inlineEditorTemplate = this.webGridCellEditCellTemplate; } public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { - let cellValues: any = []; - let uniqueValues: any = []; - for(const i of (this.webGridCellEditSampleRoleplay as any)){ - const field: string = ctx.cell.column.field; - if(uniqueValues.indexOf(i[field]) === -1 ) - { - cellValues.push(html`${(i[field])}`); - uniqueValues.push(i[field]); - } + let cellValues: any = []; + let uniqueValues: any = []; + for(const i of (this.singersData as any)){ + const field: string = ctx.cell.column.field; + if(uniqueValues.indexOf(i[field]) === -1 ) + { + cellValues.push(html`${(i[field])}`); + uniqueValues.push(i[field]); } - return html` - ctx.cell.editValue = e.detail.value}> - ${cellValues} - - `; + } + return html` + ctx.cell.editValue = e.detail.value}> + ${cellValues} + + `; } ``` - + - - If you want to provide a custom template which will be applied to a cell, you can pass such template either to the cell itself, or to its header. First create the column as you usually would: @@ -448,13 +487,9 @@ const webGridCellEditCellTemplate = useCallback((ctx: IgrCellTemplateContext) => useEffect(() => { const column1 = grid1Ref.current.getColumnByName('column1'); - const column2 = grid1Ref.current.getColumnByName('column2'); - const column3 = grid1Ref.current.getColumnByName('column3'); grid1Ref.current.data = webGridCellEditSampleRoleplay; column1.inlineEditorTemplate = webGridCellEditCellTemplate; - column2.inlineEditorTemplate = webGridCellEditCellTemplate; - column3.inlineEditorTemplate = webGridCellEditCellTemplate; }, [webGridCellEditSampleRoleplay, webGridCellEditCellTemplate]); @@ -621,9 +656,11 @@ this.grid.addRow(record); ```razor -//Assuming we have a `GetNewRecord` method returning the new row data. -const record = this.GetNewRecord(); -this.GridRef.AddRow(record); +@code { + //Assuming we have a `GetNewRecord` method returning the new row data. + const record = this.GetNewRecord(); + this.GridRef.AddRow(record); +} ``` @@ -661,7 +698,14 @@ public addRow() { // Adding a new record // Assuming we have a `getNewRecord` method returning the new row data const record = this.getNewRecord(); - this.hierarchicalGrid.addRow(record, 1); + this.hierarchicalGrid.addRow(record); +} +``` +```razor +@code { + //Assuming we have a `GetNewRecord` method returning the new row data. + const record = this.GetNewRecord(); + this.HierarchicalGridRef.AddRow(record); } ``` @@ -708,18 +752,20 @@ row.update(newData); ```razor -// Updating the whole row -this.grid.UpdateRow(newData, this.selectedCell.cellID.rowID); +@code { + // Updating the whole row + this.grid.UpdateRow(newData, this.selectedCell.cellID.rowID); -// Just a particular cell through the Grid API -this.grid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); + // Just a particular cell through the Grid API + this.grid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); -// Directly using the cell `update` method -this.selectedCell.Update(newData); + // Directly using the cell `update` method + this.selectedCell.Update(newData); -// Directly using the row `update` method -const row = this.grid.GetRowByKey(rowID); -row.Update(newData); + // Directly using the row `update` method + IgbRowType row = this.grid.GetRowByKey(rowID); + row.Update(newData); +} ``` @@ -740,18 +786,20 @@ row.update(newData); ``` ```razor -// Updating the whole row -this.treeGrid.UpdateRow(newData, this.selectedCell.cellID.rowID); +@code { + // Updating the whole row + this.treeGrid.UpdateRow(newData, this.selectedCell.cellID.rowID); -// Just a particular cell through the Tree Grid API -this.treeGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); + // Just a particular cell through the Tree Grid API + this.treeGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); -// Directly using the cell `update` method -this.selectedCell.Update(newData); + // Directly using the cell `update` method + this.selectedCell.Update(newData); -// Directly using the row `update` method -const row = this.treeGrid.GetRowByKey(rowID); -row.Update(newData); + // Directly using the row `update` method + IgbRowType row = this.treeGrid.GetRowByKey(rowID); + row.Update(newData); +} ``` @@ -771,6 +819,23 @@ this.selectedCell.update(newData); const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` + +```razor +@code { + // Updating the whole row + this.hierarchicalGrid.UpdateRow(newData, this.selectedCell.cellID.rowID); + + // Just a particular cell through the Tree Grid API + this.hierarchicalGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); + + // Directly using the cell `update` method + this.selectedCell.Update(newData); + + // Directly using the row `update` method + IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID); + row.Update(newData); +} +``` ### Deleting data from the {ComponentTitle} @@ -795,16 +860,18 @@ row.delete(); grid1Ref.current.deleteRow(selectedCell.cellID.rowID); // Delete row through row object const row = grid1Ref.current.getRowByIndex(rowIndex); -row.delete(); +row.del(); ``` ```razor -// Delete row through Grid API -this.grid.DeleteRow(this.selectedCell.cellID.rowID); -// Delete row through row object -const row = this.grid.GetRowByIndex(rowIndex); -row.Delete(); +@code { + // Delete row through Grid API + this.grid.DeleteRow(this.selectedCell.cellID.rowID); + // Delete row through row object + IgbRowType row = this.grid.GetRowByIndex(rowIndex); + row.Del(); +} ``` @@ -819,15 +886,18 @@ row.delete(); ``` ```razor -// Delete row through Tree Grid API -this.treeGrid.DeleteRow(this.selectedCell.cellID.rowID); -// Delete row through row object -const row = this.treeGrid.GetRowByIndex(rowIndex); -row.Delete(); +@code { + // Delete row through Tree Grid API + this.treeGrid.DeleteRow(this.selectedCell.cellID.rowID); + // Delete row through row object + IgbRowType row = this.treeGrid.GetRowByIndex(rowIndex); + row.Del(); +} ``` + ```typescript // Delete row through Grid API this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); @@ -835,6 +905,27 @@ this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); const row = this.hierarchicalGrid.getRowByIndex(rowIndex); row.delete(); ``` + + + +```typescript +// Delete row through Grid API +this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); +// Delete row through row object +const row = this.hierarchicalGrid.getRowByIndex(rowIndex); +row.del(); +``` + + +```razor +@code { + // Delete row through Grid API + this.hierarchicalGrid.DeleteRow(this.selectedCell.cellID.rowID); + // Delete row through row object + IgbRowType row = this.hierarchicalGrid.GetRowByIndex(rowIndex); + row.Del(); +} +``` These can be wired to user interactions, not necessarily related to the `{ComponentName}` for example, a button click: @@ -902,6 +993,7 @@ constructor() { ```ts constructor() { var hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent; + this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this); hGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit); } ``` @@ -1039,31 +1131,68 @@ Here, we are validating two columns. If the user tries to set an invalid value f ```typescript -export class MyHGridEventsComponent { - public handleCellEdit(event: IGridEditEventArgs) { - const today = new Date(); - const column = event.column; - if (column.field === 'Debut') { - if (event.newValue > today.getFullYear()) { - this.toast.message = 'The debut date must be in the past!'; - this.toast.open(); - event.cancel = true; - } - } else if (column.field === 'LaunchDate') { - if (event.newValue > new Date()) { - this.toast.message = 'The launch date must be in the past!'; - this.toast.open(); - event.cancel = true; - } +public webHierarchicalGridCellEdit(event: CustomEvent): void { + const today = new Date(); + const column = event.detail.column; + if (column.field === 'Debut') { + if (event.detail.newValue > today.getFullYear()) { + event.detail.cancel = true; + alert('The debut date must be in the past!'); + } + } else if (column.field === 'LaunchDate') { + if (event.detail.newValue > today) { + event.detail.cancel = true; + alert('The launch date must be in the past!'); } } } ``` +```razor +*** In JavaScript *** +igRegisterScript("HandleCellEdit", (ev) => { + const today = new Date(); + const column = event.detail.column; + if (column.field === 'Debut') { + if (event.detail.newValue > today.getFullYear()) { + event.detail.cancel = true; + alert('The debut date must be in the past!'); + } + } else if (column.field === 'LaunchDate') { + if (event.detail.newValue > today) { + event.detail.cancel = true; + alert('The launch date must be in the past!'); + } + } +}, 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. + + +```tsx +public handleCellEdit(sender: IgrHierarchicalGrid, event: IgrGridEditEventArgs): void { + const today = new Date(); + const column = event.detail.column; + if (column.field === 'Debut') { + if (event.detail.newValue > today.getFullYear()) { + event.detail.cancel = true; + alert('The debut date must be in the past!'); + } + } else if (column.field === 'LaunchDate') { + if (event.detail.newValue > today) { + event.detail.cancel = true; + alert('The launch date must be in the past!'); + } + } +} +``` + + + The result of the above validation being applied to our `{ComponentName}` can be seen in the below demo: `sample="/{ComponentSample}/editing-events", height="650", alt="{Platform} {ComponentTitle} Editing Event Example"` @@ -1107,6 +1236,10 @@ Then set the related CSS properties for that class: ``` +```tsx + +``` + Then set the related CSS properties for that class: ```css @@ -1117,6 +1250,29 @@ Then set the related CSS properties for that class: ``` + +```html + +``` + +```razor + +``` + +```tsx + +``` + +Then set the related CSS properties for that class: + +```css +.hierarchicalGrid { + --ig-grid-edit-mode-color: orange; + --ig-grid-cell-editing-background: lightblue; +} +``` + + ### Styling Example `sample="/{ComponentSample}/cell-editing-styling", height="650", alt="{Platform} {ComponentTitle} Cell Editing Styling Example"` diff --git a/doc/en/components/grids/_shared/cell-selection.md b/doc/en/components/grids/_shared/cell-selection.md index 35ce4c5e4..c9b55c2f6 100644 --- a/doc/en/components/grids/_shared/cell-selection.md +++ b/doc/en/components/grids/_shared/cell-selection.md @@ -7,7 +7,7 @@ sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"] namespace: Infragistics.Controls --- -# {Platform} Cell Selection +# {Platform} {ComponentTitle} Cell Selection The {ProductName} Cell Selection in {Platform} {ComponentTitle} enables rich data select capabilities and offers powerful API in the `{ComponentName}` component. The {Platform} {ComponentTitle} supports three selection modes: @@ -21,7 +21,7 @@ In the `{ComponentName}` you can specify the cell selection mode on grid level. Let's dive deeper into each of these options. -## {Platform} Cell Selection Example +## {Platform} {ComponentTitle} Cell Selection Example The sample below demonstrates the three types of `{ComponentName}`'s **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. @@ -93,7 +93,7 @@ If you want to disable cell selection you can just set `CellSelection` to **none Below are the methods that you can use in order to select ranges, clear selection or get selected cells data. - + ### Select range @@ -111,7 +111,29 @@ const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; gridRef.current.selectRange(range); ``` - + + +```razor +<{ComponentSelector} @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true> + +@code { + private {ComponentSelector} grid; + + private async void SetSelection() + { + IgbGridSelectionRange selectionRange = new IgbGridSelectionRange(); + selectionRange.ColumnStart = 1; + selectionRange.ColumnEnd = 1; + selectionRange.RowStart = 2; + selectionRange.RowEnd = 2; + + this.grid.SelectRange(new IgbGridSelectionRange[] {}); + } +} +``` + + + ### Clear cell selection @@ -144,10 +166,10 @@ gridRef.current.clearCellSelection(); `GetSelectedData` will return array of the selected data in Dictionary format. Examples below: ```razor - +<{ComponentSelector} @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true> @code { - private IgbGrid grid; + private {ComponentSelector} grid; private async void GetSelectedData() { @@ -300,6 +322,35 @@ Then set the related CSS properties for that class: + + + +```ts + +``` + + +```tsx + +``` + +```razor + +``` + +Then set the related CSS properties for that class: + +```css +.hGrid { + --ig-grid-cell-selected-text-color: #fff; + --ig-grid-cell-active-border-color: #f2c43c; + --ig-grid-cell-selected-background: #0062a3; + --ig-grid-cell-editing-background: #0062a3; +} +``` + + + ### Demo `sample="/{ComponentSample}/cell-selection-style", height="620", alt="{Platform} {ComponentTitle} Cell Selection Styling Example"` @@ -384,7 +435,7 @@ With the custom theme applied, the selected grid cells are highlighted with our ## Additional Resources - + * [Selection](selection.md) * [Row Selection](row-selection.md) * [Filtering](filtering.md) diff --git a/doc/en/components/grids/_shared/collapsible-column-groups.md b/doc/en/components/grids/_shared/collapsible-column-groups.md index 49dce41e5..7209d1ddc 100644 --- a/doc/en/components/grids/_shared/collapsible-column-groups.md +++ b/doc/en/components/grids/_shared/collapsible-column-groups.md @@ -214,12 +214,21 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => { ``` ```tsx - function collapsibleIndicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) { + + + + + + + + + +function indicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) { return (
- +
) - } +} ``` diff --git a/doc/en/components/grids/_shared/column-hiding.md b/doc/en/components/grids/_shared/column-hiding.md index 90fb6256f..932d991a0 100644 --- a/doc/en/components/grids/_shared/column-hiding.md +++ b/doc/en/components/grids/_shared/column-hiding.md @@ -25,6 +25,7 @@ The {ProductName} has a built-in column hiding UI, which can be used through the Let's start by creating our `{ComponentName}` and binding it to our data. We will also enable both filtering and sorting for the columns. + ```html @@ -84,6 +85,53 @@ Let's start by creating our `{ComponentName}` and binding it to our data. We wil ``` + + + +```html + + + + + + + +``` + +```html + + + + + + + +``` + +```tsx + + + + + + + +``` + + + + +```razor +<{ComponentSelector} AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1"> + + + + + + +``` + + ## Toolbar's Column Hiding UI @@ -91,6 +139,7 @@ The built-in Column Hiding UI is placed inside an `DropDown` in the `{ComponentN For this purpose all we have to do is set both the `GridToolbarActions` and the `GridToolbarHiding` inside of the `{ComponentName}`. We will also add a title to our toolbar by using the `GridToolbarTitle` and a custom style for our {ComponentTitle}'s wrapper. + ```html @@ -130,11 +179,70 @@ For this purpose all we have to do is set both the `GridToolbarActions` and the ``` + + + + +```html + + + + + + + +``` + + + + + +```html + + + + + + + +``` + + + + + +```razor +<{ComponentSelector} Data="SingersData"> + + + + + + + +``` + + + + + +```tsx + + + + + + + +``` + + The `{ComponentName}` provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the `Title` property, we will set the title that is displayed inside the dropdown button in the toolbar. + ```html @@ -174,6 +282,63 @@ By using the `Title` property, we will set the title that is displayed inside th ``` + + + + +```html + + + + + + + +``` + + + + + +```razor +<{ComponentSelector} Data=SingersData> + + + + + + +``` + + + + + +```html + + + + + + + +``` + + + + + +```tsx + + + + + + + +``` + + @@ -331,9 +496,11 @@ Now all we have to do is bind the `Checked` property of both radio buttons respe ``` + ### Disable hiding of a column We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their `DisableHiding` property to true. + ```html @@ -361,6 +528,53 @@ We can easily prevent the user from being able to hide columns through the colum ``` + + + +```html + + + + + + + + +``` + +```html + + + + + + + + +``` + +```tsx + + + + + + + + +``` + +```razor +<{ComponentSelector}> + + + + + + + +``` + If all went well, this is how our column hiding UI component should look like: @@ -518,6 +732,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. The grid could be further customized by setting some of the available [CSS variables](../theming.md). In order to achieve that, we will use a class that we will first assign to the grid: + ```html <{ComponentSelector} class="grid"> ``` @@ -529,9 +744,25 @@ In order to achieve that, we will use a class that we will first assign to the g ```tsx <{ComponentSelector} className="grid"> ``` + + + +```html +<{ComponentSelector} class="hierarchical-grid"> +``` + +```razor +<{ComponentSelector} class="hierarchical-grid"> +``` + +```tsx +<{ComponentSelector} className="hierarchical-grid"> +``` + Then set the related CSS variables for the related components. We will apply the styles also only on the `igx-column-actions`, so the rest of the grid is unaffected: + ```css .grid igx-column-actions { /* Main Column Actions styles */ @@ -563,6 +794,41 @@ Then set the related CSS variables for the related components. We will apply the --ig-button-disabled-foreground: #ffcd0f; } ``` + + + +```css +#hierarchicalGrid { + /* Main Column Actions styles */ + --ig-column-actions-background-color: #292826; + --ig-column-actions-title-color: #ffcd0f; + + /* Checkbox styles */ + --ig-checkbox-tick-color: #292826; + --ig-checkbox-label-color: #ffcd0f; + --ig-checkbox-empty-color: #ffcd0f; + --ig-checkbox-fill-color: #ffcd0f; + + /* Input styles */ + --ig-input-group-idle-text-color: white; + --ig-input-group-filled-text-color: #ffcd0f; + --ig-input-group-focused-text-color: #ffcd0f; + --ig-input-group-focused-border-color: #ffcd0f; + --ig-input-group-focused-secondary-color: #ffcd0f; + + /* Buttons styles */ + --ig-button-foreground: #292826; + --ig-button-background: #ffcd0f; + --ig-button-hover-background: #404040; + --ig-button-hover-foreground: #ffcd0f; + --ig-button-focus-background: #ffcd0f; + --ig-button-focus-foreground: black; + --ig-button-focus-visible-background: #ffcd0f; + --ig-button-focus-visible-foreground: black; + --ig-button-disabled-foreground: #ffcd0f; +} +``` + ### Demo @@ -580,14 +846,14 @@ Additional components and/or directives with relative APIs that were used: * `ColumnActionsComponent` - + In this article we learned how to use the built-in column hiding UI in the `{ComponentName}`'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. * `ColumnActionsComponent` Additional components with relative APIs that were used: - + `Column` properties: * `DisableHiding` diff --git a/doc/en/components/grids/_shared/column-moving.md b/doc/en/components/grids/_shared/column-moving.md index ea635f32e..2ef1f02c1 100644 --- a/doc/en/components/grids/_shared/column-moving.md +++ b/doc/en/components/grids/_shared/column-moving.md @@ -64,6 +64,7 @@ function headerTemplate(ctx: IgrCellTemplateContext) { ## Overview **Column moving** feature is enabled on a per-grid level, meaning that the `{ComponentName}` could have either movable or immovable columns. This is done via the `Moving` input of the `{ComponentName}`. + ```html @@ -87,6 +88,45 @@ function headerTemplate(ctx: IgrCellTemplateContext) { ``` + + + + + +```html +<{ComponentSelector} [moving]="true"> + ... + <{RowIslandSelector} [moving]="true"> + +``` + + +```razor +<{ComponentSelector} Moving=true> + ... + <{RowIslandSelector} Moving=true> + +``` + + +```html +<{ComponentSelector} moving="true"> + ... + <{RowIslandSelector} moving="true"> + +``` + + + +```tsx +<{ComponentSelector} moving="true"> + ... + <{RowIslandSelector} moving="true"> + +``` + + + ## API In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: @@ -169,6 +209,7 @@ public onColumnMovingEnd(event) { ``` + ```tsx function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEventArgs) { if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") { @@ -181,6 +222,8 @@ function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEve ``` + + ```razor <{ComponentSelector} ShowGroupArea="true" @ref='Grid' Width="100%" Height="100%" AllowFiltering=true diff --git a/doc/en/components/grids/_shared/column-resizing.md b/doc/en/components/grids/_shared/column-resizing.md index bb8fe94bd..7d6da03a5 100644 --- a/doc/en/components/grids/_shared/column-resizing.md +++ b/doc/en/components/grids/_shared/column-resizing.md @@ -181,18 +181,21 @@ public onResize(event) { + ```html - - + ``` + + ```html - - + ``` ```ts @@ -201,18 +204,40 @@ constructor() { hierarchicalGrid.data = this.data; hierarchicalGrid.columnResized = this.onResize; } -``` -```typescript public onResize(event) { this.col = event.column; this.pWidth = event.prevWidth; this.nWidth = event.newWidth; } ``` + + +```tsx +function onResize(grid: IgrGridBaseDirective, event: IgrColumnMovingEventArgs) { + IgrColumn col = event.detail.column; + string pWidth = event.detail.prevWidth; + string nWidth = event.detail.newWidth; +} + +<{ComponentSelector} id="hierarchicalGrid" autoGenerate="false" columnResized={onResize}> + + +``` ```razor -TO DO! +<{ComponentSelector} Data=data AutoGenerate=false ColumnResized="onResize"> + + + +@code { + private void onResize(IgbColumnResizeEventArgs args) + { + IgbColumnType col = args.Detail.Column; + string pWidth = args.Detail.PrevWidth; + string nWidth = args.Detail.NewWidth; + } +} ``` @@ -250,7 +275,7 @@ This means that the following configuration is possible: ``` ```tsx - + @@ -306,7 +331,20 @@ This means that the following configuration is possible: ``` ```razor -TO DO! +<{ComponentSelector} Data=data ColumnResized="onResize" AutoGenerate=false Height="600px" Width="100%"> + + + + +``` + +```tsx +<{ComponentSelector} id="hierarchicalGrid" columnResized={onResize} autoGenerate="false" + height="600px" width="100%"> + + + + ``` @@ -326,6 +364,8 @@ When resizing columns with width in percentages, the horizontal amount of the mo You can also configure the minimum and maximum allowable column widths. This is done via the `MinWidth` and `MaxWidth` inputs of the `Column`. In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by `MinWidth` and `MaxWidth`. + + ```html @@ -337,17 +377,43 @@ You can also configure the minimum and maximum allowable column widths. This is ```tsx + minWidth="60px" maxWidth="230px"> ``` ```razor ``` + + + +```html + +``` + +```html + +``` + +```tsx + +``` + +```razor + +``` + + + Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels. This means the following configurations are possible: + + ```html @@ -359,15 +425,41 @@ This means the following configurations are possible: ```tsx + minWidth="60px" maxWidth="230px"> ``` ```razor ``` + + + +```html + +``` + +```html + +``` + +```tsx + +``` + +```razor + +``` + + + or + + ```html @@ -379,19 +471,45 @@ or ```tsx + minWidth="5%" maxWidth="15%"> ``` ```razor ``` + + + +```html + +``` + +```html + +``` + +```tsx + +``` + +```razor + +``` + + + ## Auto-Size Columns on Double Click Each column can be **auto sized** by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case `MaxWidth` is set on that column and the new width exceeds that `MaxWidth` value. In this case the column will be sized according to preset `MaxWidth` value. You can also auto-size a column dynamically using the exposed `Autosize` method on `Column`. + + ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: {ComponentName}; @@ -417,7 +535,7 @@ constructor() { @code { private {ComponentSelector} gridRef; - protected void OnInitialize() + private void AutosizeColumn() { IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "ID"; }).FirstOrDefault(); column.Autosize(false); @@ -425,6 +543,44 @@ constructor() { } ``` + + + + +```typescript +@ViewChild('@@igObjectRef') @@igObjectRef: {ComponentName}; + +let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0]; +column.autosize(); +``` + + +```typescript +constructor() { + var column = this.column = document.getElementById('Artist') as IgcColumnComponent; + column.autosize(); +} +``` + +```tsx +const column = grid.getColumnByName('Artist'); +column.autosize(); +``` + +```razor +@code { + private {ComponentSelector} gridRef; + + private void AutosizeColumn() + { + IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "Artist"; }).FirstOrDefault(); + column.Autosize(false); + } +} +``` + + + ## Auto-Size Columns on Initialization Each column can be set to auto-size on initialization by setting `Width` to 'auto': diff --git a/doc/en/components/grids/_shared/column-types.md b/doc/en/components/grids/_shared/column-types.md index 685823913..5fae37101 100644 --- a/doc/en/components/grids/_shared/column-types.md +++ b/doc/en/components/grids/_shared/column-types.md @@ -67,15 +67,10 @@ public formatOptions = this.options; ``` ```ts -private _formatOptions: any | null = null; public get formatOptions(): any { - if (this._formatOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs.digitsInfo = "1.4-4"; - this._formatOptions = columnPipeArgs; - } - return this._formatOptions; + return { + digitsInfo: "1.4-4" + }; } constructor() { @@ -138,16 +133,11 @@ public formatOptions = this.options; ``` ```ts -private _formatDateOptions: any | null = null; public get formatDateOptions(): any { - if (this._formatDateOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs2.format = "long"; - columnPipeArgs2.timezone = "UTC+0"; - this._formatDateOptions = columnPipeArgs; - } - return this._formatDateOptions; + return { + format: "long", + timezone: "UTC+0" + }; } constructor() { @@ -286,9 +276,7 @@ Default template is using the value coming from the data as an image source to a ``` ```tsx - - - + ``` When `AutoGenerate` is used for the columns, the grid analyses the values in the first data record. If a value is of type string and matches the pattern of a url ending in an image extension (gif, jpg, jpeg, tiff, png, webp, bmp) then the column will automatically be marked as `dataType === GridColumnDataType.Image` and a default image template will be rendered. @@ -367,17 +355,12 @@ public formatOptions = this.options; ``` ```ts -private _formatOptions: any | null = null; - public get formatOptions(): any { - if (this._formatOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs.digitsInfo = "1.4-4"; - columnPipeArgs.display = "symbol-narrow"; - this._formatOptions = columnPipeArgs; - } - return this._formatOptions; - } +public get formatOptions(): any { + return { + digitsInfo: '3.4-4', + display: 'symbol-narrow' + }; +} constructor() { var column = document.getElementById('column') as IgcColumnComponent; @@ -465,16 +448,18 @@ public formatPercentOptions = this.options; ``` ```ts -private _formatPercentOptions: any | null = null; - public get formatPercentOptions(): any { - if (this._formatPercentOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs.digitsInfo = "2.2-3"; - this._formatPercentOptions = columnPipeArgs; - } - return this._formatPercentOptions; - } +public get formatPercentOptions(): any { + return { + /** + * Decimal representation options, specified by a string in the following format: + * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. + * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. + * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + */ + digitsInfo: '2.2-3' + }; +} constructor() { var column = document.getElementById('column') as IgcColumnComponent; @@ -483,6 +468,13 @@ constructor() { ``` ```tsx +/** +* Decimal representation options, specified by a string in the following format: +* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. +* `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. +* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. +* `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. +*/ const formatOptions = new IgrColumnPipeArgs(); formatOptions.digitsInfo = "2.2-3"; @@ -501,22 +493,23 @@ See the editing templates part of [{ComponentTitle} Editing topic](editing.md#ed Custom template and column formatter definition will always take precedence over the column data type set: ### Custom Template - + ```html - +<{ComponentSelector} #grid1 [data]="data | async" [autoGenerate]="false"> {{ value | currency:'USD':'symbol':'1.0-0'}} - + ``` + ```html - +<{ComponentSelector} id="grid1" auto-generate="false"> - + ``` ```ts @@ -539,9 +532,9 @@ function editCellTemplate(ctx: IgrCellTemplateContext) { ); } - +<{ComponentSelector} autoGenerate="false"> - + ``` ```razor @@ -560,10 +553,10 @@ function editCellTemplate(ctx: IgrCellTemplateContext) { ### Column Formatter ```html - +<{ComponentSelector} id="grid1" auto-generate="false"> - + ``` ```ts @@ -582,9 +575,9 @@ function formatCurrency(value: number) { return `$ ${value.toFixed(0)}`; } - +<{ComponentSelector} autoGenerate="false"> - + ``` ```razor diff --git a/doc/en/components/grids/_shared/conditional-cell-styling.md b/doc/en/components/grids/_shared/conditional-cell-styling.md index dc9f71d08..115e3fd17 100644 --- a/doc/en/components/grids/_shared/conditional-cell-styling.md +++ b/doc/en/components/grids/_shared/conditional-cell-styling.md @@ -32,8 +32,8 @@ You can conditionally style the `{ComponentName}` rows by setting the `RowClasse ```razor - - +<{ComponentSelector} AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid"> + ``` @@ -44,7 +44,7 @@ You can conditionally style the `{ComponentName}` rows by setting the `RowClasse ```ts constructor() { - var grid = this.grid = document.getElementById('grid') as IgcGridComponent; + var grid = this.grid = document.getElementById('grid') as {ComponentName}; grid.rowClasses = this.rowClasses; } ``` @@ -252,7 +252,18 @@ public childRowStyles = { ``` ```razor -Add Hierarchical styles +igRegisterScript("WebGridRowStylesHandler", () => { + return { + background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb', + 'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null + }; +}, true); + +igRegisterScript("WebGridChildRowStylesHandler", () => { + return { + 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null + }; +}, true); ``` ```html @@ -264,13 +275,17 @@ Add Hierarchical styles ``` ```razor -Add Hierarchical markup + + + + ``` ```html - - + > ``` @@ -282,6 +297,14 @@ constructor() { rowIsland1.rowStyles = this.childRowStyles; } ``` + +```tsx + + + + +``` @@ -327,6 +350,27 @@ constructor() { + +```html + +``` +```ts +constructor() { + var grammyNominations = document.getElementById('grammyNominations') as IgcColumnComponent; + grammyNominations.cellClasses = this.grammyNominationsCellClassesHandler; +} +``` + +```razor + +``` + +```tsx + +``` + + + @@ -364,12 +408,6 @@ Add tree grid example - -```razor -add example -``` - - The `CellClasses` input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. @@ -444,6 +482,43 @@ igRegisterScript("CellClassesHandler", () => { + + +```typescript +public grammyNominationsCellClassesHandler = { + downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5, + upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6 +}; +``` + + +```tsx +public grammyNominationsCellClassesHandler = { + downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5, + upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6 +}; +``` + +```razor +igRegisterScript("GrammyNominationsCellClassesHandler", () => { + return { + downFont: (rowData, columnKey) => rowData[columnKey] < 5, + upFont: (rowData, columnKey) => rowData[columnKey] >= 6 + }; +}, true); +``` +```css +.upFont { + color: green !important; +} + +.downFont { + color: red !important; +} +``` + + + ```typescript @@ -479,13 +554,6 @@ Add treegrid example - - -```razor -Add hierarchical grid example -``` - - Use **::ng-deep** or **ViewEncapsulation.None** to force the custom styles down through the current component and its children. @@ -511,10 +579,6 @@ Use **::ng-deep** or **ViewEncapsulation.None** to force the custom styles down Columns expose the `CellStyles` property which allows conditional styling of the column cells. Similar to `CellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions). -In the [sample above](#demo) we've created: -- Two different styles that will be applied based on the column index. -- You will also change the **text color** based on even/odd rows. - Let's define our styles: @@ -537,6 +601,7 @@ public evenColStyles = { + ```razor igRegisterScript("WebGridCellStylesHandler", () => { return { @@ -553,6 +618,7 @@ igRegisterScript("WebGridCellStylesHandler", () => { }; }, true); ``` + ```ts public webGridCellStylesHandler = { @@ -676,6 +742,142 @@ constructor() { ```tsx ``` + + + +```razor +igRegisterScript("CellStylesHandler", () => { + return { + background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null, + color: (rowData, columnKey, cellValue, rowIndex) => { + if (columnKey === "Debut") { + return cellValue > 2000 ? "#28a745" : "#dc3545"; + } + return undefined; + } + }; +}, true); +``` + + +```ts +public cellStylesHandler = { + background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null, + color: (rowData, columnKey, cellValue, rowIndex) => { + if (columnKey === "Debut") { + return cellValue > 2000 ? "#28a745" : "#dc3545"; + } + return undefined; + } +} +``` + + +```tsx +const cellStylesHandler = { + background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null, + color: (rowData, columnKey, cellValue, rowIndex) => { + if (columnKey === "Debut") { + return cellValue > 2000 ? "#28a745" : "#dc3545"; + } + return undefined; + } +} +``` + + +On `ngOnInit` we will add the `CellStyles` configuration for each column of the predefined `Columns` collection, which is used to create the `{ComponentName}` columns dynamically. + +```ts +public ngOnInit() { + this.data = athletesData; + this.columns = [ + { field: 'Id' }, + { field: 'Position' }, + { field: 'Name' }, + { field: 'AthleteNumber' }, + { field: 'CountryName' } + ]; + + this.applyCSS(); +} + +public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); +} + +public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); +} +``` + +```html + + + + +``` + +Define a `popin` animation + +```scss +// component.scss +@keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } +} +``` + + + +```razor + + +``` + +```html + + +``` + +```ts +constructor() { + var col1 = document.getElementById('col1') as IgcColumnComponent; + col1.cellStyles = this.cellStylesHandler; +} +``` + + +```tsx + +``` + + ### Demo @@ -711,16 +913,16 @@ public editDone(evt) { ``` ```html - +<{ComponentSelector} id="grid1" height="500px" width="100%" > - +<{ComponentSelector}> ``` ```ts constructor() { - var grid = this.grid = document.getElementById('grid1') as IgcGridComponent; + var grid = this.grid = document.getElementById('grid1') as {ComponentName}; var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent; var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent; var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent; @@ -746,11 +948,11 @@ function editDone(grid, evt) { backgroundClasses = {...backgroundClasses}; } - +<{ComponentSelector} id="grid1" height="500px" width="100%" onCellEdit={editDone}> - + ``` ## API References diff --git a/doc/en/components/grids/_shared/display-density.md b/doc/en/components/grids/_shared/display-density.md index c920e36ab..55143d930 100644 --- a/doc/en/components/grids/_shared/display-density.md +++ b/doc/en/components/grids/_shared/display-density.md @@ -49,7 +49,6 @@ As you can see in the demo above, the `{ComponentName}` provides three density o ``` - or @@ -84,6 +83,7 @@ Let's now continue with our sample and see in action how the `DisplayDensity` is ``` + ```razor
``` + ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; @@ -159,6 +160,57 @@ public ngOnInit() { } ``` + +```razor +
+ + + + +
+``` + +```html +
+ + + + +
+``` + +```tsx + + + + +``` + + Now we can add the markup. @@ -494,27 +546,6 @@ Now we can add the markup. ``` - -```ts -constructor() { - var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; - var grid = this.grid = document.getElementById('grid') as IgcGridComponent; - propertyEditor.componentRenderer = this.renderer; - propertyEditor.target = this.grid; - grid.data = this.data; -} - -private _componentRenderer: ComponentRenderer = null; -public get renderer(): ComponentRenderer { - if (this._componentRenderer == null) { - this._componentRenderer = new ComponentRenderer(); - var context = this._componentRenderer.context; - PropertyEditorPanelDescriptionModule.register(context); - WebGridDescriptionModule.register(context); - } - return this._componentRenderer; -} -``` @@ -656,26 +687,6 @@ public get renderer(): ComponentRenderer { ``` -```ts -constructor() { - var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; - var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent; - propertyEditor.componentRenderer = this.renderer; - propertyEditor.target = this.grid; - grid.data = this.data; -} - -private _componentRenderer: ComponentRenderer = null; -public get renderer(): ComponentRenderer { - if (this._componentRenderer == null) { - this._componentRenderer = new ComponentRenderer(); - var context = this._componentRenderer.context; - PropertyEditorPanelDescriptionModule.register(context); - WebGridDescriptionModule.register(context); - } - return this._componentRenderer; -} -``` @@ -709,6 +720,7 @@ public get renderer(): ComponentRenderer { + @@ -721,6 +733,123 @@ public get renderer(): ComponentRenderer { ``` ```razor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` ```html @@ -763,6 +892,7 @@ public get renderer(): ComponentRenderer { + @@ -773,10 +903,68 @@ public get renderer(): ComponentRenderer { ``` + +```tsx + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + + + +Finally, let's provide the necessary logic in order to actually apply the density: + + + +```typescript +@ViewChild('grid', { read: {ComponentName} }) +public grid: {ComponentName}; + +public selectDensity(event) { + this.density = this.displayDensities[event.index].label; +} +``` + + + ```ts constructor() { var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; - var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; + var grid = this.grid = document.getElementById('grid') as {ComponentName}; propertyEditor.componentRenderer = this.renderer; propertyEditor.target = this.grid; grid.data = this.data; @@ -793,20 +981,7 @@ public get renderer(): ComponentRenderer { return this._componentRenderer; } ``` - - -Finally, let's provide the necessary logic in order to actually apply the density: - - -```typescript -@ViewChild('grid', { read: {ComponentName} }) -public grid: {ComponentName}; - -public selectDensity(event) { - this.density = this.displayDensities[event.index].label; -} -``` - + ```razor @code { @@ -822,7 +997,39 @@ public selectDensity(event) { private IgbPropertyEditorPanel propertyEditor; private IgbPropertyEditorPropertyDescription displayDensityEditor; - private IgbGrid grid; + private {ComponentSelector} grid; +} +``` + +```tsx +private propertyEditor: IgrPropertyEditorPanel +private propertyEditorRef(r: IgrPropertyEditorPanel) { + this.propertyEditor = r; + this.setState({}); +} +private displayDensityEditor: IgrPropertyEditorPropertyDescription +private grid: {ComponentName} +private gridRef(r: {ComponentName}) { + this.grid = r; + this.setState({}); +} + +constructor(props: any) { + super(props); + + this.propertyEditorRef = this.propertyEditorRef.bind(this); + this.gridRef = this.gridRef.bind(this); +} + +private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + WebHierarchicalGridDescriptionModule.register(context); + } + return this._componentRenderer; } ``` diff --git a/doc/en/components/grids/_shared/editing.md b/doc/en/components/grids/_shared/editing.md index d8d095b51..089e8d2a5 100644 --- a/doc/en/components/grids/_shared/editing.md +++ b/doc/en/components/grids/_shared/editing.md @@ -61,14 +61,14 @@ In the `{ComponentName}`, if you set `RowEditable` property to true, and the `Ed - For custom templates you can see [Cell Editing topic](cell-editing.md#{PlatformLower}-grid-cell-editing-and-edit-templates-example) - + All available column data types could be found in the official [Column types topic](column-types.md#default-template). - + ### Event Arguments and Sequence - + The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.md) and [**Cell Editing**](cell-editing.md) lifecycle - when starting, committing or canceling the editing action. - + | Event | Description | Arguments | Cancellable | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | @@ -107,6 +107,7 @@ As seen from the table, all interactions, except resizing a column, will end the Example how to commit new values, if user tries to sort the column while a cell/row is in edit mode: + ```html @@ -178,6 +179,76 @@ function onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { ``` + + + + +```html + + +``` + + + +```html +<{ComponentSelector} id="hierarchicalGrid" primary-key="ProductID" > + +``` + +```ts +constructor() { + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; + hierarchicalGrid.data = this.data; + hierarchicalGrid.addEventListener("sorting", this.onSorting); +} + +public onSorting(event: IgcSortingEventArgs) { + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; + hierarchicalGrid.endEdit(true); +} +``` + + + +```typescript +public onSorting(event: ISortingEventArgs) { + this.hierarchicalGrid.endEdit(true); +} +``` + + +```razor +<{ComponentSelector} + Id="hierarchicalGrid" + SortingScript="SortingHandler" + RowEditable="true"> + + +//In JavaScript +function SortingHandler() { + hierarchicalGrid.endEdit(true); +} +igRegisterScript("SortingHandler", SortingHandler, false); +``` + + + +```tsx + + +``` + + + + +```tsx +public onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { + hierarchicalGrid.endEdit(true); +} +``` + + + ## API References diff --git a/doc/en/components/grids/_shared/excel-style-filtering.md b/doc/en/components/grids/_shared/excel-style-filtering.md index add0cb724..717265882 100644 --- a/doc/en/components/grids/_shared/excel-style-filtering.md +++ b/doc/en/components/grids/_shared/excel-style-filtering.md @@ -41,8 +41,8 @@ To turn on the `{ComponentName}` component's Excel-style filtering, two inputs s ```tsx - - +<{ComponentSelector} data={nwindData} autoGenerate="true" allowFiltering="true" filterMode={FilterMode.ExcelStyleFilter}> + ``` @@ -81,16 +81,13 @@ Sorting, pinning and hiding features can be removed from the filter menu using t ``` ```razor - - - - - - - + + + + + + + ``` ```html @@ -109,7 +106,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t ``` ```tsx - + @@ -155,7 +152,7 @@ In the sample below **Product Name** and **Discontinued** columns have all four ``` ```razor - + @@ -192,7 +189,7 @@ In the sample below 'Product Name' and 'Discontinued' columns have all three fea ```html - @@ -203,67 +200,48 @@ In the sample below 'Product Name' and 'Discontinued' columns have all three fea - - - - - - - - - - - - - - - - - - - - - - + + + ``` -```razor -Add blazor snippets here -``` - ```html - + - - + - - - - - - - - - - - - - - - - - - - - - - + + + ``` +```tsx + + + + + + + {/* ... */} + +``` + +```razor + + + + + + + @* ... *@ + +``` + In the sample below 'Artist' column have all three features enabled, 'Debut' have all three disabled, 'Grammy Nominations' has only pinning and hiding. @@ -292,9 +270,7 @@ If you want to further customize the Excel style filter menu, you can use the `E The following code demonstrates how to customize the Excel style filter menu using the `ExcelStyleHeaderIconTemplate`: ```razor -<{ComponentSelector} - Name="grid" - @ref="grid" +<{ComponentSelector} Data="Data" AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter" @@ -308,6 +284,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { }, false); ``` + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -318,6 +295,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => { return html`Continued` } ``` + ```tsx const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => { @@ -332,15 +310,9 @@ const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => ); } -function App() { - return ( - <> - - - <> - ) -} +<{ComponentSelector} autoGenerate="true" allowFiltering="true" filterMode="excelStyleFilter" + excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}> + ``` @@ -1054,7 +1026,7 @@ In case you would like to change some of the colors, you need to set a class for ``` ```tsx - +<{ComponentSelector} className="grid"> ``` ```razor diff --git a/doc/en/components/grids/_shared/export-excel.md b/doc/en/components/grids/_shared/export-excel.md index 9fad113af..24ad2297d 100644 --- a/doc/en/components/grids/_shared/export-excel.md +++ b/doc/en/components/grids/_shared/export-excel.md @@ -123,6 +123,7 @@ public exportButtonHandler() { + ```ts constructor() { var gridToolbarExporter1 = document.getElementById('gridToolbarExporter1') as IgcGridToolbarExporterComponent; @@ -133,6 +134,22 @@ public webGridExportEventFreezeHeaders(args: any): void { args.detail.options.freezeHeaders = true; } ``` + + + + + +```ts +constructor() { + var hGridToolbarExporter = document.getElementById('hGridToolbarExporter') as IgcGridToolbarExporterComponent; + hGridToolbarExporter.addEventListener("exportStarted", this.webGridExportEventFreezeHeaders); +} + +public webGridExportEventFreezeHeaders(args: CustomEvent): void { + args.detail.options.freezeHeaders = true; +} +``` + ```tsx @@ -147,21 +164,56 @@ function exportEventFreezeHeaders(grid: IgrGridBaseDirective, args: IgrExporterE ``` + + +```tsx +function exportEventFreezeHeaders(sender: IgrGridToolbarExporter, args: IgrExporterEventEventArgs) { + args.detail.options.freezeHeaders = true; +} + + + + + + +``` + + + ```razor <{ComponentSelector}> + ExportExcel="true" ExportStartedScript="WebGridExportEventFreezeHeaders"> -igRegisterScript("WebGridExportEventMultiColumnHeaders", (ev) => { - ev.detail.options.ignoreMultiColumnHeaders = false; +igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => { + ev.detail.options.freezeHeaders = false; }, false); ``` + + +```razor + <{ComponentSelector}> + + + + + + + + +igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => { + ev.detail.options.freezeHeaders = false; +}, false); +``` + + ```razor diff --git a/doc/en/components/grids/_shared/filtering.md b/doc/en/components/grids/_shared/filtering.md index b9deacb4b..d87077daf 100644 --- a/doc/en/components/grids/_shared/filtering.md +++ b/doc/en/components/grids/_shared/filtering.md @@ -59,23 +59,19 @@ Property `Filterable` enables you to specify the following options: ``` - ```html <{ComponentSelector} id="grid1" auto-generate="false" allow-filtering="true"> -<{ComponentSelector}> + ``` - - ```tsx <{ComponentSelector} data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowFiltering="true"> ``` - To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the `AllowAdvancedFiltering` input property to **true**. @@ -580,20 +576,16 @@ constructor() { - - + + ``` ```ts constructor() { - var artist = this.artist = document.getElementById('Artist') as IgcColumnComponent; - var hasGrammyAward = this.hasGrammyAward = document.getElementById('HasGrammyAward') as IgcColumnComponent; - - this._bind = () => { - artist.bodyTemplate = this.caseSensitiveFilteringOperand; - hasGrammyAward.bodyTemplate = this.booleanFilteringOperand; - } - this._bind(); + var artist = document.getElementById('Artist') as IgcColumnComponent; + var hasGrammyAward = document.getElementById('HasGrammyAward') as IgcColumnComponent; + artist.filters = this.caseSensitiveFilteringOperand; + hasGrammyAward.filters = this.booleanFilteringOperand; } ``` @@ -651,18 +643,18 @@ In addition to the predefined themes, the grid could be further customized by se In case you would like to change some of the colors, you need to set a class for the grid first: -```ts +```html <{ComponentSelector} class="grid"> ``` ```razor -<{ComponentSelector} Class="grid"> +<{ComponentSelector} Class="grid"> ``` ```tsx - +<{ComponentSelector} className="grid"> ``` diff --git a/doc/en/components/grids/_shared/multi-column-headers.md b/doc/en/components/grids/_shared/multi-column-headers.md index ebcffb740..ed6ba7353 100644 --- a/doc/en/components/grids/_shared/multi-column-headers.md +++ b/doc/en/components/grids/_shared/multi-column-headers.md @@ -117,24 +117,76 @@ The declaration of multi-column headers is achieved by wrapping a set of columns ```html - + - - - - + + + + - - + + ``` ```razor -TO-DO H-GRID CODE SNIPPET +<{ComponentSelector} Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true"> + + + + + + + + + + + + + + +``` + + +```html + + + + + + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + + + + + + ``` @@ -259,7 +311,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo ```html - + @@ -270,7 +322,44 @@ For achieving `n-th` level of nested headers, the declaration above should be fo ``` ```razor -TO-DO H-GRID CODE SNIPPET +<{ComponentSelector} Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true"> + + + + + + + + + +``` + + +```html + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + ``` @@ -285,7 +374,7 @@ Every `ColumnGroup` supports [moving](column-moving.md), [pinning](column-pinnin ```html <{ComponentSelector} [data]="data" height="600px" [allowFiltering]="true"> - + @@ -397,7 +486,44 @@ Every `ColumnGroup` supports [moving](column-moving.md), [pinning](column-pinnin ``` ```razor -TO-DO H-GRID CODE SNIPPET +<{ComponentSelector} Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true"> + + + + + + + + + +``` + + +```html + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + ``` diff --git a/doc/en/components/grids/_shared/row-actions.md b/doc/en/components/grids/_shared/row-actions.md index 81572bdba..e0ea835d1 100644 --- a/doc/en/components/grids/_shared/row-actions.md +++ b/doc/en/components/grids/_shared/row-actions.md @@ -78,6 +78,22 @@ They are added inside the `{ComponentName}` and this is all needed to have an `A ``` + +```razor + + @foreach (var c in columns) + { + + + } + + + + + +``` + + ```html @@ -99,9 +115,22 @@ They are added inside the `{ComponentName}` and this is all needed to have an `A ``` + + +```html + + + + + + + +``` + + ```tsx <{ComponentSelector} id="grid" rowEditable="true" primaryKey="ID"> @@ -112,12 +141,26 @@ They are added inside the `{ComponentName}` and this is all needed to have an `A ``` + + + +```tsx + + + + + + + + +``` + > [!Note] > When `ActionStripComponent` is a child component of the `{ComponentName}`, hovering a row will automatically show the UI. - + ## Custom Implementation @@ -138,6 +181,7 @@ These components expose templates giving flexibility for customization. For inst ``` + ```razor
<{ComponentSelector} Data=northwindEmployees> @@ -156,11 +200,33 @@ These components expose templates giving flexibility for customization. For inst
``` + - + +```razor +
+ + + + + edit + + @if (!IsDeleted(actionstrip.Context)) + { + + delete + + } + + +
+``` + + + ```html <{ComponentSelector}> @@ -169,17 +235,42 @@ These components expose templates giving flexibility for customization. For inst ``` + + + +```html + + + + + + +``` + + ```tsx <{ComponentSelector}> - + ``` + + + +```tsx + + + + + + +``` + `sample="/{ComponentSample}/action-strip", height="600", alt="{Platform} {ComponentTitle} Action Strip Example"` diff --git a/doc/en/components/grids/_shared/row-adding.md b/doc/en/components/grids/_shared/row-adding.md index 7073307c0..4311e9e8a 100644 --- a/doc/en/components/grids/_shared/row-adding.md +++ b/doc/en/components/grids/_shared/row-adding.md @@ -185,9 +185,8 @@ Then define a `{ComponentName}` with bound data source, `RowEditable` set to tru - - + ```html <{ComponentSelector} igxPreventDocumentScroll [data]="localdata" [autoGenerate]="false" [primaryKey]="'Debut'" [rowEditable]="true"> @@ -225,9 +224,11 @@ Then define a `{ComponentName}` with bound data source, `RowEditable` set to tru
``` + + ```html <{ComponentSelector} id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true"> @@ -264,8 +265,11 @@ Then define a `{ComponentName}` with bound data source, `RowEditable` set to tru ``` + + + ```razor <{ComponentSelector} AutoGenerate="false" Id="hGrid" PrimaryKey="Debut" RowEditable="true"> @@ -302,8 +306,148 @@ Then define a `{ComponentName}` with bound data source, `RowEditable` set to tru ``` + + + + +```tsx +<{ComponentSelector} + autoGenerate="false" + data={this.singersData} + id="hGrid" + primaryKey="ID" + rowEditable="true" + ref={this.hierarchicalGrid1Ref}> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + > **Note**: > Setting primary key is mandatory for row adding operations. @@ -459,6 +603,7 @@ After a new row is added through the row adding UI, its position and/or visibili Customizing the text of the row adding overlay is possible using the `RowAddTextDirective`. + ```html <{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true"> @@ -466,24 +611,41 @@ Customizing the text of the row adding overlay is possible using the `RowAddText ``` + + ```ts this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => { return html`Adding Row`; } ``` + + ```tsx gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { return ('Adding Row'); } -``` +``` + + + +```tsx +gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { + return ('Adding Row'); +} +``` + + + + + ```razor <{ComponentSelector} Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate"> @@ -494,7 +656,9 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { return @Adding Row; }; } -``` +``` + + ### Customizing Buttons diff --git a/doc/en/components/grids/_shared/row-drag.md b/doc/en/components/grids/_shared/row-drag.md index 4a1201d9a..aecebb766 100644 --- a/doc/en/components/grids/_shared/row-drag.md +++ b/doc/en/components/grids/_shared/row-drag.md @@ -316,6 +316,58 @@ The drag handle icon can be templated using the grid's `DragIndicatorIconTemplat To do so, we can use the `DragIndicatorIcon` to pass a template inside of the `{ComponentSelector}`'s body: + + +```tsx + function dragIndicatorIconTemplate(ctx: IgrGridEmptyTemplateContext) { + return ( + <> + + + ); + } + + + +``` + + +```razor + + + +private RenderFragment dragIndicatorIconTemplate = (context) => +{ + return @
+ +
; +}; +``` + + + + + +```html +<{ComponentSelector} row-draggable="true" id="grid"> + +``` + +```ts +constructor() { + var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; + grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate; +} + +public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => { + return html``; +} +``` + + + + + ```html <{ComponentSelector}> @@ -326,6 +378,8 @@ To do so, we can use the `DragIndicatorIcon` to pass a template inside of the `{ ``` + + ```html @@ -370,6 +424,7 @@ private RenderFragment dragIndicatorIconTemplate =
; }; ``` + Once we've set the new icon template, we also need to adjust the **DEFAULT** icon in our **DragIcon enum**, so it's properly change by the `ChangeIcon` method: @@ -471,6 +526,62 @@ Since all of the actions will be happening _inside_ of the grid's body, that's w With the help of the grid's row drag events you can create a grid that allows you to reorder rows by dragging them. + + + + +```html + + +``` + +```ts +constructor() { + var hGrid = this.grihGridd = document.getElementById('hGrid') as IgcHierarchicalGridComponent; + hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler) +} +``` + + +```tsx + + +``` + +```razor + + +// In JavaScript +igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +}, false); + +function getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + + + + ```html @@ -486,11 +597,16 @@ constructor() { ``` + + ```tsx ``` + + + ```razor @@ -520,6 +636,9 @@ function getCurrentRowIndex(rowList, cursorPosition) { return -1; } ``` + + + @@ -691,6 +810,8 @@ export class TreeGridRowReorderComponent { + + ```typescript export class HGridRowReorderComponent { public rowDragStart(args: any): void { @@ -742,6 +863,98 @@ export class HGridRowReorderComponent { } ``` + + + +```tsx + public webHierarchicalGridReorderRowHandler(sender: IgrHierarchicalGrid, args: IgrRowDragEndEventArgs): void { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = this.hierarchicalGrid; + grid.collapseAll(); + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); + } + + public getCurrentRowIndex(rowList: any[], cursorPosition: any) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; + } +``` + + + +```typescript +public webGridReorderRowHandler(args: CustomEvent): void { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +} +public getCurrentRowIndex(rowList: any[], cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + + +```razor + + +//In JavaScript +igRegisterScript("WebGridReorderRowHandler", (args) => { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +}, false); + +function getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. diff --git a/doc/en/components/grids/_shared/row-editing.md b/doc/en/components/grids/_shared/row-editing.md index f3935c8be..0ebe01688 100644 --- a/doc/en/components/grids/_shared/row-editing.md +++ b/doc/en/components/grids/_shared/row-editing.md @@ -42,6 +42,8 @@ export class AppModule {} Define a `{ComponentName}` with bound data source and `RowEditable` set to true: + + ```html <{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true"> @@ -105,8 +107,6 @@ function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) { ``` - - ```razor <{ComponentSelector} Width="100%"   Height="100%" @@ -136,6 +136,306 @@ function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) { } } ``` + + + + +```html +<{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true"> + + + + + + + + + + + +``` + + + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +```ts +constructor() { + var grid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; + grid.data = this.data; +} +``` + + + +```tsx + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + + + +```razor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + + > [!Note] > Setting primary key is mandatory for row editing operations. @@ -232,14 +532,14 @@ The `RowChangesCount` property is exposed and it holds the count of the changed ``` - ```razor +```razor igRegisterScript("RowEditTextTemplate", (ctx) => { var html = window.igTemplating.html; return html`
Changes: ${ctx.implicit}
`; }, false); - ``` +``` ```ts public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => { @@ -247,6 +547,8 @@ public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => { } ``` + + ```tsx function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) { return ( @@ -256,6 +558,8 @@ function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) { ); } ``` + + ### Customizing Buttons @@ -265,14 +569,14 @@ Customizing the buttons of the row editing overlay also possible via templating. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `RowEditTabStopDirective`. - ```html +```html - ``` +``` - ```razor +```razor igRegisterScript("RowEditActionsTemplate", (ctx) => { var html = window.igTemplating.html; window.endRowEdit = ctx.implicit; @@ -281,7 +585,7 @@ If you want the buttons to be part of the keyboard navigation, then each on of t `; }, false); - ``` +``` ```ts public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => { @@ -293,6 +597,8 @@ public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => { } ``` + + ```tsx function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) { const endRowEdit = ctx.dataContext.implicit; @@ -304,6 +610,8 @@ function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) { ); } ``` + + diff --git a/doc/en/components/grids/_shared/row-pinning.md b/doc/en/components/grids/_shared/row-pinning.md index 197fe650b..cfd9c1e55 100644 --- a/doc/en/components/grids/_shared/row-pinning.md +++ b/doc/en/components/grids/_shared/row-pinning.md @@ -31,7 +31,7 @@ The built-in row pinning UI is enabled by adding an `ActionStrip` component with ``` - + ```razor <{ComponentSelector} Width="100%"   Height="100%" @@ -55,8 +55,10 @@ The built-in row pinning UI is enabled by adding an `ActionStrip` component with ``` + + ```html <{ComponentSelector} auto-generate="false"> @@ -66,8 +68,10 @@ The built-in row pinning UI is enabled by adding an `ActionStrip` component with ``` + + ```tsx <{ComponentSelector}> @@ -77,6 +81,7 @@ The built-in row pinning UI is enabled by adding an `ActionStrip` component with ``` + ## Row Pinning API @@ -146,6 +151,7 @@ public rowPinning(event) { ``` + ```tsx function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) { event.detail.insertAtIndex = 0; @@ -154,6 +160,7 @@ function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) { <{ComponentSelector} autoGenerate="true" rowPinning={rowPinning}> ``` + ```razor <{ComponentSelector} Width="100%" @@ -175,7 +182,6 @@ function rowPinningHandler(event) { igRegisterScript("rowPinningHandler", rowPinningHandler, false); ``` - ## Pinning Position @@ -225,7 +231,16 @@ grid.pinning = { rows: RowPinningPosition.Bottom }; } } ``` - + + +```tsx + <{ComponentSelector} id="dataGrid" autoGenerate="true"> + + + var hierarchicalGrid = document.getElementById("dataGrid") as IgrGrid; + hierarchicalGrid.pinning = { rows: RowPinningPosition.Bottom }; +``` + ## Custom Row Pinning UI @@ -236,6 +251,7 @@ You can define your custom UI and change the pin state of the rows via the relat Let's say that instead of an action strip you would like to show a pin icon in every row allowing the end-user to click and change a particular row's pin state. This can be done by adding an extra column with a cell template containing the custom icon. + ```razor @@ -270,7 +286,6 @@ igRegisterScript("WebGridRowPinCellTemplate", (ctx) => { ``` -On click of the custom icon the pin state of the related row can be changed using the row's API methods. ```typescript public togglePinning(row: IgxGridRow, event) { @@ -305,7 +320,9 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => { return html` this.togglePinning(index)}>📌`; } ``` + + ```tsx function cellPinCellTemplate(ctx: IgrCellTemplateContext) { const index = ctx.dataContext.cell.id.rowIndex; @@ -321,9 +338,106 @@ function cellPinCellTemplate(ctx: IgrCellTemplateContext) { ``` + -On click of the custom icon the pin state of the related row can be changed using the row's API methods. + + + +```razor + + +// In Javascript + +igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => { + var html = window.igTemplating.html; + window.toggleRowPin = function toggleRowPin(row) { + row.pinned = !row.pinned; + } + const row = ctx.cell.row; + return html`
+ 📌 +
`; +}, false); +``` + + +```html +<{ComponentSelector} [data]="data" [primaryKey]="'ID'" [autoGenerate]="false"> + + + + {{cell.row.pinned ? 'lock' : 'lock_open'}} + + + + + + + + +``` + + +```typescript +public togglePinning(row: IgxGridRow, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } +} +``` + + +```html +<{ComponentSelector} id="grid" primary-key="ID" auto-generate="false"> + + + + +``` + +```typescript +constructor() { + var grid = document.getElementById('grid') as {ComponentName}Component; + var column = document.getElementById('column1') as IgcColumnComponent; + + grid.data = this.data; + column.bodyTemplate = this.pinCellTemplate; +} + +public pinCellTemplate = (ctx: IgcCellTemplateContext) => { + const row = ctx.cell.row; + return html` this.togglePinning(row)}>📌`; +} +``` + + + +```tsx +function cellPinCellTemplate(ctx: IgrCellTemplateContext) { + const row = ctx.dataContext.cell.row; + return ( + <> + toggleRowPin(row)}>📌 + + ); +} + +<{ComponentSelector} primaryKey="ID" autoGenerate="false"> + + + + +``` + + + + + +On click of the custom icon the pin state of the related row can be changed using the row's API methods. ```typescript public togglePinning(index: number) { @@ -339,6 +453,24 @@ function toggleRowPin(index: number) { grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned; } ``` + + + +On click of the custom icon the pin state of the related row can be changed using the row's API methods. + +```typescript +public togglePinning(row: IgcRowType) { + row.pinned = !row.pinned; +} +``` + + +```tsx +function toggleRowPin(row: IgrRowType) { + row.pinned = !row.pinned; +} +``` + #### Demo diff --git a/doc/en/components/grids/_shared/row-selection.md b/doc/en/components/grids/_shared/row-selection.md index 8d9c929d2..11c9ee7bb 100644 --- a/doc/en/components/grids/_shared/row-selection.md +++ b/doc/en/components/grids/_shared/row-selection.md @@ -24,7 +24,7 @@ The sample below demonstrates the four types of `{ComponentName}`'s **row select -The sample below demonstrates the three types of `{ComponentName}`'s **row selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to _hide_ or _show_ the row selector checkbox. +The sample below demonstrates the three types of `{ComponentName}`'s **row selection** behavior. Use the drop-down below to enable each of the available selection modes. Use the checkbox to _hide_ or _show_ the row selector checkboxes. diff --git a/doc/en/components/grids/_shared/selection.md b/doc/en/components/grids/_shared/selection.md index 8c916cbda..2aec3ed29 100644 --- a/doc/en/components/grids/_shared/selection.md +++ b/doc/en/components/grids/_shared/selection.md @@ -35,9 +35,9 @@ A brief description will be provided on each button interaction through a snackb ## {Platform} {ComponentTitle} Selection Options - + The {ProductName} `{ComponentName}` component provides three different selection modes - [Row selection](row-selection.md), [Cell selection](cell-selection.md) and [Column selection](column-selection.md). By default only **Multi-cell selection** mode is enabled in the `{ComponentName}`. In order to change/enable selection mode you can use `RowSelection`, `CellSelection` or `Selectable` properties. - + ### {Platform} {ComponentTitle} Row Selection @@ -47,11 +47,11 @@ Property `RowSelection` enables you to specify the following options: - `Single` - Selection of only one row within the `{ComponentName}` would be available. - `Multiple` - Multi-row selection would be available by using the row selectors, with a key combination like ctrl + click, or by pressing the space key once a cell is focused. - + - `MultipleCascade` - This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent's selection state entirely depends on the selection state of its children. - + > Go to [Row selection topic](row-selection.md) for more information. diff --git a/doc/en/components/grids/_shared/sorting.md b/doc/en/components/grids/_shared/sorting.md index b5492d7bf..e8fe51568 100644 --- a/doc/en/components/grids/_shared/sorting.md +++ b/doc/en/components/grids/_shared/sorting.md @@ -77,6 +77,7 @@ import { SortingDirection } from 'igniteui-webcomponents-grids'; import { SortingDirection } from "igniteui-react-grids"; ``` + ```typescript @@ -135,13 +136,74 @@ gridRef.current.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + + + + +```typescript + +// Perform a case insensitive ascending sort on the ProductName column. +this.hierarchicalGrid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); + +// Perform sorting on both the ProductName and Price columns. +this.hierarchicalGrid.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } +]); +``` + + + +```typescript + +// Perform a case insensitive ascending sort on the ProductName column. +this.hierarchicalGrid.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]); + +// Perform sorting on both the ProductName and Price columns. +this.hierarchicalGrid.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } +]); +``` + + +```razor +@code { + this.hierarchicalGrid.SortAsync(new IgbSortingExpression[] + { + new IgbSortingExpression + { + FieldName = "CompanyName", + Dir = SortingDirection.Asc + }, + new IgbSortingExpression + { + FieldName = "Country", + Dir = SortingDirection.Asc + } + }); +} +``` + +```tsx +// Perform a case insensitive ascending sort on the ProductName column. +hierarchicalGridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]); + +// Perform sorting on both the ProductName and Price columns. +hierarchicalGridRef.current.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } +]); +``` + > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any `Column` or `ISortingExpression` can use a custom implementation of the `ISortingStrategy` as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. As with the filtering behavior, you can clear the sorting state by using the `ClearSort` method: + ```typescript // Removes the sorting state from the ProductName column @@ -169,6 +231,37 @@ gridRef.current.clearSort(); this.grid.ClearSortAsync(""); } ``` + + + + +```typescript +// Removes the sorting state from the ProductName column +this.hierarchicalGrid.clearSort('ProductName'); + +// Removes the sorting state from every column in the {ComponentTitle} +this.hierarchicalGrid.clearSort(); +``` + + +```tsx +// Removes the sorting state from the ProductName column +hierarchicalGridRef.current.clearSort('ProductName'); + +// Removes the sorting state from every column in the {ComponentTitle} +hierarchicalGridRef.current.clearSort(); +``` + +```razor +@code { + @*Removes the sorting state from the Title column*@ + this.hierarchicalGrid.ClearSortAsync("Title"); + + @*Removes the sorting state from every column in the Grid*@ + this.hierarchicalGrid.ClearSortAsync(""); +} +``` + > [!Note] > The `SortStrategy` of the `{ComponentName}` is of different type compared to the `SortStrategy` of the `Column`, since they work in different scopes and expose different parameters. @@ -180,6 +273,7 @@ gridRef.current.clearSort(); It is possible to set the initial sorting state of the `{ComponentName}` by passing an array of sorting expressions to the `SortingExpressions` property of the `{ComponentName}`. + ```typescript public ngOnInit() { @@ -227,6 +321,57 @@ useEffect(() => { ]; }, []) ``` + + + + +```typescript +public ngOnInit() { + this.hierarchicalGrid.sortingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } + ]; +} +``` + + +```razor +@code { + protected override void OnAfterRender(bool first) + { + if (first) + { + this.hierarchicalGrid.SortingExpressions = new IgbSortingExpression[]{ + new IgbSortingExpression() + { + FieldName = "Title", + Dir = SortingDirection.Asc + }}; + } + } +} +``` + + +```typescript +public connectedCallback() { + this.hierarchicalGrid.sortingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } + ]; +} +``` + + +```tsx +useEffect(() => { + hierarchicalGridRef.current.sortingExpressions = [ + { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'ProductName', dir: SortingDirection.Desc } + ]; +}, []) +``` + > [!Note] > If values of type `string` are used by a column of `DataType` `Date`, the `{ComponentName}` won't parse them to `Date` objects and using `{ComponentName}` `Sorting` won't work as expected. If you want to use `string` objects, additional logic should be implemented on an application level, in order to parse the values to `Date` objects. @@ -238,7 +383,6 @@ useEffect(() => { The `{ComponentName}` supports remote sorting, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.md) topic. - ## Sorting Indicators Templates @@ -254,10 +398,11 @@ The sorting indicator icon in the column header can be customized using a templa ``` -- `SortHeaderIconTemplate` – re-templates the sorting icon when no sorting is applied. +- `SortHeaderIconTemplate` – re-templates the sorting icon when no sorting is applied. - + + ```razor <{ComponentSelector} SortHeaderIconTemplate="SortDefaultTemplate"> @@ -268,8 +413,10 @@ The sorting indicator icon in the column header can be customized using a templa }; } ``` - + + + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -281,7 +428,10 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { return html``; } ``` + + + ```tsx function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { return ( @@ -291,8 +441,10 @@ function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { ); } - +<{ComponentSelector} sortHeaderIconTemplate={sortHeaderIconTemplate}> ``` + + @@ -308,8 +460,8 @@ function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { - `SortAscendingHeaderIconTemplate` – re-templates the sorting icon when the column is sorted in ascending order. - - + + ```razor <{ComponentSelector} SortAscendingHeaderIconTemplate="SortAscendingTemplate"> @@ -320,8 +472,10 @@ function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { }; } ``` - + + + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -333,7 +487,10 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + + + ```tsx function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { return ( @@ -343,8 +500,10 @@ function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { ); } - +<{ComponentSelector} sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}> ``` + + @@ -360,7 +519,8 @@ function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { - `SortDescendingHeaderIconTemplate` – re-templates the sorting icon when the column is sorted in descending order. - + + ```razor <{ComponentSelector} SortDescendingHeaderIconTemplate="SortDescendingTemplate"> @@ -371,8 +531,10 @@ function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { }; } ``` - + + + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -384,7 +546,10 @@ public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + + + ```tsx function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { return ( @@ -394,8 +559,10 @@ function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { ); } - +<{ComponentSelector} sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}> ``` + + diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md index c2597e482..bb9dbb9b9 100644 --- a/doc/en/components/grids/_shared/summaries.md +++ b/doc/en/components/grids/_shared/summaries.md @@ -42,6 +42,7 @@ All available column data types could be found in the official [Column types top `{ComponentName}` summaries are enabled per-column by setting `HasSummary` property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the `{ComponentName}` the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the `DataType` property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid `Locale` and column `PipeArgs`. + ```html <{ComponentSelector} #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> @@ -87,9 +88,76 @@ All available column data types could be found in the official [Column types top ``` + + + + +```html +<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + + + +``` + + +```razor +<{ComponentSelector} AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID"> + + + + + + + + + + + + +``` + + +```html + + + + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + + + + +``` + The other way to enable/disable summaries for a specific column or a list of columns is to use the public method `EnableSummaries`/`DisableSummaries` of the `{ComponentName}`. + ```html <{ComponentSelector} #grid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" > @@ -185,6 +253,101 @@ function disableSummary() { ``` + + + + +```html +<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px"> + + + + + + + + +``` + + + +```html + + + + + + + + + +``` +```ts +constructor() { + var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}; + var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement; + var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement; + hierarchicalGrid.data = this.data; + enableBtn.addEventListener("click", this.enableSummary); + disableBtn.addEventListener("click", this.disableSummary); +} +``` + + + +```typescript +public enableSummary() { + this.hierarchicalGrid.enableSummaries([ + {fieldName: 'GrammyNominations'}, + {fieldName: 'GrammyAwards'} + ]); +} +public disableSummary() { + this.hierarchicalGrid.disableSummaries(['GrammyNominations']); +} +``` + + +```razor +<{ComponentSelector} AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID"> + + + + + + + +@code { + public async void DisableSummaries() + { + object[] disabledSummaries = { "GrammyNominations" }; + await this.hierarchicalGrid.DisableSummariesAsync(disabledSummaries); + } +} +``` + +```tsx +function enableSummary() { + hierarchicalGridRef.current.enableSummaries([ + {fieldName: 'GrammyNominations'}, + {fieldName: 'GrammyAwards'} + ]); +} +function disableSummary() { + hierarchicalGridRef.current.disableSummaries(['GrammyNominations']); +} + + + + + + + + + + +``` + ## Custom {ComponentTitle} Summaries @@ -298,7 +461,7 @@ See [Custom summaries, which access all data](#custom-summaries-which-access-all > [!Note] > In order to calculate the summary row height properly, the {ComponentTitle} needs the `Operate` method to always return an array of `SummaryResult` with the proper length even when the data is empty. - + And now let's add our custom summary to the column `UnitsInStock`. We will achieve that by setting the Summaries` property to the class we create below. ```html @@ -361,6 +524,67 @@ igRegisterScript("WebGridCustomSummary", (event) => { } }, false); ``` + + + +And now let's add our custom summary to the column `GrammyAwards`. We will achieve that by setting the Summaries` property to the class we create below. + +```html +<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px"> + + + + + + +``` + + + +```html + + + + + + + +``` +```ts +constructor() { + var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}; + var grammyAwards = this.grammyAwards = document.getElementById('grammyAwards') as IgcColumnComponent; + hierarchicalGrid.data = this.data; + grammyAwards.summaries = this.mySummary; +} +``` + + +```typescript +export class HierarchicalGridComponent implements OnInit { + mySummary = MySummary; +} +``` + +```razor +<{ComponentSelector} + AutoGenerate="true" + Name="hierarchicalGrid" + @ref="hierarchicalGrid" + Data="SingersData" + PrimaryKey="ID" + ColumnInitScript="WebHierarchicalGridCustomSummary"> + + +// In Javascript +igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { + if (event.detail.field === "GrammyAwards") { + event.detail.summaries = WebHierarchicalGridSummary; + } +}, false); +``` + + ### Custom summaries, which access all data Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the SummaryOperand `Operate` method. @@ -409,6 +633,7 @@ class WebGridDiscontinuedSummary { } ``` + `sample="/{ComponentSample}/data-summaries-custom", height="650", alt="{Platform} {ComponentTitle} data summary custom"` @@ -420,6 +645,11 @@ class WebGridDiscontinuedSummary { `sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} data summary options"` + + + +`sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} data summary options"` + @@ -488,14 +718,8 @@ When a default summary is defined, the height of the summary area is calculated - - `sample="/{ComponentSample}/data-summary-template", height="650", alt="{Platform} {ComponentTitle} data summary template"` - - - - ## Formatting summaries By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid `Locale` and column `PipeArgs`. When using custom operands, the `Locale` and `PipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the `SummaryFormatter` property. @@ -536,20 +760,36 @@ constructor() { } ``` - - ```razor -igRegisterScript("SummaryFormatter", (summary, summaryOperand) => { - return summary.summaryResult + " rows"; -}, false); +igRegisterScript("SummaryFormatter", (summary) => { + const result = summary.summaryResult; + if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) { + const format = new Intl.DateTimeFormat("en", { year: "numeric" }); + return format.format(new Date(result)); + } + return result; +}, true); ``` -`sample="/{ComponentSample}/data-summary-formatter", height="650", alt="{Platform} {ComponentTitle} data summary formatter"` - +```tsx +public summaryFormatter( + summary: IgrSummaryResult, + summaryOperand: IgrSummaryOperand + ): string { + const result = summary.summaryResult; + if (summary.key !== "count" && result !== null && result !== undefined) { + const format = new Intl.DateTimeFormat("en", { year: "numeric" }); + return format.format(new Date(result)); + } + return result; + } + + +``` - +`sample="/{ComponentSample}/data-summary-formatter", height="650", alt="{Platform} {ComponentTitle} data summary formatter"` @@ -630,6 +870,7 @@ The summary rows can be navigated with the following keyboard interactions: In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming.md). In case you would like to change some of the colors, you need to set a class for the grid first: + ```html <{ComponentSelector} class="grid"> ``` @@ -657,7 +898,37 @@ Then set the related CSS properties for that class: ### Demo `sample="/{ComponentSample}/groupby-summary-styling", height="710", alt="{Platform} {ComponentTitle} groupby summary styling"` + + + +```html +<{ComponentSelector} id="hierarchicalGrid"> +``` + +```razor +<{ComponentSelector} id="hierarchicalGrid"> +``` + +```tsx +<{ComponentSelector} id="hierarchicalGrid"> + +``` + +Then set the related CSS properties for that class: + +```css +#hierarchicalGrid { + --ig-grid-summary-background-color:#e0f3ff; + --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 ); + --ig-grid-summary-label-color: rgb(228, 27, 117); + --ig-grid-summary-result-color: black; +} +``` + +### Demo +`sample="/{ComponentSample}/data-summary-options-styling", height="710", alt="{Platform} {ComponentTitle} groupby summary styling"` + diff --git a/doc/en/components/grids/_shared/toolbar.md b/doc/en/components/grids/_shared/toolbar.md index b34313e6d..6b046f285 100644 --- a/doc/en/components/grids/_shared/toolbar.md +++ b/doc/en/components/grids/_shared/toolbar.md @@ -18,11 +18,19 @@ The {ProductName} Toolbar in is a container for UI operations in the {Platform} The toolbar and the predefined UI components support {Platform} events and expose API for developers. - + ## {Platform} Toolbar Grid Example +`sample="/{ComponentSample}/toolbar-sample-1", height="420", alt="{Platform} {ComponentTitle} Toolbar Example"` + + + + +## {Platform} Toolbar Grid Example `sample="/{ComponentSample}/toolbar-sample-1", height="420", alt="{Platform} {ComponentTitle} Toolbar Example"` + + The predefined `Actions` and `Title` UI components are added inside the `GridToolbar` and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -59,7 +67,7 @@ The predefined `Actions` and `Title` UI components are added inside the `GridToo - Grid Toolbar + Grid Toolbar @@ -118,6 +126,7 @@ The predefined `Actions` and `Title` UI components are added inside the `GridToo ``` + ```html @@ -132,6 +141,11 @@ The predefined `Actions` and `Title` UI components are added inside the `GridToo
``` + + + + + ```html @@ -146,6 +160,45 @@ The predefined `Actions` and `Title` UI components are added inside the `GridToo ``` + + + + +```tsx + + + + Hierarchical Grid Toolbar + + + + + + + + + +``` + + + + + +```razor + + + Hierarchical Grid Toolbar + + + + + + + + +``` + + > [!Note] > As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the `GridToolbarActions` container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. @@ -196,6 +249,7 @@ Of course, each of these UIs can be added independently of each other, or may no ``` + ```html @@ -203,6 +257,11 @@ Of course, each of these UIs can be added independently of each other, or may no
``` + + + + + ```html @@ -210,13 +269,37 @@ Of course, each of these UIs can be added independently of each other, or may no ``` + -For a comprehensive look over each of the default UI components, continue reading the **Features** section below. + + +```razor + + + + +``` + + + +```tsx + + + + +``` + + +For a comprehensive look over each of the default UI components, continue reading the **Features** section below. + + + ## Toolbar with Child Grids + Due to certain limitations in how the child grids of an IgxHierarchicalGrid are implemented and how DI scope works, there is a caveat when using the toolbar in the scope of child grids. When defining a toolbar component inside the `igx-row-island` tags, always make sure to use the IgxGridToolbar and pass the provided grid instance as an input property to the toolbar itself. This will make sure you always have the correct grid instance in the scope of your template: @@ -236,8 +319,85 @@ This will make sure you always have the correct grid instance in the scope of yo ``` + + + +Due to certain limitations in how the child grids of an `{ComponentSelector}` are implemented and how DI scope works, to define a toolbar component inside the `{RowIslandSelector}`, use the `ToolbarTemplate` input property. This allows child grids to create their own separate toolbar instances: + + + + + +```ts +constructor() { + var rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent; + rowIsland1.toolbarTemplate = this.rowIslandToolbarTemplate; +} + +public rowIslandToolbarTemplate = () => { + return html` + + + + + + + `; +} +``` + +```html + + ... + + + +``` + +```razor + + ... + + + + +//In JavaScript: +igRegisterScript("RowIslandToolbarTemplate", () => { + var html = window.igTemplating.html; + return html` + + + + + + + `; +}, false); +``` + +```tsx +function rowIslandToolbarTemplate = () => { + return ( + + + + + + + + + ); +} + + + ... + + + +``` + ## Features @@ -249,8 +409,15 @@ These features can be enabled independently from each other by following a patte Listed below are the main features of the toolbar with example code for each of them. + `sample="/{ComponentSample}/toolbar-sample-2", height="630", alt="{Platform} {ComponentTitle} toolbar sample 2"` + + + +`sample="/{ComponentSample}/toolbar-sample-2", height="630", alt="{Platform} {ComponentTitle} toolbar sample 2"` + + ### Title @@ -259,29 +426,47 @@ Setting a title for the toolbar in your grid is achieved by using the `GridToolb Users can provide anything from simple text to more involved templates. + + ```html Grid toolbar title ``` + + + + ```html Grid toolbar title ``` + + + + ```tsx - Grid toolbar title + + Grid toolbar title + ``` + + + + ```razor Grid toolbar title ``` + + ### Actions @@ -290,6 +475,8 @@ The `GridToolbarActions` is where users can place actions/interactions in relati As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components. + + ```html @@ -299,15 +486,11 @@ toolbar interaction components. ``` + + -```razor - - - - - -``` - + + ```html @@ -315,15 +498,33 @@ toolbar interaction components. ``` + + + + +```razor + + + + + +``` + + + + + ```tsx - ``` + + + Each action now exposes a way to change the overlay settings of the actions dialog by using the `OverlaySettings` input. For example: @@ -386,6 +587,8 @@ The `GridToolbarPinning` component provides the default UI for interacting with The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. + + ```html @@ -398,15 +601,11 @@ The component is setup to work out of the box with the parent grid containing th ``` + + -```razor - - - - - -``` - + + ```html @@ -418,7 +617,23 @@ The component is setup to work out of the box with the parent grid containing th ``` + + + + + +```razor + + + + + +``` + + + + ```tsx @@ -426,12 +641,16 @@ The component is setup to work out of the box with the parent grid containing th ``` + + ### Column Hiding The `GridToolbarHiding` provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. + + ```html @@ -444,15 +663,11 @@ title, the placeholder for the component input and the height of the dropdown it ``` + + -```razor - - - - - -``` - + + ```html @@ -464,7 +679,23 @@ title, the placeholder for the component input and the height of the dropdown it ``` + + + + + +```razor + + + + + +``` + + + + ```tsx @@ -472,11 +703,15 @@ title, the placeholder for the component input and the height of the dropdown it ``` + + ### Advanced Filtering Toolbar Advanced Filtering component provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button. + + ```html @@ -484,15 +719,11 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi ``` + + -```razor - - - - - -``` - + + ```html @@ -500,7 +731,23 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi ``` + + + + +```razor + + + + + +``` + + + + + ```tsx @@ -508,6 +755,8 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi ``` + + ### Data Exporting @@ -550,6 +799,8 @@ These range from changing the display text, to enabling/disabling options in the Here is a snippet showing some of the options which can be customized through the {Platform} template: + + ```html @@ -566,15 +817,11 @@ Here is a snippet showing some of the options which can be customized through th ``` + + -```razor - - - - - -``` - + + ```html @@ -583,7 +830,23 @@ Here is a snippet showing some of the options which can be customized through th ``` + + + + + +```razor + + + + + +``` + + + + ```tsx @@ -591,6 +854,8 @@ Here is a snippet showing some of the options which can be customized through th ``` + + In addition to changing the exported filename, the user can further configure the exporter options by waiting for the `ToolbarExporting` event and customizing the options entry in the event properties. @@ -601,6 +866,8 @@ In addition to changing the exported filename, the user can further configure th The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options: + + ```html <{ComponentSelector} (toolbarExporting)="configureExport($event)" > @@ -691,6 +958,64 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { }); }, false); ``` + + + + + + +```html +<{ComponentSelector} id="hierarchicalGrid"> +``` +```ts +constructor() { + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent; + hierarchicalGrid.addEventListener("toolbarExporting", this.configureExport); +} + +public configureExport(evt: CustomEvent) { + const args = evt.detail; + const options: IgcExporterOptionsBase = args.options; + if (options) { + options.fileName = `Report_${new Date().toDateString()}`; + (args.exporter as any).columnExporting.subscribe((columnArgs: any) => { + columnArgs.cancel = columnArgs.header === 'Photo'; + }); + } +} +``` + + +```tsx +function configureExport(evt: IgrGridToolbarExportEventArgs) { + const args = evt.detail; + const options: IgrExporterOptionsBase = args.options; + + options.fileName = `Report_${new Date().toDateString()}`; + (args.exporter as any).columnExporting.subscribe((columnArgs: any) => { + columnArgs.cancel = columnArgs.header === 'Photo'; + }); +} + +<{ComponentSelector} toolbarExporting={configureExport}> + +``` + +```razor +<{ComponentSelector} ToolbarExportingScript="ConfigureExport"> + +// In Javascript +igRegisterScript("ConfigureExport", (evt) => { + const args = evt.detail; + const options = args.options; + options.fileName = `Report_${new Date().toDateString()}`; + args.exporter.columnExporting.subscribe((columnArgs) => { + columnArgs.cancel = columnArgs.header === 'Photo'; + }); +}, false); +``` + + The following sample demonstrates how to customize the exported files: @@ -698,7 +1023,6 @@ The following sample demonstrates how to customize the exported files: - ## Exporting Indicator @@ -713,17 +1037,22 @@ The sample belows uses has significant amount of data, in order to increase the `sample="/{ComponentSample}/data-exporting-indicator", height="370", alt="{Platform} {ComponentTitle} data exporting indicator"` - + ## Custom Content + + > [!Note] > This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified template files after the migration completes. + + If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. Here is a sample snippet: + ```html <{ComponentSelector} #gridRef> @@ -742,9 +1071,11 @@ Here is a sample snippet: ``` + + ```html <{ComponentSelector} id="grid"> @@ -758,13 +1089,52 @@ Here is a sample snippet: ``` + + + +```tsx +<{ComponentSelector}> + + + title + + {/* + Everything between the toolbar tags except the default toolbar components + will be projected as custom content. + */} + + + + +``` + + + + + +```razor +<{ComponentSelector}> + + title + @* + Everything between the toolbar tags except the default toolbar components + will be projected as custom content. + *@ + + + + +``` + + + The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: `sample="/{ComponentSample}/toolbar-sample-4", height="420", alt="{Platform} {ComponentTitle} toolbar sample 4"` - + @@ -920,6 +1290,15 @@ The last step is to **include** the newly created themes. + + +## Known Limitations + +> [!Note] +> Currently, defining a toolbar component inside the {RowIslandSelector} is not supported. + + + ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. diff --git a/doc/en/components/grids/grid/master-detail.md b/doc/en/components/grids/grid/master-detail.md index d3fb4d8f6..b27a8b40c 100644 --- a/doc/en/components/grids/grid/master-detail.md +++ b/doc/en/components/grids/grid/master-detail.md @@ -1,5 +1,5 @@ --- -title: {Platform} {ComponentTitle} Master-Detail Grid - Infragistics +title: {Platform} Master-Detail Grid - Infragistics _description: Define expandable detail view template for data in rows with Ignite UI {Platform} Grid. Useful for displaying master-detail style data in a hierarchical structure. _keywords: {Platform}, {ComponentKeywords}, {ProductName}, master detail, Infragistics mentionedTypes: ['Infragistics.Controls.Grid'] diff --git a/doc/en/components/grids/grid/paste-excel.md b/doc/en/components/grids/grid/paste-excel.md index 17bd900a6..199c9708d 100644 --- a/doc/en/components/grids/grid/paste-excel.md +++ b/doc/en/components/grids/grid/paste-excel.md @@ -23,25 +23,393 @@ On the top there is a dropdown button with 2 options: The new data after the paste is decorated in Italic. -`sample="/{GridSample}/data-paste-options", height="570", alt="{Platform} Paste from Excel Example"` +`sample="/{GridSample}/paste", height="570", alt="{Platform} Paste from Excel Example"` -
+ ## Usage -You should add the `paste-handler` directive (you can find its code in the next section) to the `Grid` and handle its `onDataProcessed` event. The `onDataProcessed` event has one parameter that gives you access to the Excel data in the form of an array. For reference see the `addRecords` and `updateRecords` methods. + +You should first bind to the grid's `rendered` event to create and manage a text area element: + +```tsx + + + + + + + + + + + + + + +``` ```html - - - - - + + + + + + + + + + + + ``` +```ts +public webGridPasteFromExcel() { + const grid = document.getElementById("grid") as any; + this.onKeyDown = this.onKeyDown.bind(this); + grid.addEventListener("keydown", this.onKeyDown); +} +public onKeyDown(eventArgs: any): void { + const ctrl = eventArgs.ctrlKey; + const key = eventArgs.keyCode; + // Ctrl-V || Shift-Ins || Cmd-V + if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) { + this.textArea.focus(); + } +} + +private txtArea: any; + +public get textArea() { + if(!this.txtArea) { + const div = document.createElement("div"); + const divStyle = div.style; + divStyle.position = "fixed"; + document.body.appendChild(div); + this.txtArea = document.createElement("textarea"); + const style = this.txtArea.style; + style.opacity = "0"; + style.height = "0px"; + style.width = "0px"; + style.overflow = "hidden"; + div.appendChild(this.txtArea); + + this.txtArea.addEventListener("paste", (eventArgs: any) => { this.onPaste(eventArgs); }); + } + return this.txtArea; + } +``` + +```razor + + + + + + + + + + + + + + + +// In JavaScript +igRegisterScript("WebGridPasteFromExcel", (evtArgs) => { + const grid = document.getElementById("grid"); + grid.addEventListener("keydown", onWebGridPasteFromExcelKeyDown); +}, false); + +function onWebGridPasteFromExcelKeyDown(eventArgs) { + const ctrl = eventArgs.ctrlKey; + const key = eventArgs.keyCode; + // Ctrl-V || Shift-Ins || Cmd-V + if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) { + textArea.focus(); + } +} + +var txtArea; +var textArea = getTextArea(); +function getTextArea() { + if(!txtArea) { + const div = document.createElement("div"); + const divStyle = div.style; + divStyle.position = "fixed"; + document.body.appendChild(div); + txtArea = document.createElement("textarea"); + const style = txtArea.style; + style.opacity = "0"; + style.height = "0px"; + style.width = "0px"; + style.overflow = "hidden"; + div.appendChild(txtArea); + + txtArea.addEventListener("paste", (eventArgs) => { onPaste(eventArgs); }); + } + return txtArea; +} + +``` + +The code creates a DOM textarea element which is used to receive the pasted data from the clipboard. When the data is pasted in the textarea the code parses it into an array. + +```ts +public onPaste(eventArgs: any) { + let data; + const clData: any = "clipboardData"; + + // get clipboard data - from window.cliboardData for IE or from the original event's arguments. + if (window[clData] as any) { + (window.event as any).returnValue = false; + data = (window[clData] as any).getData("text"); + } else { + data = eventArgs[clData].getData("text/plain"); + } + + // process the clipboard data + const processedData = this.processData(data); + if (this.pasteMode === "Paste data as new records") { + this.addRecords(processedData); + } else { + this.updateRecords(processedData); + } +} + +public processData(data: any) { + const pasteData = data.split("\n"); + for (let i = 0; i < pasteData.length; i++) { + pasteData[i] = pasteData[i].split("\t"); + // Check if last row is a dummy row + if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") { + pasteData.pop(); + } + // remove empty data + if (pasteData.length === 1 && + pasteData[0].length === 1 && + (pasteData[0][0] === "" || pasteData[0][0] === "\r")) { + pasteData.pop(); + } + } + return pasteData; +} +``` + +```razor +function onPaste(eventArgs) { + let data; + const clData = "clipboardData"; + + // get clipboard data - from window.cliboardData for IE or from the original event's arguments. + if (window[clData]) { + window.event.returnValue = false; + data = window[clData].getData("text"); + } else { + data = eventArgs[clData].getData("text/plain"); + } + + // process the clipboard data + const processedData = processData(data); + if (pasteMode === "Paste data as new records") { + addRecords(processedData); + } else { + updateRecords(processedData); + } +} +function processData(data) { + const pasteData = data.split("\n"); + for (let i = 0; i < pasteData.length; i++) { + pasteData[i] = pasteData[i].split("\t"); + // Check if last row is a dummy row + if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") { + pasteData.pop(); + } + // remove empty data + if (pasteData.length === 1 && + pasteData[0].length === 1 && + (pasteData[0][0] === "" || pasteData[0][0] === "\r")) { + pasteData.pop(); + } + } + return pasteData; +} +``` + +The pasted data can then be added as new records or used to update the existing records based on the user selection. +For reference see the addRecords and updateRecords methods. + +```ts +public addRecords(processedData: any[]) { + const grid = this.grid as any; + const columns = grid.visibleColumns; + const pk = grid.primaryKey; + const addedData: any[] = []; + for (const curentDataRow of processedData) { + const rowData = {} as any; + for (const col of columns) { + const index = columns.indexOf(col); + rowData[col.field] = curentDataRow[index]; + } + // generate PK + rowData[pk] = grid.data.length + 1; + grid.addRow(rowData); + addedData.push(rowData); + } + // scroll to last added row + grid.navigateTo(grid.data.length - 1, 0, () => { + this.clearStyles(); + for (const data of addedData) { + const row = grid.getRowByKey(data[pk]); + if (row) { + const rowNative = this.getNative(row) as any; + if (rowNative) { + rowNative.style["font-style"] = "italic"; + rowNative.style.color = "gray"; + } + } + } + }); +} + +public updateRecords(processedData: any[]) { + const grid = this.grid as any; + const cell = grid.selectedCells[0]; + const pk = grid.primaryKey; + if (!cell) { return; } + const rowIndex = cell.row.index; + const columns = grid.visibleColumns; + const cellIndex = grid.visibleColumns.indexOf(cell.column); + let index = 0; + const updatedRecsPK: any[] = []; + for (const curentDataRow of processedData) { + const rowData = {} as any; + const dataRec = grid.data[rowIndex + index]; + const rowPkValue = dataRec ? dataRec[pk] : grid.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = currentCell || (dataRec ? dataRec[colKey] : null); + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + grid.addRow(rowData); + continue; + } + grid.updateRow(rowData, rowPkValue); + updatedRecsPK.push(rowPkValue); + index++; + } + + this.clearStyles(); + for (const pkVal of updatedRecsPK) { + const row = grid.getRowByKey(pkVal); + if (row) { + const rowNative = this.getNative(row) as any; + if (rowNative) { + rowNative.style["font-style"] = "italic"; + rowNative.style.color = "gray"; + } + } + } +} +``` + +```razor +function addRecords(processedData) { + const grid = document.getElementById("grid"); + const columns = grid.visibleColumns; + const pk = grid.primaryKey; + const addedData = []; + for (const curentDataRow of processedData) { + const rowData = {}; + for (const col of columns) { + const index = columns.indexOf(col); + rowData[col.field] = curentDataRow[index]; + } + // generate PK + rowData[pk] = grid.data.length + 1; + grid.addRow(rowData); + addedData.push(rowData); + } + // scroll to last added row + grid.navigateTo(grid.data.length - 1, 0, () => { + clearStyles(); + for (const data of addedData) { + const row = grid.getRowByKey(data[pk]); + if (row) { + const rowNative = getNative(row); + if (rowNative) { + rowNative.style["font-style"] = "italic"; + rowNative.style.color = "gray"; + } + } + } + }); +} + +function updateRecords(processedData) { + const grid = document.getElementById("grid"); + const cell = grid.selectedCells[0]; + const pk = grid.primaryKey; + if (!cell) { return; } + const rowIndex = cell.row.index; + const columns = grid.visibleColumns; + const cellIndex = grid.visibleColumns.indexOf(cell.column); + let index = 0; + const updatedRecsPK = []; + for (const curentDataRow of processedData) { + const rowData = {}; + const dataRec = grid.data[rowIndex + index]; + const rowPkValue = dataRec ? dataRec[pk] : grid.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = currentCell || (dataRec ? dataRec[colKey] : null); + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + grid.addRow(rowData); + continue; + } + grid.updateRow(rowData, rowPkValue); + updatedRecsPK.push(rowPkValue); + index++; + } +``` + + + + + +## Usage + +You should add the `paste-handler` directive (you can find its code in the next section) to the `Grid` and handle its `onDataProcessed` event. The `onDataProcessed` event has one parameter that gives you access to the Excel data in the form of an array. For reference see the `addRecords` and `updateRecords` methods. + +```html + + + + + + +``` + ```typescript public dataPasted(processedData) { if (this.pasteMode === "Paste data as new records") { @@ -132,7 +500,6 @@ You should add the `paste-handler` directive (you can find its code in the next } } ``` -
## Paste Handler Directive @@ -216,15 +583,15 @@ export class PasteHandler { } ``` + + ## API References -* `GridComponent` +* `Grid` ## Additional Resources -
* [Excel Exporter](export-excel.md) - Use the Excel Exporter service to export data to Excel from Grid. It also provides the option to only export the selected data from the Grid. The exporting functionality is encapsulated in the ExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the ExcelExporterService's export method and pass the Grid component as first argument. -
Our community is active and always welcoming to new ideas. * [{ProductName} **Forums**]({ForumsLink}) diff --git a/doc/en/components/grids/hierarchical-grid/load-on-demand.md b/doc/en/components/grids/hierarchical-grid/load-on-demand.md new file mode 100644 index 000000000..2de0d97ca --- /dev/null +++ b/doc/en/components/grids/hierarchical-grid/load-on-demand.md @@ -0,0 +1,897 @@ +--- +title: {Platform} Hierarchical Grid | Fastest {Platform} Hierarchical Table | Infragistics +_description: The {ProductName} Hierarchical Grid provides the necessary tools to load data on demand for each child grid that is expanded. That way the volume of data would be greatly reduced and can be retrieved only when the user needs it. +_keywords: {Platform} hierarchical grid, igniteui for {Platform}, infragistics +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +--- + +# Hierarchical Grid Load On Demand + +The Ignite UI for {Platform} `HierarchicalGrid` allows fast rendering by requesting the minimum amount of data to be retrieved from the server so that the user can see the result in view and interact with the visible data as quickly as possible. Initially only the root grid’s data is retrieved and rendered, only after the user expands a row containing a child grid, he will receive the data for that particular child grid. This mechanism, also known as Load on Demand, can be easily configured to work with any remote data. + +This topic demonstrates how to configure Load on Demand by creating a Remote Service Provider that communicates with an already available remote service. Here's the working demo and later we will go through it step by step and describe the process of creating it. + +## {Platform} Hierarchical Grid Load On Demand Example + +`sample="/{HierarchicalGridSample}/data-performance-virtualization", height="700", alt="{Platform} Hierarchical Grid Load On Demand Example"` + +### Remote Service Provider + +First we will prepare our service provider so we will be ready to get the data we would need for the hierarchical grid. + +#### Getting basic data + + +We will be communicating with our backend service over HTTP protocol using the XMLHttpRequest interface the browsers provide. In order to achieve this more easily we will use Angular's [`HttpClient`](https://angular.io/api/common/http/HttpClient) module that offers a simplified client HTTP API. That way in order to get our data we will need this simple method in our service: + +```typescript +public getData(dataState): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map(response => response), + ); +} +``` + +As you can see `this.http` will be a reference to our `HttpCLient` module, and `buildUrl()` will be the method that will generate our url based on the data that we have received. We map our response and return an Observable, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid. + + + +We will be communicating with our backend service over HTTP protocol using the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) global function the browsers provide. That way in order to get our data we will need this simple method in our service: + +```ts +export function getData(dataState: any): any { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} +``` + +As you can see `buildUrl()` will be the method that will generate our url based on the data that we have received. We return a Promise, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid. + + + +We will be communicating with our backend service over HTTP protocol using the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) global function the browsers provide. That way in order to get our data we will need this simple method in our service: + +```razor +function getData(dataState) { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} +``` + +As you can see `buildUrl()` will be the method that will generate our url based on the data that we have received. We return a Promise, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid. + + +#### Building our request url + +Next we will define how we should build our URL for the GET request. This is where we will be able to get the data for our main grid but also for any child grid inside it. We will use the `Customers` data from [here](https://data-northwind.indigo.design/swagger/index.html) for our root level and use `Orders` and `Details` for the lower levels. The model will differ per application but we will use the following one: + + + +What we first need is the `key` of our table to determine from where to get the data for the desired grid, the primary key of the parent row and its unique ID. + + +We will define all this in an interface called `IDataState`. An example: + +```typescript +export interface IDataState { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} + +//... +public buildUrl(dataState: IDataState): string { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${this.url}${qS}`; +} +//... +``` + + + +We will define all this in the `dataState` object. An example: + +```ts +const dataState: { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} = { + //... +}; + +function buildUrl(dataState: any) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${URL}${qS}`; +} +``` + + + +We will define all this in the `dataState` object. An example: + +```razor +const dataState: { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} = { + //... +}; + +function buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${DATA_URL}${qS}`; +} +``` + + +#### Result + + +Finally, this is how our `remote-lod.service.ts` would look like: + +```typescript +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +export interface IDataState { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} + +@Injectable() +export class RemoteLoDService { + public url = `https://data-northwind.indigo.design/`; + + constructor(private http: HttpClient) { } + + public getData(dataState: IDataState): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map((response) => response) + ); + } + + public buildUrl(dataState: IDataState): string { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${this.url}${qS}`; + } +} +``` + + + +Finally, this is how our remote service would look like: + +```ts +const URL = `https://data-northwind.indigo.design/`; + +export function getData(dataState: any): any { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState: any) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${URL}${qS}`; +} +``` + + + +Finally, this is how our remote service would look like: + +```razor +const DATA_URL = `https://data-northwind.indigo.design/`; + +function getData(dataState) { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${DATA_URL}${qS}`; +} +``` + + +### Hierarchical Grid Setup + +Next we will setup our hierarchical grid and connect it to our remote service provider. + +#### Template defining + +First we will define our hierarchical grid template with the levels of hierarchy that we expect to have. We know that our root grid `PrimaryKey` for the customers is their `customerId`, for their orders on the first level - `orderId` and respectively for order details - `productId`. Knowing each database table and their keys allows us to define our initial template: + + +```html + + + + + + + + + + + + + + + + + + + + + +``` + + + +```html + + + + + + + + + + + + + + + + + + + + + +``` + + + +```tsx + + + + + + + + + + + + + + + + + + + + + +``` + + + +```razor + + + + + + + + + + + + + + + + + + + + + +``` + + +There is one thing missing in our template though, and that is the data for our root level hierarchical grid, and eventually its children. + + +We will easily set the data of the root grid after getting its data from the service in our code later, since we can use the `#hGrid` reference. + + + +We will easily set the data of the root grid after getting its data from the service in our code later, since we can use the `id="hGrid"` reference. + + + +We will easily set the data of the root grid after getting its data from the service in our code later, since we can use the `ref={hierarchicalGrid}` reference. + + + +We will easily set the data of the root grid after getting its data from the service in our code later, since we can use the `Id="hGrid"` reference. + + +Setting the data for any child that has been expanded is a bit different. When a row is expanded for the first time, a new child `HierarchicalGrid` is rendered for it and we need to get the reference for the newly created grid to set its data. That is why each `RowIsland` component provides the `GridCreated` event that is fired when a new child grid is created for that specific row island. We can use that to get the reference we need for the new grid, request its data from the service, and apply it. + +We can use one method for all row islands since we built our service so that it needs only information if it is the root level, the key of the row island, the primary key of the parent row, and its unique identifier. All this information can be accessed either directly from the event arguments, or from the row island responsible for triggering the event. + + +Let's name the method that we will use `gridCreated`. + + + +Let's name the method that we will use `OnGridCreated`. + + + +Since the `GridCreated` event provides the `parentID` property, a reference to the row island as `owner` and the new child `grid` property, it will be passed as the first argument. We are only missing information about the parent row's `primaryKey`, but we can easily pass that as a second argument, depending on which row island we bind. + + + +Since the `GridCreated` event provides a reference to the row island, the `parentID` property, and the new child `grid` property, this will be passed as the first and second arguments. We are only missing information about the parent row's `primaryKey`, but we can easily pass that as a third argument, depending on which row island we bind. + + + +Since the `GridCreated` event provides the `parentID` property, a reference to the row island as `owner` and the new child `grid` property, it will be passed as the first argument. We are only missing information about the parent row's `primaryKey`, but we can easily determine that based on the row island `ChildDataKey`. + + +The template file, with these changes added, would look like this: + + +```html + + + + + + + + + + + + + + + + + + + + + +``` + + + +```html + + + + + + + + + + + + + + + + + + + + + +``` +```ts +constructor() { + const ordersRowIsland = document.getElementById("ordersRowIsland"); + const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland"); + + ordersRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Customers"); + }); + + orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Orders"); + }); +} +``` + + + +```tsx + + + + + + + + gridCreated(rowIsland, e, "Customers")} + > + + + + + + gridCreated(rowIsland, e, "Orders")} + > + + + + + + + +``` + + + +```razor + + + + + + + + + + + + + + + + + + + + + +``` + + +#### Connecting our service + +One of our final steps now will be to connect our previously created service to our hierarchical grid. + + +Since we defined it as an `Injectable`, we can pass it as a provider to our application. We will get a reference to our root grid as well, by using `ViewChild` query to set its data: + +```typescript +@Component({ + providers: [RemoteLoDService], + selector: "app-hierarchical-grid-lod", + styleUrls: ["./hierarchical-grid-lod.component.scss"], + templateUrl: "./hierarchical-grid-lod.component.html" +}) +export class HierarchicalGridLoDSampleComponent { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } +} +``` + +In order to make sure that our grid is rendered before we request its data from the service and assign it, we will use the `AfterViewInit` lifecycle hook. As it doesn't have any parents we can only pass that `rootLevel` is **true**, and the key for it, to the `getData` of our service. Since it returns an observable we will need to subscribe to it: + +```typescript +public ngAfterViewInit() { + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); +} +``` + + + +We will get a reference to our root grid to set its data. As it doesn't have any parents we can only pass that `rootLevel` is **true**, and the key for it, to the `getData` of our service. Since it returns a Promise we will need to subscribe to it: + +```ts +constructor() { + const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => { + hierarchicalGrid.data = data; + hierarchicalGrid.markForCheck(); + }); +} +``` + + + +We will get a reference to our root grid via the `useRef` React hook to set its data: + +```tsx +const hierarchicalGrid = useRef(null); +``` + +In order to make sure that our grid is rendered before we request its data from the service and assign it, we will use the `useEffect` React hook. As it doesn't have any parents we can only pass that `rootLevel` is **true**, and the key for it, to the `getData` of our service. Since it returns a Promise we will need to subscribe to it: + +```tsx +useEffect(() => { + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data: any) => { + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); +}, []); +``` + + + +We will get a reference to our root grid to set its data. In order to make sure that our grid is rendered before we request its data from the service and assign it, we will use the `Rendered` event. As it doesn't have any parents we can only pass that `rootLevel` is **true**, and the key for it, to the `getData` of our service. Since it returns a Promise we will need to subscribe to it: + +```razor +igRegisterScript("OnGridRendered", () => { + const grid = document.getElementById("hGrid"); + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data) => { + grid.data = data; + grid.markForCheck(); + }); +}, false) +``` + + + +Next, we only need to create our `gridCreated` method that will request data for any new child grid created. + + + +Next, we only need to create our `OnGridCreated` method that will request data for any new child grid created. + + +It will be similar to getting the root level grid data, just this time we will need to pass more information, like `parentID` and `parentKey`. `rootLevel` will be **false** for any child: + + +```typescript +public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); +} +``` + + + +```ts +public gridCreated(event: CustomEvent, _parentKey: string) { + const context = event.detail; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false + }; + + getData(dataState).then((data: any[]) => { + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```tsx +function gridCreated(rowIsland: IgrRowIsland, event: IgrGridCreatedEventArgs, _parentKey: string) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + getData(dataState).then((data: any[]) => { + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```razor +igRegisterScript("OnGridCreated", (args) => { + const context = args.detail; + const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders"; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + getData(dataState).then((data) => { + context.grid.data = data; + context.grid.markForCheck(); + }); +}, false) +``` + + +With this, the setup of our application is almost done. This last step aims to improve the user experience by informing the user that the data is still loading so he doesn't have to look at an empty grid in the meantime. That's why the `HierarchicalGrid` supports a loading indicator that can be displayed while the grid is empty. If new data is received, the loading indicator will hide and the data will be rendered. + +#### Setup of loading indication + +The `HierarchicalGrid` can display a loading indicator by setting the `IsLoading` property to **true** while there is no data. We need to set it initially for the root grid and also when creating new child grids, until their data is loaded. We could always set it to **true** in our template, but we want to hide it and display that the grid has no data if the service returns an empty array by setting it to **false**. + +In this case the final version of our configuration would look like this: + + +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { + IGridCreatedEventArgs, + IgxHierarchicalGridComponent, + IgxRowIslandComponent +} from "igniteui-angular"; +import { RemoteLoDService } from "../services/remote-lod.service"; + +@Component({ + providers: [RemoteLoDService], + selector: "app-hierarchical-grid-lod", + styleUrls: ["./hierarchical-grid-lod.component.scss"], + templateUrl: "./hierarchical-grid-lod.component.html" +}) +export class HierarchicalGridLoDSampleComponent implements AfterViewInit { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } + + public ngAfterViewInit() { + this.hGrid.isLoading = true; + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.isLoading = false; + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); + } + + public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); + } +} +``` + + + +```ts +constructor() { + const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent; + const ordersRowIsland = document.getElementById("ordersRowIsland"); + const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland"); + + ordersRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Customers"); + }); + + orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Orders"); + }); + + hierarchicalGrid.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => { + hierarchicalGrid.isLoading = false; + hierarchicalGrid.data = data; + hierarchicalGrid.markForCheck(); + }); +} + +public gridCreated(event: CustomEvent, _parentKey: string) { + const context = event.detail; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false + }; + + context.grid.isLoading = true; + + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```tsx +const hierarchicalGrid = useRef(null); + +useEffect(() => { + hierarchicalGrid.current.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data: any) => { + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); +}, []); + +function gridCreated(rowIsland: IgrRowIsland, event: IgrGridCreatedEventArgs, _parentKey: string) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + context.grid.isLoading = true; + + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```razor +igRegisterScript("OnGridRendered", () => { + const grid = document.getElementById("hGrid"); + + grid.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data) => { + grid.isLoading = false; + grid.data = data; + grid.markForCheck(); + }); +}, false) + +igRegisterScript("OnGridCreated", (args) => { + const context = args.detail; + const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders"; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + context.grid.isLoading = true; + + getData(dataState).then((data) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +}, false) +``` + + +### API References + +* `HierarchicalGrid` +* `RowIsland` + +### Additional Resources + +* [Hierarchical Grid Component](overview.md) + +Our community is active and always welcoming to new ideas. + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/grids/hierarchical-grid/overview.md b/doc/en/components/grids/hierarchical-grid/overview.md index 94f51853a..c20d2ff10 100644 --- a/doc/en/components/grids/hierarchical-grid/overview.md +++ b/doc/en/components/grids/hierarchical-grid/overview.md @@ -1,14 +1,883 @@ --- -title: {Platform} Hierarchical Data Grid | Material Table | {ProductName} | Infragistics -_description: Learn how to use {ProductName} data grid, based on {Platform} Material Table and create a touch-responsive angular component with variety of angular events. -_keywords: angular data grid, igniteui for angular, infragistics +title: {Platform} Hierarchical Grid | Fastest {Platform} Hierarchical Table | Infragistics +_description: The {ProductName} Hierarchical Grid is used to display and manipulate hierarchical with ease. Quickly bind your data with very little coding. Try it for FREE +_keywords: {Platform} hierarchical grid, igniteui for {Platform}, infragistics +mentionedTypes: [{ComponentApiMembers}] namespace: Infragistics.Controls --- # Hierarchical Data Grid Overview and Configuration -{ProductName} Hierarchical Data Grid is used to display and manipulate hierarchical data with ease. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating and column moving. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing the corresponding child grid, when more detailed information is needed. Displaying of hierarchical data has never been easier and beautiful thanks to the Material Table-based UI Grid. +The {ProductName} Hierarchical Data Grid is used to display and manipulate hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel and CSV, and more. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids, when more detailed information is needed. - +## {Platform} Hierarchical Data Grid Example + +In this {Platform} grid example you can see how users can visualize hierarchical sets of data and use cell templating to add other visual components. + +`sample="/{HierarchicalGridSample}/overview", height="700", alt="{Platform} Hierarchical Grid example"` + +## Getting Started with {ProductName} Hierarchical Grid + +### Dependencies + +To get started with the {Platform} hierarchical grid, first you need to install the {ProductName} package. + + + +Please refer to these topics on adding the IgniteUI.Blazor package: + +- [Getting Started](../../general-getting-started-blazor-client.md) +- [Adding Nuget Package](../../general-nuget-feed.md) + +You also need to include the following CSS link in the index.html file of your application to provide the necessary styles to the hierarchical grid: + +```razor + +``` + +Afterwards, you may start implementing the control by adding the following namespaces: + +```razor +@using IgniteUI.Blazor.Controls +``` + + + + + +When installing the {Platform} hierarchical grid package, the core package must also be installed. + +```cmd +npm install --save {PackageCore} +npm install --save {PackageGrids} +npm install --save {PackageInputs} +npm install --save {PackageLayouts} +``` + +You also need to include the following import to use the grid: + + +```typescript +import 'igniteui-webcomponents-grids/grids/combined.js'; +``` + + +```tsx +import "igniteui-react-grids/grids"; +``` + +The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it: + + +```typescript +import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'; +``` + + +```tsx +import 'igniteui-react-grids/grids/themes/light/bootstrap.css' +``` + + +Or to link it: +```typescript + +``` + +For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](overview.md#Styling) section. + + + + +### Component Modules + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule)); +``` + +```typescript +// app.module.ts + +import { IgxhierarchicalGridModule } from 'igniteui-angular'; +// import { IgxhierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + // ... + IgxhierarchicalGridModule, + // ... + ] +}) +export class AppModule {} +``` + + + +## Using the {Platform} Hierarchical Data Grid + +### Data Binding + +The *{HierarchicalGridSelector}* derives from {GridSelector} and shares most of its functionality. The main difference is that it allows multiple levels of hierarchy to be defined. They are configured through a separate tag within the definition of *{HierarchicalGridSelector}*, called *{RowIslandSelector}*. The *{RowIslandSelector}* component defines the configuration for each child grid for the particular level. Multiple row islands per level are also supported. +The Hierarchical Grid supports two ways of binding to data: + +### Using hierarchical data + +If the application loads the whole hierarchical data as an array of objects referencing children arrays of objects, then the Hierarchical Grid can be configured to read it and bind to it automatically. Here is an example of a properly structured hierarchical data source: + +```ts +export const singers = [{ + "Artist": "Naomí Yepes", + "Photo": "assets/images/hgrid/naomi.png", + "Debut": "2011", + "Grammy Nominations": 6, + "Grammy Awards": 0, + "Tours": [{ + "Tour": "Faithful Tour", + "Started on": "Sep-12", + "Location": "Worldwide", + "Headliner": "NO", + "Toured by": "Naomí Yepes" + }], + "Albums": [{ + "Album": "Dream Driven", + "Launch Date": new Date("August 25, 2014"), + "Billboard Review": "81", + "US Billboard 200": "1", + "Artist": "Naomí Yepes", + "Songs": [{ + "No.": "1", + "Title": "Intro", + "Released": "*", + "Genre": "*", + "Album": "Dream Driven" + }] + }] +}]; +``` +```razor +public class SingersData : List +{ + public SingersData() + { + this.Add(new SingersDataItem() + { + Artist = "Naomí Yepes", + Photo = "assets/images/hgrid/naomi.png", + Debut = "2011", + GrammyNomination = 6, + GrammyAwards = 0, + Tours = new List() { + new ToursItem() { + Tour = "Faithful Tour", + StartedOn = new DateTime(), + Location = "Worldwide", + Headliner = "NO", + TouredBy = "Naomí Yepes" + } + }, + Albums = new List() { + new AlbumItem() { + Album = "Dream Driven", + LaunchDate = new DateTime(), + BillboardReview= "81", + Artist = "Naomí Yepes", + Songs = new List() { + new SongItem() { + Number = "1", + Title="Intro", + Released = "*", + Genre = "Rock", + Album ="Dream Driven" + } + } + } + } + }); + } +} +``` +Each *{RowIslandSelector}* should specify the key of the property that holds the children data. + +```html + + + + + + + + +``` + +```html + + + + + + + + +``` + +```tsx + + + + + + + + +``` + +```razor + + + + + + +``` +> [!NOTE] +> Note that instead of `data` the user configures only the `childDataKey` that the {HierarchicalGridSelector} needs to read to set the data automatically. + +### Using Load-On-Demand + +Most applications are designed to load as little data as possible initially, which results in faster load times. In such cases {HierarchicalGridSelector} may be configured to allow user-created services to feed it with data on demand. + + +```html + + + + + + + + +``` + +```typescript +// hierarchicalGridSample.component.ts + +@Component({...}) +export class HierarchicalGridLoDSampleComponent implements AfterViewInit { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } + + public ngAfterViewInit() { + this.hGrid.isLoading = true; + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.isLoading = false; + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); + } + + public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); + } +} +``` + +```typescript +// remote-load-on-demand.service.ts + +@Injectable() +export class RemoteLoDService { + public url = `https://data-northwind.indigo.design/`; + + constructor(private http: HttpClient) { } + + public getData(dataState: any): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map((response) => response) + ); + } + + public buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${this.url}${qS}`; + } +} +``` + + + +```html + + + + + +``` + +```ts +import { getData } from "./remoteService"; + +export class HierarchicalGridLoadOnDemand { + constructor() { + const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent; + const ordersRowIsland = document.getElementById("ordersRowIsland"); + const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland"); + + ordersRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Customers"); + }); + orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Orders"); + }); + + hierarchicalGrid.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => { + hierarchicalGrid.isLoading = false; + hierarchicalGrid.data = data; + hierarchicalGrid.markForCheck(); + }); + } + + public gridCreated(event: CustomEvent, _parentKey: string) { + const context = event.detail; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false + }; + context.grid.isLoading = true; + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); + } +} +``` + + +```tsx +import { getData } from "./remoteService"; + +export default function Sample() { + const hierarchicalGrid = useRef(null); + + function gridCreated( + rowIsland: IgrRowIsland, + event: IgrGridCreatedEventArgs, + _parentKey: string + ) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + context.grid.isLoading = true; + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); + } + + useEffect(() => { + hierarchicalGrid.current.isLoading = true; + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data: any) => { + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); + }, []); + + return ( + + gridCreated(rowIsland, e, "Customers")} + > + gridCreated(rowIsland, e, "Orders")} + > + + + ); +} +``` + + +```ts +const URL = `https://data-northwind.indigo.design/`; + +export function getData(dataState: any): any { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState: any) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${URL}${qS}`; +} +``` + + +```razor + + + + + + +In JavaScript +igRegisterScript("OnGridRendered", () => { + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + grid.isLoading = true; + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data) => { + grid.isLoading = false; + grid.data = data; + grid.markForCheck(); + }); +}, false) + +igRegisterScript("OnGridCreated", (args) => { + const context = args.detail; + const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders"; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + context.grid.isLoading = true; + getData(dataState).then((data) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +}, false) + +const DATA_URL = `https://data-northwind.indigo.design/`; + +function getData(dataState) { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${DATA_URL}${qS}`; +} +``` + +## Hide/Show row expand indicators + +If you have a way to provide information whether a row has children prior to its expanding, you could use the `HasChildrenKey` input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed. + +```html + + +``` + +```html + + +``` + +```tsx + + +``` + +```razor + + +``` + +Note that setting the `HasChildrenKey` property is not required. In case you don't provide it, expansion indicators will be displayed for each row. + +Additionally if you wish to show/hide the header expand/collapse all indicator you can use the `ShowExpandAll` property. +This UI is disabled by default for performance reasons and it is not recommended to enable it in grids with large data or grids with load on demand. + +## Features + +The grid features could be enabled and configured through the {RowIslandSelector} markup - they get applied for every grid that is created for it. Changing options at runtime through the row island instance changes them for each of the grids it has spawned. + +```html + + + + + + + + + + + + + + + + + +``` + +```html + + + + + + + + + + + + + + + + + +``` + +```tsx + + + + + + + + + + + + + + + + +``` + +```razor + + + + + + + + + + + + + + + + +``` + +The following grid features work on a per grid level, which means that each grid instance manages them independently of the rest of the grids: + +- Sorting +- Filtering +- Paging +- Multi Column Headers +- Hiding +- Pinning +- Moving +- Summaries +- Search + +The Selection and Navigation features work globally for the whole {HierarchicalGridTitle} + +- Selection + Selection does not allow selected cells to be present for two different child grids at once. +- Navigation + When navigating up/down, if next/prev element is a child grid, navigation will continue in the related child grid, marking the related cell as selected and focused. If the child cell is outside the current visible view port it is scrolled into view so that selected cell is always visible. + +## Collapse All Button + +The Hierarchical Grid allows the users to conveniently collapse all its currently expanded rows by pressing the "Collapse All" button at its top left corner. Additionally, every child grid which contains other grids and is a Hierarchical Grid itself, also has such a button - this way the user is able to collapse only a given grid in the hierarchy: + + + + + + + +## CRUD operations + +> [!NOTE] +> An important difference from the flat Data Grid is that each instance for a given row island has the same transaction service instance and accumulates the same transaction log. In order to enable the CRUD functionality users should inject the `IgxHierarchicalTransactionServiceFactory`. + +Calling CRUD API methods should still be done through each separate grid instance. + +Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) topic. + + + +## Styling +The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. + +In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling. + +### Importing global theme +To begin the customization of the hierarchical grid, you need to import the `index` file, where all styling functions and mixins are located. + +```scss +@import '~igniteui-angular/lib/core/styles/themes/index' +``` + +### Defining custom theme +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. + + >[!NOTE] + >There is no specific `sass` hierarchical grid function. + + +```scss +$custom-theme: grid-theme( + $cell-active-border-color: #ffcd0f, + $cell-selected-background: #6f6f6f, + $row-hover-background: #f8e495, + $row-selected-background: #8d8d8d, + $header-background: #494949, + $header-text-color: #fff, + $expand-icon-color: #ffcd0f, + $expand-icon-hover-color: #e0b710, + $resize-line-color: #ffcd0f, + $row-highlight: #ffcd0f +); +``` + +### Defining a custom color palette +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +`igx-palette` generates a color palette, based on provided primary and secondary colors. + + ```scss +$black-color: #494949; +$yellow-color: #FFCD0F; + +$custom-palette: palette( + $primary: $black-color, + $secondary: $yellow-color +); +``` +After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. +```scss +$custom-theme: grid-theme( + $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)), + $cell-selected-background: (igx-color($custom-palette, "primary", 300)), + $row-hover-background: (igx-color($custom-palette, "secondary", 100)), + $row-selected-background: (igx-color($custom-palette, "primary", 100)), + $header-background: (igx-color($custom-palette, "primary", 500)), + $header-text-color: (igx-contrast-color($custom-palette, "primary", 500)), + $expand-icon-color: (igx-color($custom-palette, "secondary", 500)), + $expand-icon-hover-color: (igx-color($custom-palette, "secondary", 600)), + $resize-line-color: (igx-color($custom-palette, "secondary", 500)), + $row-highlight: (igx-color($custom-palette, "secondary", 500)) +); +``` + +### Defining custom schemas +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we will use `$_light_grid`. +```scss +$custom-grid-schema: extend($_light-grid,( + cell-active-border-color: (igx-color:('secondary', 500)), + cell-selected-background: (igx-color:('primary', 300)), + row-hover-background: (igx-color:('secondary', 100)), + row-selected-background: (igx-color:('primary', 100)), + header-background: (igx-color:('primary', 500)), + header-text-color: (igx-contrast-color:('primary', 500)), + expand-icon-color: (igx-color:('secondary', 500)), + expand-icon-hover-color: (igx-color:('secondary', 600)), + resize-line-color: (igx-color:('secondary', 500)), + row-highlight: (igx-color:('secondary', 500)) +)); +``` +In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. +```scss +$my-custom-schema: extend($light-schema, ( + igx-grid: $custom-grid-schema +)); + +$custom-theme: grid-theme( + $palette: $custom-palette, + $schema: $my-custom-schema +); +``` + +### Applying the custom theme +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + +```scss +@include grid($custom-theme); +``` + +### Scoped component theme + +In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). + +This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. + + >[!NOTE] + >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. + >[!NOTE] + >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component: + +```scss +:host { + ::ng-deep { + @include grid($custom-theme); + } +} +``` + +### Demo + + + + +>[!NOTE] +>The sample will not be affected by the selected global theme from `Change Theme`. + + + + +## Styling +In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming.md). In case you would like to change the header background and text color, you need to set a class for the grid first: + + +```html + +``` + + +```tsx + +``` + +```razor + +``` + +Then set the `--header-background` and `--header-text-color` CSS properties for that class: + +```css +.grid { + --header-background: #494949; + --header-text-color: #FFF; +} +``` +### Demo +`sample="/{HierarchicalGridSample}/hierarchical-grid-styling", height="700", alt="{Platform} Hierarchical Grid styling example"` + + + +## Known Limitations + +|Limitation|Description| +|--- |--- | +|Group By|Group By feature is not supported by the hierarchical grid.| + +## API References + +* `HierarchicalGrid` +* `RowIsland` +* `Grid` +* `Column` +* `Cell` + + + + +Our community is active and always welcoming to new ideas. + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/grids/tree-grid/overview.md b/doc/en/components/grids/tree-grid/overview.md index 536c77ad9..6c82d4ae6 100644 --- a/doc/en/components/grids/tree-grid/overview.md +++ b/doc/en/components/grids/tree-grid/overview.md @@ -80,7 +80,7 @@ For more details on how to customize the appearance of the tree grid, you may ha - + ### Component Modules ```razor @@ -105,7 +105,7 @@ import { IgxTreeGridModule } from 'igniteui-angular'; export class AppModule {} ``` - + ## Usage diff --git a/doc/en/components/grids/tree.md b/doc/en/components/grids/tree.md index 90defb50f..763a22023 100644 --- a/doc/en/components/grids/tree.md +++ b/doc/en/components/grids/tree.md @@ -85,8 +85,8 @@ The simplest way to start using the `Tree` is as follows: ### Declaring a tree `TreeItem` is the representation of every item that belongs to the `Tree`. -Items provide `disabled`, `active`, `selected` and `expanded` properties, which give you opportunity to configure the states of the item as per your requirement. -The `value` property can be used to add a reference to the data entry the item represents. +Items provide `Disabled`, `Active`, `Selected` and `Expanded` properties, which give you opportunity to configure the states of the item as per your requirement. +The `Value` property can be used to add a reference to the data entry the item represents. @@ -124,7 +124,7 @@ Items can be bound to a data model so that their expanded and selected states ar - Declaring a tree by creating static unbound items -In order to render a tree you do not necessarily need a data set - individual items can be created without an underlying data model using the exposed `label` property or provide a custom slot content for the `TreeItem` label. +In order to render a tree you do not necessarily need a data set - individual items can be created without an underlying data model using the exposed `Label` property or provide a custom slot content for the `TreeItem` label. ```html @@ -191,16 +191,49 @@ In order to render a tree you do not necessarily need a data set - individual it ### Item Interactions -The `Tree` provides the following API methods for item interactions: +`TreeItem` could be expanded or collapsed: +- by clicking on the item expand indicator *(default behavior)*. +- by clicking on the item if the `Tree` `ToggleNodeOnClick` property is set to `true`. -- `expand` - expands all items. If an items array is passed, expands only the specified items. -- `collapse` - collapses all items. If an items array is passed, collapses only the specified items. -- `select` - selects all items. If an items array is passed, selects only the specified items. Does not emit `Selection` event. -- `deselect` - deselects all items. If an items array is passed, deselects only the specified items. Does not emit `Selection` event. +```html + + + + + + + + + + +``` + +By default, multiple items could be expanded at the same time. In order to change this behavior and allow expanding only single branch at a time, the `SingleBranchExpand` property could be enabled. This way when an item is expanded, all of the others already expanded branches in the same level will be collapsed. + +```html + + + + + + + + + + +``` + +In addition, the `Tree` provides the following API methods for item interactions: + +- `Tree.Expand` - expands all items. If an items array is passed, expands only the specified items. +- `Tree.Collapse` - collapses all items. If an items array is passed, collapses only the specified items. +- `Tree.Select` - selects all items. If an items array is passed, selects only the specified items. Does not emit `selection` event. +- `Tree.Deselect` - deselects all items. If an items array is passed, deselects only the specified items. Does not emit `selection` event. + ## {Platform} Tree Selection -In order to setup item selection in the {ProductName} Tree component, you just need to set its `selection` property. This property accepts the following three modes: **None**, **Multiple** and **Cascade**. Below we will take a look at each of them in more detail. +In order to setup item selection in the {ProductName} Tree component, you just need to set its `Selection` property. This property accepts the following three modes: **None**, **Multiple** and **Cascade**. Below we will take a look at each of them in more detail. ### None @@ -208,7 +241,7 @@ In the `Tree` by default item selection is disabled. Users cannot select or dese ### Multiple -To enable multiple item selection in the `Tree` just set the `selection` property to **multiple**. This will render a checkbox for every item. Each item has two states - selected or not. This mode supports multiple selection. +To enable multiple item selection in the `Tree` just set the `Selection` property to **multiple**. This will render a checkbox for every item. Each item has two states - selected or not. This mode supports multiple selection. ```html diff --git a/doc/en/components/inputs/combo/single-selection.md b/doc/en/components/inputs/combo/single-selection.md index 690cafdac..24f662e5e 100644 --- a/doc/en/components/inputs/combo/single-selection.md +++ b/doc/en/components/inputs/combo/single-selection.md @@ -9,7 +9,7 @@ mentionedTypes: ['Combo', 'Single Selection Combo', 'ComboItem', 'ComboHeader', The {Platform} `ComboBox` supports single-selection mode and quick filtering of the list of items via the main input prompt. Users can quickly type in the item they are looking for and be presented with a list of options. Upon pressing the enter key, the first highlighted match will be selected. -## {Platform} Single Selectoin Example +## {Platform} Single Selection Example To enable single-selection and quick filtering, set the `SingleSelect` property on the `ComboBox` component. The user experience and keyboard navigation will mostly stay the same, but instead of having to type in your search query into a special filtering box above the list of options, the main input box will be used. diff --git a/doc/en/components/inputs/mask-input.md b/doc/en/components/inputs/mask-input.md index 4089e0f73..dbc1f08b9 100644 --- a/doc/en/components/inputs/mask-input.md +++ b/doc/en/components/inputs/mask-input.md @@ -39,7 +39,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the `Mask Input`, its necessary CSS, and register its module, like so: +You will then need to import the `MaskInput`, its necessary CSS, and register its module, like so: ```tsx import { IgrMaskInput, IgrMaskInputModule } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; diff --git a/doc/en/components/layouts/accordion.md b/doc/en/components/layouts/accordion.md index b6d1e13fc..d3b2c72a9 100644 --- a/doc/en/components/layouts/accordion.md +++ b/doc/en/components/layouts/accordion.md @@ -45,6 +45,31 @@ For a complete introduction to the {ProductName}, read the [*Getting Started*](. + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the `Accordion` and the `ExpansionPanel`, its necessary CSS, and register its module, like so: + +```tsx +import { + IgrAccordion, + IgrAccordionModule, + IgrExpansionPanel, + IgrExpansionPanelModule, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +IgrAccordionModule.register(); +IgrExpansionPanelModule.register(); +``` + + + Before using the `Accordion`, you need to register it as follows: ```razor @@ -72,7 +97,7 @@ Panels provide `Disabled` and `Open` properties, which give you the ability to c ### Declaring an Accordion -The accordion wraps all expansion panel`s declared inside it. +The accordion wraps all expansion panels declared inside it. ```html @@ -108,6 +133,19 @@ The accordion wraps all expansion panel`s declared inside it. ``` +```tsx + + +
Title Panel 1
+
Content Panel 1
+
+ +
Title Panel 2
+
Content Panel 2
+
+
+``` + Using the `Panels` accessor you can get a reference to the collection containing all expansion panels children of the `Accordion`. @@ -123,6 +161,7 @@ constructor() { ``` + As demonstrated above, the `SingleExpand`property gives you the ability to set whether single or multiple panels can be expanded at a time. By using the `HideAll` and `ShowAll` methods you can respectively collapse and expand all `ExpansionPanel`s of the `Accordion` programmatically. diff --git a/doc/en/components/layouts/expansion-panel.md b/doc/en/components/layouts/expansion-panel.md index 16ab571f2..9495afcc6 100644 --- a/doc/en/components/layouts/expansion-panel.md +++ b/doc/en/components/layouts/expansion-panel.md @@ -130,7 +130,7 @@ The `ExpansionPanel` control allows all sorts of content to be added inside of i The `ExpansionPanel` allows for easy customization of the header through the exposed *title*, *subTitle* and *indicator* slots. -Configuring the position of the expansion indicator can be done through the `indicatorAlignment` property of the Expansion Panel. The possible options are **start**, **end** or **none**. +Configuring the position of the expansion indicator can be done through the `IndicatorPosition` property of the Expansion Panel. The possible options are **start**, **end** or **none**. The next code sample demonstrates how to configure the component's button to go on the *right* side. diff --git a/doc/en/components/layouts/stepper.md b/doc/en/components/layouts/stepper.md index 5adbc02f5..d24e27d07 100644 --- a/doc/en/components/layouts/stepper.md +++ b/doc/en/components/layouts/stepper.md @@ -10,9 +10,9 @@ The {Platform} Stepper Component provides a wizard-like workflow and is used for ## {Platform} Stepper Example -The following {ProductName} Stepper Example below shows the component in action. It visualizes the process that an end-user must pass through to change the credentials of their credit card, following several consecutive steps. +The following {ProductName} Stepper Example below shows the component in action. It visualizes the process that an end-user must pass through to configure an order details, following several consecutive steps. -`sample="/layouts/stepper/overview", height="725", alt="{Platform} Stepper Example"` +`sample="/layouts/stepper/linear", height="430", alt="{Platform} Linear Stepper Example"`
@@ -37,6 +37,24 @@ defineComponents(IgcStepperComponent); For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. + + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the `Stepper`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrStepperModule, IgrStepper, IgrStep } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +IgrStepperModule.register(); +``` + + ```razor // in Program.cs file @@ -58,7 +76,7 @@ You will also need to link an additional CSS file to apply the styling to the `S Now you can start with a basic configuration of the {Platform} `Stepper` and its steps. ## How To Use {Platform} Stepper -The `Step` is the representation of every step that belongs to the `Stepper`. Steps provide `Invalid`, `Active`, `Optional`, `Disabled` and `Complete` properties, which give you the ability to configure the step states according to your business requirement. +The `Step` is the representation of every step that belongs to the `Stepper`. Steps provide `Step.Invalid`, `Step.Active`, `Step.Optional`, `Step.Disabled` and `Step.Complete` properties, which give you the ability to configure the step states according to your business requirement. ### Declaring {Platform} Stepper Steps can be declared using one of the following approaches. @@ -89,6 +107,16 @@ Steps can be declared using one of the following approaches. ``` +```tsx + + {this.StepsData.map(item => + +

{item.title}

+
+ } +
+``` + - Creating static steps ```html @@ -112,6 +140,17 @@ Steps can be declared using one of the following approaches. ``` + +```tsx + + +

Step 1

+
+ +

Step 2

+
+
+``` For each step the user has the ability to configure indicator, title and subtitle using the `Indicator`, `Title` and `Subtitle` slots as follows: > [!Note] @@ -143,6 +182,20 @@ For each step the user has the ability to configure indicator, title and subtitl ``` + +```tsx + + + +

Home

+

Home Sub Title

+
+ Step Content + ... +
+
+
+``` ### Orientation in {Platform} Stepper @@ -165,23 +218,6 @@ The sample below demonstrates how stepper orientation and titles position could -
- -### Stepper Animations - -The {Platform} `Stepper` Animations provide the end-users with a beautiful experience interacting with the defined steps. The available animation options differ depending on the orientation of the stepper. - -When the stepper is horizontally orientated, it is configured to use the `slide` animation by default. It also supports `fade` as an alternative. The animations are configured through the `horizontalAnimation` input. - -In a vertically orientated layout, the animation type could be defined using the `verticalAnimation` property. By default, its value is set to `grow` and the user has the ability to set it to `fade` as well. - -Setting `none` to both animation type inputs disables stepper animations. - -The `Stepper` component also gives you the ability to configure the duration of the transition between the steps. This could be achieved through the `animationDuration` property, which takes a number as an argument and it is common to both orientations. The default value is set to 320ms. - -`sample="/layouts/stepper/animations", height="600", alt="{Platform} Stepper Animations Example"` - -
### Step States @@ -196,20 +232,46 @@ The `Stepper` component also gives you the ability to configure the duration of The {Platform} `Stepper` gives you the opportunity to set its steps flow using the `Linear` property. By default, linear is set to *false* and the user is enabled to select any non-disabled step in the `Stepper`. -When the linear property is set to *true*, the stepper will require the current non-optional step to be valid before proceeding to the next one. - -If the current non-optional step is not valid you cannot go forward to the next step until you validate the current one. -> [!Note] -> Optional steps validity is not taken into account in order to move forward. +```html + + +

Step 1

+
+ +

Step 2

+
+
+``` -The following example demonstrates how to configure a linear stepper: +```razor + + +

Step 1

+
+ +

Step 2

+
+
+``` -`sample="/layouts/stepper/linear", height="430", alt="{Platform} Linear Stepper Example"` +```tsx + + +

Step 1

+
+ +

Step 2

+
+
+``` +When the linear property is set to *true*, the stepper will require the current non-optional step to be valid before proceeding to the next one. +If the current non-optional step is not valid you cannot go forward to the next step until you validate the current one. -
+> [!Note] +> Optional steps validity is not taken into account in order to move forward. ### Step Interactions @@ -269,9 +331,25 @@ The sample below demonstrates all exposed step types and how they could be chang `sample="/layouts/stepper/steptypes", height="300", alt="{Platform} Step Types Example"` +
+ + +### Stepper Animations +The {Platform} `Stepper` Animations provide the end-users with a beautiful experience interacting with the defined steps. The available animation options differ depending on the orientation of the stepper. + +When the stepper is horizontally orientated, it is configured to use the `slide` animation by default. It also supports `fade` as an alternative. The animations are configured through the `HorizontalAnimation` input. + +In a vertically orientated layout, the animation type could be defined using the `VerticalAnimation` property. By default, its value is set to `grow` and the user has the ability to set it to `fade` as well. + +Setting `none` to both animation type inputs disables stepper animations. + +The `Stepper` component also gives you the ability to configure the duration of the transition between the steps. This could be achieved through the `animationDuration` property, which takes a number as an argument and it is common to both orientations. The default value is set to 320ms. + +`sample="/layouts/stepper/animations", height="600", alt="{Platform} Stepper Animations Example"`
+ ## Keyboard Navigation diff --git a/doc/en/components/nextjs-usage.md b/doc/en/components/nextjs-usage.md new file mode 100644 index 000000000..e8ac11691 --- /dev/null +++ b/doc/en/components/nextjs-usage.md @@ -0,0 +1,266 @@ +--- +title: Use {ProductName} components in Next.js application | Infragistics +_description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest {Platform} data grid and charts in Next.js. +_keywords: {ProductName} Next.js, {ProductName} Components in Next.js, Infragistics +mentionedTypes: [] +--- + +# Integrating {ProductName} with Next.js + +Explore the seamless integration of {ProductName} into your Next.js project. This topic is crafted to help developers make the most of the Infragistics {Platform} components while leveraging the features of Next.js for building robust and performant full stack applications. + +## Prerequisites + +1. Install NodeJS. +2. Install Visual Studio Code. + + + +## Creating New Next.js Project + +With above prerequisites installed, we can create a new Next.js application. + +1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option. + +2 - Type the following commands in terminal window: + +```cmd +npx create-next-app@latest MyAppName +cd MyAppName +``` + +## Updating Existing Next.js App + +If you want to use {ProductName} in an existing Next.js project (one that you have from before). We have you covered! All you have to do is execute these commands: + +```cmd +npm install --save {PackageCommon} +npm install --save {PackageCharts} {PackageCore} +npm install --save {PackageExcel} {PackageCore} +npm install --save {PackageGauges} {PackageCore} +npm install --save {PackageGrids} {PackageCore} +npm install --save {PackageMaps} {PackageCore} +npm install --save {PackageSpreadsheet} {PackageCore} +``` + +Or + +```cmd +yarn add {PackageCharts} {PackageCore} +yarn add {PackageExcel} {PackageCore} +yarn add {PackageGauges} {PackageCore} +yarn add {PackageGrids} {PackageCore} +yarn add {PackageMaps} {PackageCore} +yarn add {PackageSpreadsheet} {PackageCore} +``` + +This will automatically install packages for {ProductName}, along with all of their dependencies, font imports and styles references to the existing project. + +## Importing Component Modules + +First we have to import the required modules of the components we want to use. We will go ahead and do this for the [**GeographicMap**](geo-map.md) component. + +```ts +"use client" +import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps'; +import { IgrDataChartInteractivityModule } from 'igniteui-react-charts'; + +IgrGeographicMapModule.register(); +IgrDataChartInteractivityModule.register(); +``` +> [!Note] +> It's important to note that {ProductName} components are using client-only features like state and browser events. Infragistics' components will work as expected within Client Next.js Components since they have the "use client" directive, but they won't work within Server Components. + +## Using Components + +We are now ready to use the {ProductName} map component in our Next.js component! Let's go ahead and define it: + +```tsx +function App() { + return ( +
+ +
+ ); +} +``` + +## Running Application + +Finally, we can run our new application by using one of the following commands: + +```cmd +npm run dev +``` + +After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use {ProductName} components in your project. + +The final result should look something like this screenshot: + + + +## Using {Platform} in Next.js Server Components +As mentioned earlier, most components of {Platform} rely on state and browser events, making them incompatible with direct use within Server Components. Nevertheless, if you find the need to use them this way, Infragistics' components can be wrapped within their respective Client Components. + +```tsx +'use client' +import { IgrGeographicMap } from 'igniteui-react-maps'; +IgrGeographicMapModule.register(); + +export default IgrGeographicMap; +``` + +Then, in a Next.js Server Component the IgrGeographicMap can be used directly: + +```tsx +import IgrGeographicMap from './wrapped-geographic-map'; + +function App() { + return ( +
+ +
+ ); +} +``` + +> [!Note] +> The majority of {ProductName} components may remain unwrapped as they are expected to be utilized within other Client Components. Therefore, there is no need to wrap all Infragistics' components. + +## Dynamic import of {ProductName} components + +Enhancing the initial loading performance of an application is facilitated by lazy loading, which reduces the required amount of JavaScript to render a route. It allows you to defer loading of the imported libraries and only include them in the client bundle when needed. Using `next/dynamic` you can implement lazy loading: + +```tsx +"use client"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import dynamic from "next/dynamic"; + +export default function DynamicButtonComponent() { + const IgButton = dynamic( + async () => { + const { IgrButton, IgrButtonModule } = await import("igniteui-react"); + IgrButtonModule.register(); + return IgrButton; + } + ); + + return ( + + Click me + + ); +} +``` + +However, if a more complex component is used like the [**IgrGrid**](grids/data-grid.md), which typically contains child components, it is essential not to dynamically import each and every child component. The component should be used like this: + +```tsx +"use client"; +import dynamic from "next/dynamic"; +import CustomersDataLocal from "./CustomersDataLocal.json"; +import "igniteui-react-grids/grids/combined"; +import "igniteui-react-grids/grids/themes/light/bootstrap.css"; + +export default function GridDynamicComponent() { + const IgnGrid = dynamic( + async () => { + const { + IgrGrid, + IgrGridModule, + IgrColumn, + IgrGridToolbar, + IgrGridToolbarTitle, + IgrGridToolbarActions, + IgrGridToolbarPinning, + } = await import("igniteui-react-grids"); + IgrGridModule.register(); + + const IgGrid = ({ ...props }) => { + return ( + + + + + + + + + + + + + + + + + + + ); + }; + return IgGrid; + } + ); + + return ; +} +``` + +> [!Note] +> Implementing lazy loading for components can enhance performance, but it is advisable to use it exclusively when the components are not immediately visible on the page. + +## Additional Resources + +* [Ignite UI for React](../components/general-getting-started.md) +* [Grid Overview](../components/grids/data-grid.md) +* [Next.js Documentation](https://nextjs.org/docs) + +Our community is active and always welcoming to new ideas. + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/notifications/dialog.md b/doc/en/components/notifications/dialog.md index 45a03283e..f24b876e2 100644 --- a/doc/en/components/notifications/dialog.md +++ b/doc/en/components/notifications/dialog.md @@ -34,6 +34,25 @@ import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents'; defineComponents(IgcDialogComponent); ``` + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the {Platform} `Dialog`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrDialogModule, IgrDialog } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrDialogModule.register(); +``` + + + For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. @@ -84,6 +103,27 @@ The simplest way to display the dialog component is to use its `Show` method and ``` +```tsx + + Show Dialog + + + + Dialog Message + + +public onDialogRef(dialog: IgrDialog) { + if (!dialog) { return; } + this.dialogRef = dialog; +} + +public onDialogShow() { + if (this.dialogRef) { + this.dialogRef.show(); + } +} +``` + The Dialog component provides an `Open` property, which gives you the ability to configure its state as per your application scenario. Use the `Title` property to set the title of the dialog. However, if any content is provided in the `title` slot, it will take precedence over the property. @@ -96,11 +136,11 @@ By default, the Dialog is closed automatically when the user presses `ESC`. You Use the `CloseOnOutsideClick` property to configure if the dialog should be closed when clicking outside of it. The default value is **false**. - + `sample="/notifications/dialog/closing-variations", height="400", alt="{Platform} Dialog Closing Variations"` - + ### Form diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index d3a6e1845..f2936624a 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -390,6 +390,11 @@ The radial gauge labels are visual elements displaying numeric values at a speci `sample="/gauges/radial-gauge/labels", height="320", alt="{Platform} radial gauge labels"` +## Optical Scaling + +The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000. + +`sample="/gauges/radial-gauge/optical-scaling", height="500", alt="{Platform} radial gauge optical scaling"` ## Tick Marks Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the `Interval` between the `MinimumValue` and `MaximumValue` properties. Use the `MinorTickCount` property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to `TickStartExtent`, `TickEndExtent`, `MinorTickStartExtent`, and `MinorTickEndExtent` properties. diff --git a/doc/en/images/hgrid-database.jpg b/doc/en/images/hgrid-database.jpg new file mode 100644 index 000000000..bf1a3bb3d Binary files /dev/null and b/doc/en/images/hgrid-database.jpg differ diff --git a/doc/en/images/stepper/stepper-contentTop.png b/doc/en/images/stepper/stepper-contentTop.png index 06644fc04..a17b6e510 100644 Binary files a/doc/en/images/stepper/stepper-contentTop.png and b/doc/en/images/stepper/stepper-contentTop.png differ diff --git a/doc/en/images/unfold_less_icon_screenshot.jpg b/doc/en/images/unfold_less_icon_screenshot.jpg new file mode 100644 index 000000000..e3aaf7518 Binary files /dev/null and b/doc/en/images/unfold_less_icon_screenshot.jpg differ diff --git a/doc/jp/components/charts/features/chart-data-legend.md b/doc/jp/components/charts/features/chart-data-legend.md index f49504363..5f9adf992 100644 --- a/doc/jp/components/charts/features/chart-data-legend.md +++ b/doc/jp/components/charts/features/chart-data-legend.md @@ -106,19 +106,13 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha `sample="/charts/financial-chart/data-legend-formatting-currency", height="450", alt="{Platform} 通貨の書式設定"` +`XamDataLegend` には、値が更新されているマウス操作中であっても、対応する行を描画するときに発生するいくつかのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します: - -## {Platform} データ凡例のスタイル設定イベント - -`XamDataLegend` には、対応する行を描画するときに発生する 5 つのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します: - -- `StyleHeaderRow`: このイベントは、ヘッダー行を描画するときに 1 回発生します。 - `StyleSeriesRow`: このイベントは、シリーズの行ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。 - `StyleSeriesColumn`: このイベントは、シリーズの列ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。 - `StyleSummaryRow`: このイベントは、集計行を描画するときに 1 回発生します。 - `StyleSummaryColumn`: このイベントは、集計列を描画するときに 1 回発生します。 -上記の各イベントは、引数として `DataLegendStylingRowEventArgs` パラメーターを公開します。これにより、各項目のテキスト、テキストの色、および行の全体的な可視性をカスタマイズできます。イベント引数は、イベント固有のプロパティも公開します。たとえば、`StyleSeriesRow` イベントはシリーズごとに発生するため、イベント引数は、シリーズを表す行の、シリーズ インデックスとシリーズ タイトルを返します。 ## API リファレンス diff --git a/doc/jp/components/charts/features/chart-data-tooltip.md b/doc/jp/components/charts/features/chart-data-tooltip.md index e9984a672..6e86d0968 100644 --- a/doc/jp/components/charts/features/chart-data-tooltip.md +++ b/doc/jp/components/charts/features/chart-data-tooltip.md @@ -72,18 +72,7 @@ _language: ja `sample="/charts/financial-chart/data-tooltip", height="450", alt="{Platform} ファイナンシャル チャート データ ツールチップの例"` - -## {Platform} データ ツールチップのスタイル設定 - -**DataToolTip** は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、`DataToolTipTitleTextColor`、`DataToolTipLabelTextColor`、`DataToolTipValueTextColor`、および `DataToolTipUnitsTextColor` プロパティを設定します。 - -次の例は、上記のスタイル設定プロパティの使用法を示しています。 - -`sample="/charts/financial-chart/data-tooltip-styling-props", height="450", alt="{Platform} ファイナンシャル チャート データ ツールチップのスタイル設定"` - - - -## {Platform} データ ツールチップのグループ化と配置 +## {Platform} カテゴリ チャート & ファイナンシャル チャートのデータ ツールチップのグループ化と配置 `DataToolTipGroupingMode` プロパティを `Grouped` または `Individual` に設定して、複数のシリーズのコンテンツを 1 つのツールチップにグループ化するか、各シリーズのコンテンツを複数のツールチップに分割することができます。`Grouped` モードでは、`DataToolTipGroupedPositionModeX` プロパティと `DataToolTipGroupedPositionModeY` プロパティを設定することにより、ツールチップが表示される場所をカスタマイズできます。これにより、ツールチップの水平方向と垂直方向の配置を、マウス位置に最も近いシリーズ ポイントに追従させるか、プロット領域の端に固定するかをカスタマイズできます。 @@ -105,12 +94,10 @@ _language: ja ## {Platform} データ ツールチップの値モード -レイヤーの `DataToolTipValueFormatMode` プロパティを変更することにより、**DataToolTip** 内の値のデフォルトの 10 進表示を通貨表示に変更できます。**DataToolTip** は、`DataToolTipValueFormatCulture` プロパティを使用し、対応するカルチャ タグに設定することにより、表示されている通貨記号のカルチャを変更する機能も公開します。たとえば、次のサンプルは、`DataToolTipValueFormatCulture` が「en-GB」に設定されたチャートを示しています。 +レイヤーの `DataToolTipValueFormatMode` プロパティを変更することにより、**DataToolTip** 内の値のデフォルトの 10 進表示を通貨表示に変更できます。**DataToolTip** は、`DataToolTipValueFormatCulture` プロパティを使用し、対応するカルチャ タグに設定することにより、表示されている通貨記号のカルチャを変更する機能も公開します。たとえば、次のサンプルは、`DataToolTipValueFormatCulture` が 「en-GB」 に設定されたチャートを示しています。 `sample="/charts/financial-chart/data-tooltip-formatting-currency", height="450", alt="{Platform} ファイナンシャル チャート データ ツールチップの通貨の書式設定"` - - ## API リファレンス - `DataToolTipExcludedColumns` diff --git a/doc/jp/components/charts/features/chart-highlighting.md b/doc/jp/components/charts/features/chart-highlighting.md index bbc4210e9..3d3e5bb53 100644 --- a/doc/jp/components/charts/features/chart-highlighting.md +++ b/doc/jp/components/charts/features/chart-highlighting.md @@ -7,17 +7,11 @@ namespace: Infragistics.Controls.Charts _language: ja --- -# {Platform} チャート強調表示 - -すべての {Platform} チャートは、エンド ユーザーがプロット領域に描画されたデータ項目の上にマウス カーソルを置いたときに、線、列、マーカーなどのビジュアルの強調表示をサポートします。強調表示は、`CategoryChart`、`FinancialChart`、および `XamDataChart` コントロールによってサポートされており、強調表示機能を使用するための同じ API を備えています。 - ## {Platform} チャート強調表示の例 -以下の例は、{Platform} チャートで使用できるさまざまな強調表示オプションを示しています。チェックボックスをクリックして強調表示タイプを有効にします。 - -`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} チャート強調表示の例"` - +以下の例は、{Platform} チャートで使用できるさまざまな強調表示オプションを示しています。 +`sample="/charts/category-chart/annotations-highlighting", height="500", alt="{Platform} チャート強調表示の例"`
@@ -25,10 +19,22 @@ _language: ja すべての {Platform} チャートは、さまざまな強調表示オプションをサポートしています。`HighlightingMode` は、プロット領域に描画されたシリーズ/データ項目にマウスを合わせたときに明るくまたはフェードするように設定できます。`HighlightingBehavior` は、強調表示の効果をトリガーするために、直接または最も近いデータ項目に設定できます。強調表示のモードと動作は、`CategoryChart`、`FinancialChart`、および `XamDataChart` コントロールでサポートされており、強調表示機能を使用するための同じ API を備えています。 +以下の例は、`HighlightingMode` {Platform} チャートを示しています。 + +`sample="/charts/category-chart/highlighting-mode", height="500", alt="{Platform} 強調表示モードの例"` + +以下の例は、`HighlightingBehavior` {Platform} チャートを示しています。 + +`sample="/charts/category-chart/highlighting-behavior", height="500", alt="{Platform} 強調表示モードの例"` + # {Platform} チャート凡例の強調表示 すべての {Platform} チャートは、凡例の強調表示をサポートしています。`LegendHighlightingMode` を有効にすると、マウスが凡例マーカー項目にカーソルを合わせると、描画されたシリーズがプロット領域で強調表示されます。凡例の強調表示は、`CategoryChart`、`FinancialChart`、および `XamDataChart` コントロールでサポートされており、強調表示機能を使用するための同じ API を備えています。 +以下の例は、凡例シリーズ強調表示の {Platform} チャートを示しています。 + +`sample="/charts/category-chart/legend-highlighting", height="500", alt="{Platform} 強調表示モードの例"` + ## 強調表示レイヤー {ProductName} `CategoryChart` は、データ項目にカーソルを合わせると 3 種類の強調表示を有効にできます。 @@ -39,6 +45,11 @@ _language: ja 3. カテゴリ ハイライトはすべてのカテゴリ軸を対象にします。カーソル位置に最も近い軸領域を照らす図形を描画します。これは、`IsCategoryHighlightingEnabled` プロパティを true に設定することで有効になります。 +以下の例は、{Platform} チャートで使用できるさまざまな強調表示レイヤーを示しています。 + +`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} 強調表示の例"` + + ## その他のリソース 関連するチャートタイプの詳細については、以下のトピックを参照してください。 diff --git a/doc/jp/components/charts/types/pie-chart.md b/doc/jp/components/charts/types/pie-chart.md index b169261d5..36fa91cd8 100644 --- a/doc/jp/components/charts/types/pie-chart.md +++ b/doc/jp/components/charts/types/pie-chart.md @@ -100,7 +100,7 @@ _language: ja
## {Platform} 円チャートの選択 -デフォルトで、円チャートはマウス クリックによるスライス選択をサポートします。選択されたスライスは、`SelectedItems` プロパティで取得します。選択したスライスがハイライトされます。 +デフォルトで、円チャートはマウス クリックによるスライス選択をサポートします。選択されたスライスは、`SelectedItems` プロパティで取得します。選択したスライスが強調表示されます。 円チャートのモードは `SelectionMode` プロパティで設定します。デフォルト値は `Single` です。選択機能を無効化するためにはプロパティを `Manual` に設定します。 diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index ea66ff76e..7855e5234 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -2,34 +2,107 @@ title: {Platform} 新機能 | {ProductName} | インフラジスティックス _description: {ProductName} の新機能について学んでください。 _keywords: Changelog, What's New, {ProductName}, Infragistics, 変更ログ, 新機能, インフラジスティックス -_language: ja -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "Infragistics.Controls.DataGridCellEventArgs", "Infragistics.Controls.GridBaseDirective", "MaskInput", "Shape", "RoundShape"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "Infragistics.Controls.DataGridCellEventArgs", "Infragistics.Controls.GridBaseDirective", "MaskInput", "Shape", "RoundShape", "XamRadialGauge, XamLinearGauge, XamBulletGraph, XamTreemap", "XamRadialChart"] sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"] namespace: Infragistics.Controls.Charts +_language: ja --- # {ProductName} 変更ログ {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-23-2-APR2}** + +- `XamBulletGraph` + - `HighlightValueDisplayMode` が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい `HighlightValue` の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットの測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。 +- `XamLinearGauge` + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamRadialGauge` + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamTreemap` + - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる `HighlightingMode` プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、`HighlightingTransitionDuration` プロパティを使用して制御できます。 + +## **{PackageVerChanges-23-2-APR}** + +- `バグ修正` + +## **{PackageVerChanges-23-2-MAR}** + +### 新しいコンポーネント + +- [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) コンポーネント +- `Textarea` コンポーネント +- `ButtonGroup` コンポーネント + +### 新機能 + +- `DockManager` + - 新しい `ProximityDock` プロパティ。有効にすると、ドッキング インジケーターは表示されなくなり、エンド ユーザーは、ドラッグしたペインをターゲット ペインの端に近づけてドラッグすることでドッキングできます。 + - 新しい `ContainedInBoundaries` プロパティ。フローティング ペインを Dock Manager の境界内に保持するかどうかを決定します。デフォルトは **false** です。 + - 新しい `ShowPaneHeaders` プロパティ。ペインのヘッダーをホバー時にのみ表示するか、常に表示するかを決定します。デフォルトは `always` です。 +- `Tree` + - ノードをクリックすると展開状態が変更されるかどうかを決定する `toggleNodeOnClick` プロパティが追加されました。デフォルトは **false** です。 +- `Rating` + - `allowReset` が追加されました。有効にすると、同じ値を選択するとコンポーネントがリセットされます。**動作の変更** - 以前のリリースでは、これが Rating コンポーネントのデフォルトの動作でした。アプリケーションでこの動作を維持する必要がある場合は、必ず `allowReset` を設定してください。 +- `Select`、`Dropdown` + - `selectedItem`、`items`、および `groups` ゲッターが公開されました。 +- `XamRadialGauge` + - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 + - `XamRadialGauge` の新しい `OpticalScalingEnabled` プロパティと `OpticalScalingSize` プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。 + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamRadialChart` + - 新しいラベル モード + `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 + +### 一般 + +- `Input`、`MaskInput`、`DateTimeInput`、`Rating` + - `Readonly` は `ReadOnly` に名前が変更されました。 +- `Input` + - `Maxlength` は `MaxLength` に名前が変更されました。 + - `Minlength` は `MinLength` に名前が変更されました。 + +### 非推奨 + +- `size` プロパティと属性は、すべてのコンポーネントで非推奨になりました。代わりに `--ig-size` CSS カスタム プロパティを使用してください。次の例では、Avatar コンポーネントのサイズを小さく設定します: + ```css + .avatar { + --ig-size: var(--ig-size-small); + } + ``` +- `DateTimeInput` + - `MinValue` および `MaxValue` プロパティは非推奨になりました。代わりに `Min` および `Max` を使用してください。 +- `RangeSlider` + - `AriaLabelLower` および `AriaLabelUpper` プロパティは非推奨になりました。代わりに `ThumbLabelLower` および `ThumbLabelUpper` を使用してください。 + +### 削除済 + +- デフォルトの属性を隠していた独自の `dir` 属性が削除されました。これは互換性のある変更です。 +- `Slider` - `ariaLabel` シャドウ プロパティ。これは互換性のある変更です。 +- `Checkbox` - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- `Switch` - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- `Radio` - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 + ## **{PackageVerChanges-23-2-JAN}** ### .NET 8.0 のサポート * 2023.2 リリースでは .NET 8 がサポートされます。.NET 8 の詳細については、[Microsoft サイト](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-8)をご確認ください。 -### {PackageCharts} チャート +### {PackageCharts} (チャート) -* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `DataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 +* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `XamDataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 ## **{PackageVerChanges-23-2}** ### {PackageGrids} (Toolbar - ベータ版) -* クリップボードを介してチャートを画像に保存するための新しいツールがデフォルトのツールとして追加されました。 +* クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 * ツールバーの `Orientation` プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 * ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 ### {PackageGrids} (Grid) + * 新規機能: - [状態保持](grids/grid/state-persistence.md) @@ -39,7 +112,7 @@ namespace: Infragistics.Controls.Charts * [Toolbar](menus/toolbar.md) - ベータ版。このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、`XamDataChart` または `CategoryChart` コンポーネントにリンクされると、プロパティとツールのプリセットで動的に更新されますが、プロジェクト用のカスタム ツールを作成する機能も提供します。 -### {PackageCharts} チャート +### {PackageCharts} (チャート) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - `ValueLayer` という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい `ValueLines` コレクションに追加することで、`CategoryChart` と `FinancialChart` に適用されます。 @@ -97,9 +170,7 @@ namespace: Infragistics.Controls.Charts ### {PackageCharts} (チャート) -デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。 - -これらの新しいチャートの改善点は次のとおりです: +デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです: * ブラウザー / 画面サイズに基づいた水平ラベル回転のレスポンシブ レイアウト。 * すべてのプラットフォームでの丸型ラベルの描画が強化されました。 @@ -141,7 +212,7 @@ namespace: Infragistics.Controls.Charts * 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、`Legend` とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。 * 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。 * 積層シリーズのアニメーションとトランジションインのサポートが追加されました。`IsTransitionInEnabled` プロパティを true に設定すると、アニメーションを有効にできます。そこから、`TransitionInDuration` プロパティを設定してアニメーションが完了するまでの時間を決定し、`TransitionInMode` でアニメーションのタイプを決定できます。 -* 追加された `AssigningCategoryStyle` イベントは、`DataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 +* 追加された `AssigningCategoryStyle` イベントは、`XamDataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 * CalloutLayer の新しい `AllowedPositions` 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。 * 注釈レイヤーに追加された新しいコーナー半径プロパティ。各コールアウトのコーナーを丸めるために使用されます。コーナー半径がデフォルトで追加されていることに注意してください。 - CalloutLayer の `CalloutCornerRadius` @@ -155,10 +226,7 @@ namespace: Infragistics.Controls.Charts ### {PackageGrids} (データ グリッド) -* 新規機能: -- [行のページング](grids/data-grid/row-paging.md) - -ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 +新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 ### {PackageDockManager} (DockManager) @@ -268,7 +336,7 @@ namespace: Infragistics.Controls.Charts #### チャートとマップ -このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`DataChart`、`CategoryChart`、および `FinancialChart`。 +このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`XamDataChart`、`CategoryChart`、および `FinancialChart`。 * 棒/縦棒/ウォーターフォール シリーズを、角丸ではなく角が四角になるように変更しました。 * heat min プロパティの 散布高密度シリーズの色を #8a5bb1 から #000000 に変更しました。 diff --git a/doc/jp/components/general-changelog-dv-react.md b/doc/jp/components/general-changelog-dv-react.md index 19ba57377..bbf795f94 100644 --- a/doc/jp/components/general-changelog-dv-react.md +++ b/doc/jp/components/general-changelog-dv-react.md @@ -2,33 +2,97 @@ title: {Platform} 新機能 | {ProductName} | インフラジスティックス _description: {ProductName} の新機能について学んでください。 _keywords: Changelog, What's New, {ProductName}, Infragistics, 変更ログ, 新機能, インフラジスティックス -_language: ja -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Grid", "GridSelectionMode", DataGridCellEventArgs, DataGridSelectionMode, DataSourceSummaryOperand] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Grid", "GridSelectionMode", DataGridCellEventArgs, DataGridSelectionMode, DataSourceSummaryOperand, "XamRadialGauge", "XamRadialChart"] namespace: Infragistics.Controls.Charts +_language: ja --- # {ProductName} 変更ログ {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-23-2-MAR}** + +### {PackageCharts} + +- `XamRadialChart` + - 新しいラベル モード + `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 + +### {PackageGrids} + +- 新しい [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) コンポーネント + +### {PackageGauges} + +- `XamRadialGauge` + - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 + - `XamRadialGauge` の新しい `OpticalScalingEnabled` プロパティと `OpticalScalingSize` プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。 + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamLinearGauge` + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamBulletGraph` + - `HighlightValueDisplayMode` が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい `HighlightValue` の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。 + +### {PackageCommon} + +- 新しい `Textarea` コンポーネント +- 新しい `ButtonGroup` コンポーネント +- `DockManager` + - 新しい `ProximityDock` プロパティ。有効にすると、ドッキング インジケーターは表示されなくなり、エンド ユーザーは、ドラッグしたペインをターゲット ペインの端に近づけてドラッグすることでドッキングできます + - 新しい `ContainedInBoundaries` プロパティ。フローティング ペインを Dock Manager の境界内に保持するかどうかを決定します。デフォルトは **false** です。 + - 新しい `ShowPaneHeaders` プロパティ。ペインのヘッダーをホバー時にのみ表示するか、常に表示するかを決定します。デフォルトは `always` です。 +- `Input`、`MaskInput`、`DateTimeInput`、`Rating` + - `Readonly` は `ReadOnly` に名前が変更されました。 +- `Input` + - `Maxlength` は `MaxLength` に名前が変更されました。 + - `Minlength` は `MinLength` に名前が変更されました。 +- `Tree` + - ノードをクリックすると展開状態が変更されるかどうかを決定する `toggleNodeOnClick` プロパティが追加されました。デフォルトは **false** です。 +- `Rating` + - `allowReset` が追加されました。有効にすると、同じ値を選択するとコンポーネントがリセットされます。**動作の変更** - 以前のリリースでは、これが Rating コンポーネントのデフォルトの動作でした。アプリケーションでこの動作を維持する必要がある場合は、必ず `allowReset` を設定してください。 +- `Select`、`Dropdown` + - `selectedItem`、`items`、および `groups` ゲッターが公開されました。 + +#### 非推奨 + +- `Form` コンポーネントは非推奨になりました。代わりにネイティブのフォーム要素を使用してください。 +- `size` プロパティと属性は、すべてのコンポーネントで非推奨になりました。代わりに `--ig-size` CSS カスタム プロパティを使用してください。次の例では、Avatar コンポーネントのサイズを小さく設定します: + ```css + .avatar { + --ig-size: var(--ig-size-small); + } + ``` +- `DateTimeInput` + - `MinValue` および `MaxValue` プロパティは非推奨になりました。代わりに `Min` および `Max` を使用してください。 +- `RangeSlider` + - `AriaLabelLower` および `AriaLabelUpper` プロパティは非推奨になりました。代わりに `ThumbLabelLower` および `ThumbLabelUpper` を使用してください。 + +#### 削除済 + +- デフォルトの属性を隠していた独自の `dir` 属性が削除されました。これは互換性のある変更です。 +- `Slider` - `ariaLabel` シャドウ プロパティ。これは互換性のある変更です。 +- `Checkbox` - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- `Switch` - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- `Radio` - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 + ## **{PackageVerChanges-23-2-JAN}** -### {PackageCharts} チャート +### {PackageCharts} (チャート) -* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `DataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 +* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `XamDataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 ## **{PackageVerChanges-23-2-DEC}** ### {PackageGrids} (Grid) + * 新規機能: - [状態保持](grids/grid/state-persistence.md) ## **{PackageVerChanges-23-2}** -### 新しいコンポーネント - ### {PackageGrids} (Toolbar - ベータ版) -* クリップボードを介してチャートを画像に保存するための新しいツールがデフォルトのツールとして追加されました。 +* クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 * ツールバーの `Orientation` プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 * ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 @@ -36,7 +100,7 @@ namespace: Infragistics.Controls.Charts ### 非推奨のコンポーネント -> [DataGrid](grids/data-grid/overview.md) - DataGrid は非推奨です。[Grid](grids/data-grid.md) を参照してください。 +> [DataGrid](grids/data-grid/overview.md) - DataGrid は非推奨です。[Grid](grids/data-grid.md) を使用してください。 ## **{PackageVerChanges-23-1}** @@ -44,7 +108,7 @@ namespace: Infragistics.Controls.Charts * [Toolbar](menus/toolbar.md) - ベータ版。このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、`XamDataChart` または `CategoryChart` コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。 -### {PackageCharts} チャート +### {PackageCharts} (チャート) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - `ValueLayer` という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい `ValueLines` コレクションに追加することで、`CategoryChart` と `FinancialChart` に適用されます。 @@ -52,9 +116,7 @@ namespace: Infragistics.Controls.Charts ## **{PackageVerChanges-22-2}** -デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。 - -これらの新しいチャートの改善点は次のとおりです: +デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです: * ブラウザー / 画面サイズに基づいた水平ラベル回転のレスポンシブ レイアウト。 * すべてのプラットフォームでの丸型ラベルの描画が強化されました。 @@ -95,7 +157,7 @@ namespace: Infragistics.Controls.Charts * 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、`Legend` とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。 * 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。 * 積層シリーズのアニメーションとトランジションインのサポートが追加されました。`IsTransitionInEnabled` プロパティを true に設定すると、アニメーションを有効にできます。そこから、`TransitionInDuration` プロパティを設定してアニメーションが完了するまでの時間を決定し、`TransitionInMode` でアニメーションのタイプを決定できます。 -* 追加された `AssigningCategoryStyle` イベントは、`DataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 +* 追加された `AssigningCategoryStyle` イベントは、`XamDataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 * CalloutLayer の新しい `AllowedPositions` 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。 * 注釈レイヤーに追加された新しいコーナー半径プロパティ。各コールアウトのコーナーを丸めるために使用されます。コーナー半径がデフォルトで追加されていることに注意してください。 - CalloutLayer の `CalloutCornerRadius` @@ -109,10 +171,7 @@ namespace: Infragistics.Controls.Charts ### {PackageGrids} (データ グリッド) -* 新規機能: -- [行のページング](grids/data-grid/row-paging.md) - -ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 +新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 ## **{PackageVerChanges-21-2.1}** @@ -195,7 +254,7 @@ namespace: Infragistics.Controls.Charts ## **{PackageVerChanges-21-1}** ### {PackageCharts} (チャート) -このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`DataChart`、`CategoryChart`、および `FinancialChart`。 +このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`XamDataChart`、`CategoryChart`、および `FinancialChart`。 * 棒/縦棒/ウォーターフォール シリーズを、角丸ではなく角が四角になるように変更しました。 * heat min プロパティの 散布高密度シリーズの色を #8a5bb1 から #000000 に変更しました。 diff --git a/doc/jp/components/general-changelog-dv-wc.md b/doc/jp/components/general-changelog-dv-wc.md index ac72705ce..bc922885f 100644 --- a/doc/jp/components/general-changelog-dv-wc.md +++ b/doc/jp/components/general-changelog-dv-wc.md @@ -2,23 +2,47 @@ title: {Platform} 新機能 | {ProductName} | インフラジスティックス _description: {ProductName} の新機能について学んでください。 _keywords: Changelog, What's New, {ProductName}, Infragistics, 変更ログ, 新機能, インフラジスティックス -_language: ja -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "XamRadialGauge", "XamRadialChart"] namespace: Infragistics.Controls.Charts +_language: ja --- # {ProductName} 変更ログ {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-23-2-MAR}** + +### {PackageCharts} + +- `XamRadialChart` + - 新しいラベル モード + `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 + +### {PackageGauges} + +- `XamRadialGauge` + - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 + - `XamRadialGauge` の新しい `OpticalScalingEnabled` プロパティと `OpticalScalingSize` プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。 + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamLinearGauge` + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamBulletGraph` + - `HighlightValueDisplayMode` が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい `HighlightValue` の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。 + +### {PackageGrids} + +- 新しい [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) コンポーネント + ## **{PackageVerChanges-23-2-JAN}** -### {PackageCharts} チャート +### {PackageCharts} (チャート) -* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `DataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 +* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `XamDataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 ## **{PackageVerChanges-23-2-DEC}** ### {PackageGrids} (Grid) + * 新規機能: - [状態保持](grids/grid/state-persistence.md) @@ -26,7 +50,7 @@ namespace: Infragistics.Controls.Charts ### {PackageGrids} (Toolbar - ベータ版) -* クリップボードを介してチャートを画像に保存するための新しいツールがデフォルトのツールとして追加されました。 +* クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 * ツールバーの `Orientation` プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 * ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 @@ -36,7 +60,7 @@ namespace: Infragistics.Controls.Charts * [Toolbar](menus/toolbar.md) - ベータ版。このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、`XamDataChart` または `CategoryChart` コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。 -### {PackageCharts} チャート +### {PackageCharts} (チャート) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - `ValueLayer` という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい `ValueLines` コレクションに追加することで、`CategoryChart` と `FinancialChart` に適用されます。 @@ -94,9 +118,7 @@ namespace: Infragistics.Controls.Charts ### {PackageCharts} -デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。 - -これらの新しいチャートの改善点は次のとおりです: +デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです: * ブラウザー / 画面サイズに基づいた水平ラベル回転のレスポンシブ レイアウト。 * すべてのプラットフォームでの丸型ラベルの描画が強化されました。 @@ -137,7 +159,7 @@ namespace: Infragistics.Controls.Charts * 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、`Legend` とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。 * 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。 * 積層シリーズのアニメーションとトランジションインのサポートが追加されました。`IsTransitionInEnabled` プロパティを true に設定すると、アニメーションを有効にできます。そこから、`TransitionInDuration` プロパティを設定してアニメーションが完了するまでの時間を決定し、`TransitionInMode` でアニメーションのタイプを決定できます。 -* 追加された `AssigningCategoryStyle` イベントは、`DataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 +* 追加された `AssigningCategoryStyle` イベントは、`XamDataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 * CalloutLayer の新しい `AllowedPositions` 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。 * 注釈レイヤーに追加された新しいコーナー半径プロパティ。各コールアウトのコーナーを丸めるために使用されます。コーナー半径がデフォルトで追加されていることに注意してください。 - CalloutLayer の `CalloutCornerRadius` @@ -151,10 +173,7 @@ namespace: Infragistics.Controls.Charts ### {PackageGrids} (データ グリッド) -* 新規機能: -- [行のページング](grids/data-grid/row-paging.md) - -ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 +新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 ### 新しいコンポーネント @@ -298,7 +317,7 @@ namespace: Infragistics.Controls.Charts ## **{PackageVerChanges-21-1}** ### {PackageCharts} (チャート) -このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`DataChart`、`CategoryChart`、および `FinancialChart`。 +このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`XamDataChart`、`CategoryChart`、および `FinancialChart`。 * 棒/縦棒/ウォーターフォール シリーズを、角丸ではなく角が四角になるように変更しました。 * heat min プロパティの 散布高密度シリーズの色を #8a5bb1 から #000000 に変更しました。 diff --git a/doc/jp/components/general-changelog-dv.md b/doc/jp/components/general-changelog-dv.md index 3c6e30a8e..c9fbe5993 100644 --- a/doc/jp/components/general-changelog-dv.md +++ b/doc/jp/components/general-changelog-dv.md @@ -2,9 +2,9 @@ title: {Platform} 新機能 | {ProductName} | インフラジスティックス _description: {ProductName} の新機能について学んでください。 _keywords: Changelog, What's New, {ProductName}, Infragistics, 変更ログ, 新機能, インフラジスティックス -_language: ja -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart"] namespace: Infragistics.Controls.Charts +_language: ja --- # {ProductName} 変更ログ @@ -16,17 +16,36 @@ namespace: Infragistics.Controls.Charts * [Ignite UI for Angular 変更ログ](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md) +## **{PackageVerChanges-23-2-MAR}** + +### {PackageCharts} + +- `XamRadialChart` + - 新しいラベル モード + `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 + +### {PackageGauges} + +- `XamRadialGauge` + - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 + - `XamRadialGauge` の新しい `OpticalScalingEnabled` プロパティと `OpticalScalingSize` プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。 + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamLinearGauge` + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamBulletGraph` + - `HighlightValueDisplayMode` が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい `HighlightValue` の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。 + ## **{PackageVerChanges-23-2-JAN}** -### {PackageCharts} チャート +### {PackageCharts} (チャート) -* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `DataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 +* [チャート強調表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `XamDataChart` は、データのサブセットの内外で強調表示およびアニメーション化する方法を公開するようになりました。この強調表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 ## **{PackageVerChanges-23-2}** ### {PackageGrids} (Toolbar - ベータ版) -* クリップボードを介してチャートを画像に保存するための新しいツールがデフォルトのツールとして追加されました。 +* クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 * ツールバーの `Orientation` プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 * ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 @@ -36,7 +55,7 @@ namespace: Infragistics.Controls.Charts * [Toolbar](menus/toolbar.md) - ベータ版。このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、`XamDataChart` または `CategoryChart` コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。 -### {PackageCharts} チャート +### {PackageCharts} (チャート) * [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - `ValueLayer` という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい `ValueLines` コレクションに追加することで、`CategoryChart` と `FinancialChart` に適用されます。 @@ -50,9 +69,7 @@ namespace: Infragistics.Controls.Charts ## **{PackageVerChanges-22-2}** -デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。 - -これらの新しいチャートの改善点は次のとおりです: +デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです: * ブラウザー / 画面サイズに基づいた水平ラベル回転のレスポンシブ レイアウト。 * すべてのプラットフォームでの丸型ラベルの描画が強化されました。 @@ -86,7 +103,7 @@ namespace: Infragistics.Controls.Charts * 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、`Legend` とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。 * 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。 * 積層シリーズのアニメーションとトランジションインのサポートが追加されました。`IsTransitionInEnabled` プロパティを true に設定すると、アニメーションを有効にできます。そこから、`TransitionInDuration` プロパティを設定してアニメーションが完了するまでの時間を決定し、`TransitionInMode` でアニメーションのタイプを決定できます。 -* 追加された `AssigningCategoryStyle` イベントは、`DataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 +* 追加された `AssigningCategoryStyle` イベントは、`XamDataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 * CalloutLayer の新しい `AllowedPositions` 列挙型。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。 * 注釈レイヤーに追加された新しいコーナー半径プロパティ。各コールアウトのコーナーを丸めるために使用されます。コーナー半径がデフォルトで追加されていることに注意してください。 - CalloutLayer の `CalloutCornerRadius` @@ -143,7 +160,7 @@ namespace: Infragistics.Controls.Charts ## **{PackageVerChanges-21-1}** ### {PackageCharts} (チャート) -このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`DataChart`、`CategoryChart`、および `FinancialChart`。 +このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`XamDataChart`、`CategoryChart`、および `FinancialChart`。 * 棒/縦棒/ウォーターフォール シリーズを、角丸ではなく角が四角になるように変更しました。 * heat min プロパティの 散布高密度シリーズの色を #8a5bb1 から #000000 に変更しました。 @@ -153,20 +170,20 @@ namespace: Infragistics.Controls.Charts * `PointSeries`、`BubbleSeries`、`ScatterSeries`、`PolarScatterSeries` のマーカーのアウトラインに一致するようにマーカーの塗りつぶしを変更しました。`MarkerFillMode` プロパティを Normal に設定すると、この変更を元に戻すことができます。 * `TimeXAxis` および `OrdinalTimeXAxis` のラベリングを圧縮しました。 * 新しいマーカー プロパティ: - - シリーズ。`MarkerFillMode` - マーカーがアウトラインに依存するように、`MatchMarkerOutline` に設定できます。 - - シリーズ。`MarkerFillOpacity` - 0〜1 の値に設定できます。 - - シリーズ。`MarkerOutlineMode` - マーカーのアウトラインが塗りブラシの色に依存するように、`MatchMarkerBrush` に設定できます。 + - series.`MarkerFillMode` - マーカーがアウトラインに依存するように、`MatchMarkerOutline` に設定できます。 + - series.`MarkerFillOpacity` - 0〜1 の値に設定できます。 + - series.`MarkerOutlineMode` - マーカーのアウトラインが塗りブラシの色に依存するように、`MatchMarkerBrush` に設定できます。 * 新シリーズプロパティ: - - シリーズ。`OutlineMode` - シリーズ アウトラインの表示を切り替えるように設定できます。データ チャートの場合、プロパティはシリーズ上にあることに注意してください。 + - series.`OutlineMode` - シリーズ アウトラインの表示を切り替えるように設定できます。データ チャートの場合、プロパティはシリーズ上にあることに注意してください。 - チャートがデフォルトのズーム レベルにあるときにビューポートに導入されるブリード オーバー領域を定義する新しいチャート プロパティを追加しました。一般的な使用例では、軸と最初/最後のデータ ポイントの間にスペースを提供します。以下にリストされている `ComputedPlotAreaMarginMode` は、マーカーが有効になっているときに自動的にマージンを設定することに注意してください。その他は、厚さを表す `Double` を指定するように設計されており、PlotAreaMarginLeft などがチャートの 4 辺すべてにスペースを調整します: - - チャート。`PlotAreaMarginLeft` - - チャート。`PlotAreaMarginTop` - - チャート。`PlotAreaMarginRight` - - チャート。`PlotAreaMarginBottom` - - チャート。`ComputedPlotAreaMarginMode` + - chart.`PlotAreaMarginLeft` + - chart.`PlotAreaMarginTop` + - chart.`PlotAreaMarginRight` + - chart.`PlotAreaMarginBottom` + - chart.`ComputedPlotAreaMarginMode` * 新しい強調表示プロパティ: - - チャート。`HighlightingMode` - ホバーされたシリーズとホバーされていないシリーズをフェードまたは明るくするかを設定します。 - - チャート。`HighlightingBehavior` - 真上または最も近い項目など、マウスの位置に応じてシリーズを強調表示するかどうかを設定します。 + - chart.`HighlightingMode` - ホバーされたシリーズとホバーされていないシリーズをフェードまたは明るくするかを設定します。 + - chart.`HighlightingBehavior` - 真上または最も近い項目など、マウスの位置に応じてシリーズを強調表示するかどうかを設定します。 - 以前のリリースでは、強調表示はホバー時にフェードするように制限されていたことに注意してください。 * 積層型、散布図、極座標、ラジアル、図形シリーズに強調表示を追加しました。 * 積層型、散布図、極座標、ラジアル、図形注釈レイヤーを追加しました。 diff --git a/doc/jp/components/general-getting-started.md b/doc/jp/components/general-getting-started.md index b54de77b3..35351eb09 100644 --- a/doc/jp/components/general-getting-started.md +++ b/doc/jp/components/general-getting-started.md @@ -44,16 +44,16 @@ mentionedTypes: ['XamBulletGraph'] 2 - ターミナル ウィンドウに以下のコマンドのいずれかを入力します。 ```cmd -npx create-react-app my-app-name --typescript +npx create-react-app MyAppName --typescript ``` ```cmd -yarn create react-app my-app-name --typescript +yarn create react-app MyAppName --typescript ``` アプローチに応じて、`npx` または `yarn` が必要になります。以上のコマンドについての詳細はこちらを参照してください。 ```cmd -cd my-app-name +cd MyAppName ``` @@ -64,37 +64,24 @@ cd my-app-name {ProductName} は、UI ウィジェット、コンポーネント、デザイン ツール用の UI キット、および Web コンポーネント用のサポート サービスの完全なセットです。開発者が、最新のデスクトップ ブラウザー、モバイル エクスペリエンス、およびブラウザーの Web コンポーネント API をターゲットとするプログレッシブ Web アプリ (PWA) 向けの最新の高性能 HTML5 および JavaScript アプリを構築できるように設計されています。 ## チャートおよびグラフ -{ProductName} チャートおよびグラフは、65 種類以上のシリーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。 +{ProductName} には、[チャートとグラフ](charts/chart-overview.md)のライブラリが含まれており、65 種類以上のチャート シリーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。 ## ゲージ -{ProductName} ゲージは、簡単かつ直感的な方法でデータを示すために使用されるラジアル ゲージ コンポーネントとリニア ゲージ コンポーネントを提供します。 -ラジアル ゲージには、定義済みの形状とスケールを作成するためのさまざまなカスタマイズ オプションがあります。 -リニア ゲージは、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。 - -{ProductName} ゲージには、ダッシュボードで使用されているメーターとゲージを単純な棒チャートに置き換えて、データの視覚化を作成できる `XamBulletGraph` コンポーネントも含まれています。 +{ProductName} は、簡単かつ直感的な方法でデータを示すために使用される[ラジアル ゲージ](radial-gauge.md)、[リニア ゲージ](linear-gauge.md)と[バレット グラフ](bullet-graph.md) コンポーネントを提供します。[ラジアル ゲージ](radial-gauge.md)には、定義済みの形状とスケールを作成するためのさまざまなカスタマイズ オプションがあります。[リニア ゲージ](linear-gauge.md)は、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。[バレット グラフ](bullet-graph.md) コンポーネントを使用すると、ダッシュボードで使用されるメーターとゲージを単純な棒チャートに置き換えて、データの視覚化を作成できます。 ## マップ -{ProductName} マップは、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータ セットを描画できます。複数のマップ レイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタム マーカーと色を使用して情報を表示できます。 +{ProductName} [地理マップ](geo-map.md)は、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータ セットを描画できます。複数のマップ レイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタム マーカーと色を使用して情報を表示できます。 ## グリッドと入力 -{ProductName} グリッドは、わずかな設定でデータをバインドおよび表示できるグリッド コンポーネントです。また、フィルタリング、ソート、グループ化、ピン固定などの機能も提供します。 - -## IgniteUI Web コンポーネント -{ProductName} は UI コンポーネントの完全なライブラリであり、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築する機能を提供します。[ストーリーブックはこちら](https://igniteui.github.io/igniteui-webcomponents)をご覧ください! +{ProductName} は、[データ グリッド](grids/data-grid.md)、[リスト](grids/list.md)、[ツリー](grids/tree.md)、さらには[スプレッドシート](spreadsheet-overview.md)の形式で、わずかな設定でデータをバインドおよび表示できるいくつかの[グリッド](grids/grids-header.md) コンポーネントを提供します。また、フィルタリング、ソート、グループ化、ピン固定などの機能も提供します。 -すべてのコンポーネントは [Indigo.Design デザイン システム](https://jp.infragistics.com/products/appbuilder/ui-toolkit)に基づいており、[App Builder](https://appbuilder.indigo.design/) によって完全にサポートされており、Sketch、Adobe XD、および Figma 用のすぐに使用できる UI キットによって支えられています。 +## ボタン、入力、レイアウト、メニュー +{ProductName} は、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築できるようにするさまざまなタイプの[ボタン](inputs/button.md)、[入力](inputs/input.md)、[メニュー](menus/navbar.md)、[レイアウト](layouts/tabs.md)を提供します。[ストーリーブックはこちら](https://igniteui.github.io/igniteui-webcomponents)をご覧ください!これらのコンポーネントは [Indigo Design System](https://jp.infragistics.com/products/appbuilder/ui-toolkit) に基づいており、[App Builder](https://appbuilder.indigo.design/) によって完全にサポートされており、Sketch、Adobe XD、および Figma 用のすぐに使用できる UI キットによって支えられています。 # {ProductName} を使用した作業の開始 -このトピックでは、Ignite UI for Web Components を使用して Web コンポーネント アプリケーションを作成するための手順を説明します。 - -## Ignite UI Web Components の例 - -`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} Overview Example"` - - +このセクションでは、Ignite UI for Web Components を使用して Web コンポーネント アプリケーションを作成するための手順を説明します。 -# 構成 ## IgniteUI CLI をインストールする @@ -167,8 +154,9 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` -# Charts および Map Web コンポーネント パッケージをインストールする -## 手順 1 - Web コンポーネント プロジェクトの作成 +## Charts および Map Web コンポーネント パッケージをインストールする + +### 手順 1 - Web コンポーネント プロジェクトの作成 1 - コマンドラインを開き、**wc-html** という名前のディレクトリを作成します。 ```cmd @@ -234,7 +222,7 @@ code . }, ``` -## 手順 2 - ポリフィルのインストール +### 手順 2 - ポリフィルのインストール 1 - **VS Code** でターミナルを開きます (**[表示]** -> **[ターミナル]** メニューまたは CTRL + ` キーを押します) @@ -250,7 +238,7 @@ import '@webcomponents/custom-elements/custom-elements.min'; import '@webcomponents/custom-elements/src/native-shim.js'; ``` -## 手順 3 - Ignite UI for Web Components と lit-html をインストール +### 手順 3 - Ignite UI for Web Components と lit-html をインストール 1 - **npm** を使用して Ignite UI for Web コンポーネントをインストールします。この例では、Map Web コンポーネントをインストールします。 @@ -288,7 +276,7 @@ ModuleManager.register( ``` -## 手順 4 - Web コンポーネント プロジェクトのビルドと実行 +### 手順 4 - Web コンポーネント プロジェクトのビルドと実行 1 - **VS Code** でターミナルを開き、**build** スクリプトを実行します。 @@ -317,9 +305,13 @@ npm run build > [!Note] > Live Server は Visual Studio Code の拡張機能で、静的および動的ページの自動更新機能を備えたローカル開発サーバーを起動できます。この拡張機能は、Visual Studio Code の [拡張機能] タブから、または [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) からダウンロードしてインストールできます。 -4 - ローカル サーバー上の Web ブラウザーを使用して **index.html** に移動すると、Ignite UI for Web Components のスプレッドシートがブラウザーに表示されます。 +4 - ローカル サーバー上の Web ブラウザーを使用して **index.html** に移動します。最終結果には、インタラクティブなワールドマップが表示されます。 + + + +`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} 概要の例"` + - @@ -419,11 +411,12 @@ function App() { npm run-script start ``` -コマンドを実行した後、プロジェクトがローカルでビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで {ProductName} コンポーネントを使用できるようになります。 +コマンドを実行した後、プロジェクトがローカルでビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで {ProductName} コンポーネントを使用できるようになります。最終結果には、インタラクティブなワールドマップが表示されます。 + + -以下の画像は、上記を実行した結果です。 +`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} 概要の例"` - @@ -478,7 +471,7 @@ var app = builder.Build(); @using IgniteUI.Blazor.Controls ``` -3 - **Pages/_Layout.cshtml** ファイルの **** 要素にスタイル シートを追加します。 +3a - **Pages/_Layout.cshtml** または **Pages/_Host.cshtml** ファイルの **** 要素にスタイル シートを追加します。 ```razor @@ -486,7 +479,7 @@ var app = builder.Build(); ``` -4 - スクリプト参照を **Pages/_Host.cshtml** ファイルに追加します。 +3b - スクリプト参照を追加します。 ```razor @@ -511,7 +504,7 @@ public void ConfigureServices(IServiceCollection services) @using IgniteUI.Blazor.Controls ``` -3 - **Pages/_Host.cshtml** ファイルの **** 要素にスタイル シートを追加します。 +3a - **Pages/_Host.cshtml** ファイルの **** 要素にスタイル シートを追加します。 ```razor @@ -519,7 +512,7 @@ public void ConfigureServices(IServiceCollection services) ``` -4 - スクリプト参照を **Pages/_Host.cshtml** ファイルに追加します。 +3b - スクリプト参照を **Pages/_Host.cshtml** ファイルに追加します。 ```razor diff --git a/doc/jp/components/geo-map-display-heat-imagery.md b/doc/jp/components/geo-map-display-heat-imagery.md index 2682cdd22..9f50eb46e 100644 --- a/doc/jp/components/geo-map-display-heat-imagery.md +++ b/doc/jp/components/geo-map-display-heat-imagery.md @@ -2,12 +2,12 @@ title: {Platform} マップ | データ可視化ツール | インフラジスティックス _description: インフラジスティックスの {Platform} JavaScript マップを使用してヒートマップ画像を表示します。{ProductName} マップのサンプルを是非お試しください! _keywords: {Platform} map, heat map imagery, {ProductName}, Infragistics, {Platform} マップ, ヒートマップ画像, インフラジスティックス -mentionedTypes: ['XamGeographicMap', 'ShapefileConverter'] +mentionedTypes: ['XamGeographicMap', 'ShapefileConverter', 'HeatTileGenerator', 'GeographicTileSeries'] _language: ja --- # {Platform} ヒート画像の表示 -{ProductName} マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、`ShapefileConverter` によって生成される `ShapeFileRecords` を使用して、ヒートマップ画像を表示する機能があります。 +{ProductName} マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、`ShapefileConverter` によって生成される `ShapeFileRecord` を使用して、ヒートマップ画像を表示する機能があります。 このトピックを読み進めるための前提条件として、[シェープ ファイルを地理的データにバインディング](geo-map-binding-shp-file.md)をお読みください。 @@ -19,7 +19,7 @@ _language: ja
-`ShapefileConverter` がそのシェイプ ファイルを読み込むと、そのデータを ShapeFileRecord オブジェクトに変換します。これらのオブジェクトは、`ShapefileConverter` の `GetPointData()` メソッドから取得でき、`TileGenerator` プロパティに割り当てられた `HeatTileGenerator` で `TileGeneratorMapImagery` オブジェクトを使用してヒートマップを作成するために使用できます。この `TileGeneratorMapImagery` は、`TileImagery` ソースとして地理タイルシリーズで使用できます。 +`ShapefileConverter` がそのシェイプ ファイルを読み込むと、そのデータを `ShapefileRecord` オブジェクトに変換します。これらのオブジェクトは、`ShapefileConverter` の `GetPointData()` メソッドから取得でき、`TileGenerator` プロパティに割り当てられた `HeatTileGenerator` で `TileGeneratorMapImagery` オブジェクトを使用してヒートマップを作成するために使用できます。この `TileGeneratorMapImagery` は、`TileImagery` ソースとして `GeographicTileSeries` で使用できます。 `HeatTileGenerator` オブジェクトは、`XValues`、`YValues`、`Values` の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、`XValues` を経度、`YValues` を緯度、`Values` を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 @@ -344,12 +344,11 @@ public onDataLoaded(csvData: string) { ## API リファレンス - - `HeatTileGenerator` + - `GeographicTileSeries` - `HeatTileGenerator` - `MaximumColor` - `MinimumColor` - - `ShapeFileRecord` - - `ShapeFileRecords` + - `ShapefileRecord` - `ShapefileConverter` - `TileGeneratorMapImagery` - `TileGenerator` diff --git a/doc/jp/components/grids/_shared/advanced-filtering.md b/doc/jp/components/grids/_shared/advanced-filtering.md index ee54ecc72..f65c8704a 100644 --- a/doc/jp/components/grids/_shared/advanced-filtering.md +++ b/doc/jp/components/grids/_shared/advanced-filtering.md @@ -40,68 +40,91 @@ _language: ja ``` + + +```html + + + +``` +```ts +constructor() { + let grid = document.getElementById("grid") as IgcGridComponent; + grid.data = this.data +} +``` + +```tsx + + + +``` + ```razor <{ComponentSelector} Data=data AutoGenerate="true" AllowAdvancedFiltering="true"> ``` + -```razor - - - -``` - - - ```html -<{ComponentSelector} id="grid" auto-generate="true" allow-advanced-filtering="true"> + - + ``` ```ts constructor() { - let grid = (document.getElementById("grid") as IgcGridComponent); - grid.data = this.data + let treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent; + treeGrid.data = this.data } ``` - -```html - - - +```tsx + + + ``` +```razor + + + +``` + + +```html + + + +``` ```ts constructor() { - let grid = document.getElementById("grid") as IgcTreeGridComponent; - grid.data = this.data + let hierarchicalGrid = document.getElementById("hierarchicalGrid") as IgcHierarchicalGridComponent; + hierarchicalGrid.data = this.data } ``` - + - - -```html -<{ComponentSelector} data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowAdvancedFiltering="true"> - - - - - - + + +```razor + + + ``` - + + + ```tsx -<{ComponentSelector} data={nwindData} autoGenerate="false" ref={gridRef} allowAdvancedFiltering="true"> + - + ``` + 高度なフィルタリングは、`AdvancedFilteringExpressionsTree` 入力プロパティに保存される `FilteringExpressionsTree` を生成します。`AdvancedFilteringExpressionsTree` プロパティを使用して、高度なフィルタリングの初期状態を設定できます。 @@ -197,6 +220,7 @@ componentDidMount() { ```--> + `{ComponentName}` ツールバーを表示したくない場合は、`OpenAdvancedFilteringDialog` および `CloseAdvancedFilteringDialog` メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。 > [!Note] @@ -543,27 +567,22 @@ $custom-drop-down: drop-down-theme( 定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。 + ```html - -``` - -```razor - +<{ComponentSelector} class="grid"> ``` + - - - -```html - + +```tsx +<{ComponentSelector} className="grid"> ``` + ```razor - +<{ComponentSelector} class="grid"> ``` - - 次に、そのクラスに関連する CSS プロパティを設定します。 ```css diff --git a/doc/jp/components/grids/_shared/cell-editing.md b/doc/jp/components/grids/_shared/cell-editing.md index 5af1ba25e..039e1a196 100644 --- a/doc/jp/components/grids/_shared/cell-editing.md +++ b/doc/jp/components/grids/_shared/cell-editing.md @@ -85,7 +85,9 @@ public updateCell() { ``` ```razor -this.treeGrid.UpdateCell(newValue, rowID, 'ReorderLevel') +@code { + this.treeGrid.UpdateCell(newValue, rowID, 'ReorderLevel'); +} ``` @@ -97,7 +99,9 @@ public updateCell() { ``` ```razor -this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel') +@code { + this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel'); +} ``` @@ -117,9 +121,11 @@ public updateCell() { ```razor -private UpdateCell() { - IgbCell cell = this.grid1.GetCellByColumn(rowIndex, "ReorderLevel"); - cell.Update(70); +@code { + private UpdateCell() { + IgbCell cell = this.grid1.GetCellByColumn(rowIndex, "ReorderLevel"); + cell.Update(70); + } } ``` @@ -146,9 +152,11 @@ public updateCell() { ``` ```razor -private UpdateCell() { - IgbCell cell = this.treeGrid.GetCellByColumn(rowIndex, "Age"); - cell.Update(9999); +@code { + private UpdateCell() { + IgbCell cell = this.treeGrid.GetCellByColumn(rowIndex, "Age"); + cell.Update(9999); + } } ``` @@ -164,9 +172,11 @@ public updateCell() { ``` ```razor -private UpdateCell() { - IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel"); - cell.Update(70); +@code { + private UpdateCell() { + IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel"); + cell.Update(70); + } } ``` @@ -233,6 +243,8 @@ public classEditTemplate = (ctx: IgcCellTemplateContext) => { セルに適用されるカスタム テンプレートを提供する場合は、そのテンプレートをセル自体またはそのヘッダーに渡すことができます。まず、通常どおりに列を作成します。 + + @@ -253,7 +265,7 @@ public classEditTemplate = (ctx: IgcCellTemplateContext) => { @@ -261,6 +273,19 @@ public classEditTemplate = (ctx: IgcCellTemplateContext) => { ``` + +```razor + + +``` + + そしてテンプレートを渡します: ```razor @@ -295,7 +320,6 @@ igRegisterScript("WebGridCellEditCellTemplate", (ctx) => { field="Race" data-type="string" editable="true" - name="column1" id="column1"> ``` @@ -343,73 +367,88 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { field="Category" data-type="string" editable="true" - name="column1" id="column1"> ``` そして、テンプレートを index.ts ファイルのこの列に渡します。 -```typescript +```ts + constructor() { - var treeGrid = document.getElementById('treeGrid') as {ComponentName}Component; + var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent; var column1 = document.getElementById('column1') as IgcColumnComponent; - treeGrid.data = this.ordersTreeData; - column1.inlineEditorTemplate = this.webTreeGridCellEditCellTemplate; + treeGrid.data = this.webGridCellEditSampleRoleplay; + column1.inlineEditorTemplate = this.webGridCellEditCellTemplate; + column2.inlineEditorTemplate = this.webGridCellEditCellTemplate; + column3.inlineEditorTemplate = this.webGridCellEditCellTemplate; } +public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { + let cellValues: any = []; + let uniqueValues: any = []; + for(const i of (this.webGridCellEditSampleRoleplay as any)){ + const field: string = ctx.cell.column.field; + if(uniqueValues.indexOf(i[field]) === -1 ) + { + cellValues.push(html`${(i[field])}`); + uniqueValues.push(i[field]); + } + } + return html` + ctx.cell.editValue = e.detail.value}> + ${cellValues} + + `; +} ``` + + + +```html + + +``` + +そして、テンプレートを index.ts ファイルのこの列に渡します。 - ```ts constructor() { - var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent; - var column1 = document.getElementById('column1') as IgcColumnComponent; - var column2 = document.getElementById('column2') as IgcColumnComponent; - var column3 = document.getElementById('column3') as IgcColumnComponent; - - treeGrid.data = this.webGridCellEditSampleRoleplay; - column1.inlineEditorTemplate = this.webGridCellEditCellTemplate; - column2.inlineEditorTemplate = this.webGridCellEditCellTemplate; - column3.inlineEditorTemplate = this.webGridCellEditCellTemplate; -} - -private _webGridCellEditSampleRoleplay: WebGridCellEditSampleRoleplay = null; -public get webGridCellEditSampleRoleplay(): WebGridCellEditSampleRoleplay { - if (this._webGridCellEditSampleRoleplay == null) - { - this._webGridCellEditSampleRoleplay = new WebGridCellEditSampleRoleplay(); - } + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent; + var column1 = document.getElementById('column1') as IgcColumnComponent; - return this._webGridCellEditSampleRoleplay; + hierarchicalGrid.data = this.singersData; + column1.inlineEditorTemplate = this.webGridCellEditCellTemplate; } public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { - let cellValues: any = []; - let uniqueValues: any = []; - for(const i of (this.webGridCellEditSampleRoleplay as any)){ - const field: string = ctx.cell.column.field; - if(uniqueValues.indexOf(i[field]) === -1 ) - { - cellValues.push(html`${(i[field])}`); - uniqueValues.push(i[field]); - } + let cellValues: any = []; + let uniqueValues: any = []; + for(const i of (this.singersData as any)){ + const field: string = ctx.cell.column.field; + if(uniqueValues.indexOf(i[field]) === -1 ) + { + cellValues.push(html`${(i[field])}`); + uniqueValues.push(i[field]); } - return html` - ctx.cell.editValue = e.detail.value}> - ${cellValues} - - `; + } + return html` + ctx.cell.editValue = e.detail.value}> + ${cellValues} + + `; } ``` - + - - セルに適用されるカスタム テンプレートを提供する場合は、そのテンプレートをセル自体またはそのヘッダーに渡すことができます。まず、通常どおりに列を作成します。 @@ -449,19 +488,15 @@ const webGridCellEditCellTemplate = useCallback((ctx: IgrCellTemplateContext) => useEffect(() => { const column1 = grid1Ref.current.getColumnByName('column1'); - const column2 = grid1Ref.current.getColumnByName('column2'); - const column3 = grid1Ref.current.getColumnByName('column3'); grid1Ref.current.data = webGridCellEditSampleRoleplay; column1.inlineEditorTemplate = webGridCellEditCellTemplate; - column2.inlineEditorTemplate = webGridCellEditCellTemplate; - column3.inlineEditorTemplate = webGridCellEditCellTemplate; }, [webGridCellEditSampleRoleplay, webGridCellEditCellTemplate]); ``` -上記のサンプルは、さらに参照するためにここにあります。 + 上記のサンプルは、こちらで参照できます。 @@ -622,9 +657,11 @@ this.grid.addRow(record); ```razor -//Assuming we have a `GetNewRecord` method returning the new row data. -const record = this.GetNewRecord(); -this.GridRef.AddRow(record); +@code { + //Assuming we have a `GetNewRecord` method returning the new row data. + const record = this.GetNewRecord(); + this.GridRef.AddRow(record); +} ``` @@ -662,7 +699,14 @@ public addRow() { // Adding a new record // Assuming we have a `getNewRecord` method returning the new row data const record = this.getNewRecord(); - this.hierarchicalGrid.addRow(record, 1); + this.hierarchicalGrid.addRow(record); +} +``` +```razor +@code { + //Assuming we have a `GetNewRecord` method returning the new row data. + const record = this.GetNewRecord(); + this.HierarchicalGridRef.AddRow(record); } ``` @@ -709,18 +753,20 @@ row.update(newData); ```razor -// Updating the whole row -this.grid.UpdateRow(newData, this.selectedCell.cellID.rowID); +@code { + // Updating the whole row + this.grid.UpdateRow(newData, this.selectedCell.cellID.rowID); -// Just a particular cell through the Grid API -this.grid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); + // Just a particular cell through the Grid API + this.grid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); -// Directly using the cell `update` method -this.selectedCell.Update(newData); + // Directly using the cell `update` method + this.selectedCell.Update(newData); -// Directly using the row `update` method -const row = this.grid.GetRowByKey(rowID); -row.Update(newData); + // Directly using the row `update` method + IgbRowType row = this.grid.GetRowByKey(rowID); + row.Update(newData); +} ``` @@ -741,18 +787,20 @@ row.update(newData); ``` ```razor -// Updating the whole row -this.treeGrid.UpdateRow(newData, this.selectedCell.cellID.rowID); +@code { + // Updating the whole row + this.treeGrid.UpdateRow(newData, this.selectedCell.cellID.rowID); -// Just a particular cell through the Tree Grid API -this.treeGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); + // Just a particular cell through the Tree Grid API + this.treeGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); -// Directly using the cell `update` method -this.selectedCell.Update(newData); + // Directly using the cell `update` method + this.selectedCell.Update(newData); -// Directly using the row `update` method -const row = this.treeGrid.GetRowByKey(rowID); -row.Update(newData); + // Directly using the row `update` method + IgbRowType row = this.treeGrid.GetRowByKey(rowID); + row.Update(newData); +} ``` @@ -772,6 +820,23 @@ this.selectedCell.update(newData); const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` + +```razor +@code { + // Updating the whole row + this.hierarchicalGrid.UpdateRow(newData, this.selectedCell.cellID.rowID); + + // Just a particular cell through the Tree Grid API + this.hierarchicalGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); + + // Directly using the cell `update` method + this.selectedCell.Update(newData); + + // Directly using the row `update` method + IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID); + row.Update(newData); +} +``` ### {ComponentTitle} からデータを削除 @@ -796,16 +861,18 @@ row.delete(); grid1Ref.current.deleteRow(selectedCell.cellID.rowID); // Delete row through row object const row = grid1Ref.current.getRowByIndex(rowIndex); -row.delete(); +row.del(); ``` ```razor -// Delete row through Grid API -this.grid.DeleteRow(this.selectedCell.cellID.rowID); -// Delete row through row object -const row = this.grid.GetRowByIndex(rowIndex); -row.Delete(); +@code { + // Delete row through Grid API + this.grid.DeleteRow(this.selectedCell.cellID.rowID); + // Delete row through row object + IgbRowType row = this.grid.GetRowByIndex(rowIndex); + row.Del(); +} ``` @@ -820,15 +887,18 @@ row.delete(); ``` ```razor -// Delete row through Tree Grid API -this.treeGrid.DeleteRow(this.selectedCell.cellID.rowID); -// Delete row through row object -const row = this.treeGrid.GetRowByIndex(rowIndex); -row.Delete(); +@code { + // Delete row through Tree Grid API + this.treeGrid.DeleteRow(this.selectedCell.cellID.rowID); + // Delete row through row object + IgbRowType row = this.treeGrid.GetRowByIndex(rowIndex); + row.Del(); +} ``` + ```typescript // Delete row through Grid API this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); @@ -836,6 +906,27 @@ this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); const row = this.hierarchicalGrid.getRowByIndex(rowIndex); row.delete(); ``` + + + +```typescript +// Delete row through Grid API +this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); +// Delete row through row object +const row = this.hierarchicalGrid.getRowByIndex(rowIndex); +row.del(); +``` + + +```razor +@code { + // Delete row through Grid API + this.hierarchicalGrid.DeleteRow(this.selectedCell.cellID.rowID); + // Delete row through row object + IgbRowType row = this.hierarchicalGrid.GetRowByIndex(rowIndex); + row.Del(); +} +``` `{ComponentName}` に関係なく、ボタンのクリックなどのユーザー インタラクションに関連付けできます。 @@ -903,6 +994,7 @@ constructor() { ```ts constructor() { var hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent; + this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this); hGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit); } ``` @@ -1032,7 +1124,7 @@ igRegisterScript("HandleCellEdit", (ev) => { -ここでは、2 つの列を検証しています。ユーザーが従業員の**Age (年齢、18歳未満)** または **Hire Date (雇用日、将来の日付)** に無効な値を設定しようとすると、編集がキャンセルされ (値は送信されません)、エラー メッセージ付きのトースターが表示されます。 +ここでは、2 つの列を検証しています。ユーザーが従業員の **Age (年齢、18 歳未満)** または **Hire Date (雇用日、将来の日付)** に無効な値を設定しようとすると、編集がキャンセルされ (値は送信されません)、エラー メッセージ付きのトースターが表示されます。 @@ -1040,31 +1132,68 @@ igRegisterScript("HandleCellEdit", (ev) => { ```typescript -export class MyHGridEventsComponent { - public handleCellEdit(event: IGridEditEventArgs) { - const today = new Date(); - const column = event.column; - if (column.field === 'Debut') { - if (event.newValue > today.getFullYear()) { - this.toast.message = 'The debut date must be in the past!'; - this.toast.open(); - event.cancel = true; - } - } else if (column.field === 'LaunchDate') { - if (event.newValue > new Date()) { - this.toast.message = 'The launch date must be in the past!'; - this.toast.open(); - event.cancel = true; - } +public webHierarchicalGridCellEdit(event: CustomEvent): void { + const today = new Date(); + const column = event.detail.column; + if (column.field === 'Debut') { + if (event.detail.newValue > today.getFullYear()) { + event.detail.cancel = true; + alert('The debut date must be in the past!'); + } + } else if (column.field === 'LaunchDate') { + if (event.detail.newValue > today) { + event.detail.cancel = true; + alert('The launch date must be in the past!'); } } } ``` +```razor +*** In JavaScript *** +igRegisterScript("HandleCellEdit", (ev) => { + const today = new Date(); + const column = event.detail.column; + if (column.field === 'Debut') { + if (event.detail.newValue > today.getFullYear()) { + event.detail.cancel = true; + alert('The debut date must be in the past!'); + } + } else if (column.field === 'LaunchDate') { + if (event.detail.newValue > today) { + event.detail.cancel = true; + alert('The launch date must be in the past!'); + } + } +}, false); +``` + ここでは、2 つの列を検証しています。ユーザーがアーティストの **Debut (デビュー)** 年またはアルバムの **Launch Date (発売日)** を変更しようとした際に、グリッドは今日よりも後の日付を許可しません。 + + +```tsx +public handleCellEdit(sender: IgrHierarchicalGrid, event: IgrGridEditEventArgs): void { + const today = new Date(); + const column = event.detail.column; + if (column.field === 'Debut') { + if (event.detail.newValue > today.getFullYear()) { + event.detail.cancel = true; + alert('The debut date must be in the past!'); + } + } else if (column.field === 'LaunchDate') { + if (event.detail.newValue > today) { + event.detail.cancel = true; + alert('The launch date must be in the past!'); + } + } +} +``` + + + 以下は、上記の検証が `{ComponentName}` に適用された結果のデモです。 `sample="/{ComponentSample}/editing-events", height="650", alt="{Platform} {ComponentTitle} 編集イベントの例"` @@ -1108,6 +1237,10 @@ export class MyHGridEventsComponent { ``` +```tsx + +``` + 次に、そのクラスに関連する CSS プロパティを設定します。 ```css @@ -1118,6 +1251,29 @@ export class MyHGridEventsComponent { ``` + +```html + +``` + +```razor + +``` + +```tsx + +``` + +次に、そのクラスに関連する CSS プロパティを設定します。 + +```css +.hierarchicalGrid { + --ig-grid-edit-mode-color: orange; + --ig-grid-cell-editing-background: lightblue; +} +``` + + ### スタイル設定の例 `sample="/{ComponentSample}/cell-editing-styling", height="650", alt="{Platform} {ComponentTitle} セル編集のスタイル設定の例"` diff --git a/doc/jp/components/grids/_shared/cell-selection.md b/doc/jp/components/grids/_shared/cell-selection.md index 6595fea17..ad5f098d1 100644 --- a/doc/jp/components/grids/_shared/cell-selection.md +++ b/doc/jp/components/grids/_shared/cell-selection.md @@ -8,9 +8,9 @@ namespace: Infragistics.Controls _language: ja --- -# {Platform} セルの選択 +# {Platform} {ComponentTitle} セルの選択 -{Platform} {ComponentTitle} の {ProductName} セル選択により、豊富なデータ選択機能が有効になり、グリッド コンポーネントで強力な API が提供されます。 {Platform} {ComponentTitle} は、次の 3 つの選択モードをサポートしています。 +{Platform} {ComponentTitle} の {ProductName} セル選択により、豊富なデータ選択機能が有効になり、`{ComponentName}` コンポーネントで強力な API が提供されます。 {Platform} {ComponentTitle} は、次の 3 つの選択モードをサポートしています。 - {ComponentTitle} 複数セルの選択 - {ComponentTitle} 単一選択 @@ -32,7 +32,7 @@ _language: ja ## 選択タイプ -### {ComponentTitle} 複数セルの選択 +### {Platform} {ComponentTitle} 複数セルの選択 これは、親グリッドと子グリッドの両方でのデフォルトのセル選択モードです。セルの選択は一度に 1 つのグリッドで行うことができますが、クロス グリッド範囲の選択を行うことか、複数のグリッドでセルを選択することはできないことに注意してください。範囲選択およびマウス ドラッグ機能に関連する各キーの組み合わせは、同じグリッドでのみ使用できます。 @@ -94,7 +94,7 @@ _language: ja 以下は、範囲の選択、選択の解除、または選択したセル データを取得する方法です。 - + ### 範囲の選択 @@ -112,7 +112,29 @@ const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; gridRef.current.selectRange(range); ``` - + + +```razor +<{ComponentSelector} @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true> + +@code { + private {ComponentSelector} grid; + + private async void SetSelection() + { + IgbGridSelectionRange selectionRange = new IgbGridSelectionRange(); + selectionRange.ColumnStart = 1; + selectionRange.ColumnEnd = 1; + selectionRange.RowStart = 2; + selectionRange.RowEnd = 2; + + this.grid.SelectRange(new IgbGridSelectionRange[] {}); + } +} +``` + + + ### セル選択のクリア @@ -145,10 +167,10 @@ gridRef.current.clearCellSelection(); `GetSelectedData` は、選択されたデータの配列をディクショナリで返します。以下は例です。 ```razor - +<{ComponentSelector} @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true> @code { - private IgbGrid grid; + private {ComponentSelector} grid; private async void GetSelectedData() { @@ -301,6 +323,35 @@ expectedData = [ + + + +```ts + +``` + + +```tsx + +``` + +```razor + +``` + +Then set the related CSS properties for that class: + +```css +.hGrid { + --ig-grid-cell-selected-text-color: #fff; + --ig-grid-cell-active-border-color: #f2c43c; + --ig-grid-cell-selected-background: #0062a3; + --ig-grid-cell-editing-background: #0062a3; +} +``` + + + ### デモ `sample="/{ComponentSample}/cell-selection-style", height="620", alt="{Platform} {ComponentTitle} セル選択のスタイル設定の例"` @@ -382,9 +433,10 @@ $custom-grid-theme: grid-theme( * `{ComponentName}` + ## その他のリソース - + * [選択](selection.md) * [行選択](row-selection.md) * [フィルタリング](filtering.md) diff --git a/doc/jp/components/grids/_shared/collapsible-column-groups.md b/doc/jp/components/grids/_shared/collapsible-column-groups.md index b191c9138..c35a9fabd 100644 --- a/doc/jp/components/grids/_shared/collapsible-column-groups.md +++ b/doc/jp/components/grids/_shared/collapsible-column-groups.md @@ -215,12 +215,21 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => { ``` ```tsx - function collapsibleIndicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) { + + + + + + + + + +function indicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) { return (
- +
) - } +} ``` diff --git a/doc/jp/components/grids/_shared/column-hiding.md b/doc/jp/components/grids/_shared/column-hiding.md index 5e390be68..077824f12 100644 --- a/doc/jp/components/grids/_shared/column-hiding.md +++ b/doc/jp/components/grids/_shared/column-hiding.md @@ -26,6 +26,7 @@ _language: ja `{ComponentName}` を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。 + ```html @@ -85,6 +86,53 @@ _language: ja ``` + + + +```html + + + + + + + +``` + +```html + + + + + + + +``` + +```tsx + + + + + + + +``` + + + + +```razor +<{ComponentSelector} AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1"> + + + + + + +``` + + ## ツールバーの列非表示 UI @@ -92,6 +140,7 @@ _language: ja これには、`{ComponentName}` 内に `GridToolbarActions` と `GridToolbarHiding` の両方を設定することだけです。ツールバーにタイトルを追加するには、`GridToolbarTitle` を設定し、{ComponentTitle} のラッパーにカスタム スタイルを設定します。 + ```html @@ -131,11 +180,70 @@ _language: ja ``` + + + + +```html + + + + + + + +``` + + + + + +```html + + + + + + + +``` + + + + + +```razor +<{ComponentSelector} Data="SingersData"> + + + + + + + +``` + + + + + +```tsx + + + + + + + +``` + + `{ComponentName}` にはツールバーの列非表示 UI に便利なプロパティがあります。 `Title` プロパティを使用して、ツールバーのドロップダウン ボタンに表示されるタイトルを設定します。 + ```html @@ -175,6 +283,63 @@ _language: ja ``` + + + + +```html + + + + + + + +``` + + + + + +```razor +<{ComponentSelector} Data=SingersData> + + + + + + +``` + + + + + +```html + + + + + + + +``` + + + + + +```tsx + + + + + + + +``` + + @@ -332,9 +497,11 @@ export class AppModule {} ``` + ### 列の非表示の無効化 列の `DisableHiding` プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。 + ```html @@ -362,6 +529,53 @@ export class AppModule {} ``` + + + +```html + + + + + + + + +``` + +```html + + + + + + + + +``` + +```tsx + + + + + + + + +``` + +```razor +<{ComponentSelector}> + + + + + + + +``` + 列非表示 UI コンポーネントは以下のようになります。 @@ -519,6 +733,7 @@ $custom-button: button-theme( グリッドは、利用可能な [CSS 変数](../theming.md)の一部を設定することでさらにカスタマイズできます。 これを実現するために、最初にグリッドに割り当てるクラスを使用します。 + ```html <{ComponentSelector} class="grid"> ``` @@ -530,9 +745,25 @@ $custom-button: button-theme( ```tsx <{ComponentSelector} className="grid"> ``` + + + +```html +<{ComponentSelector} class="hierarchical-grid"> +``` + +```razor +<{ComponentSelector} class="hierarchical-grid"> +``` + +```tsx +<{ComponentSelector} className="hierarchical-grid"> +``` + 次に、関連するコンポーネントに関連する CSS 変数を設定します。スタイルも `igx-column-actions` にのみ適用するので、グリッドの残りの部分は影響を受けません。 + ```css .grid igx-column-actions { /* Main Column Actions styles */ @@ -564,6 +795,41 @@ $custom-button: button-theme( --ig-button-disabled-foreground: #ffcd0f; } ``` + + + +```css +#hierarchicalGrid { + /* Main Column Actions styles */ + --ig-column-actions-background-color: #292826; + --ig-column-actions-title-color: #ffcd0f; + + /* Checkbox styles */ + --ig-checkbox-tick-color: #292826; + --ig-checkbox-label-color: #ffcd0f; + --ig-checkbox-empty-color: #ffcd0f; + --ig-checkbox-fill-color: #ffcd0f; + + /* Input styles */ + --ig-input-group-idle-text-color: white; + --ig-input-group-filled-text-color: #ffcd0f; + --ig-input-group-focused-text-color: #ffcd0f; + --ig-input-group-focused-border-color: #ffcd0f; + --ig-input-group-focused-secondary-color: #ffcd0f; + + /* Buttons styles */ + --ig-button-foreground: #292826; + --ig-button-background: #ffcd0f; + --ig-button-hover-background: #404040; + --ig-button-hover-foreground: #ffcd0f; + --ig-button-focus-background: #ffcd0f; + --ig-button-focus-foreground: black; + --ig-button-focus-visible-background: #ffcd0f; + --ig-button-focus-visible-foreground: black; + --ig-button-disabled-foreground: #ffcd0f; +} +``` + ### デモ @@ -581,14 +847,14 @@ $custom-button: button-theme( * `ColumnActionsComponent` - + このトピックでは、`{ComponentName}` のツールバーの定義済みの列非表示 UI の使用方法について学びました。以下は、列非表示 UI のその他の API です。 * `ColumnActionsComponent` その他のコンポーネント (またはそのいずれか) で使用した API: - + `Column` プロパティ: * `DisableHiding` @@ -627,6 +893,7 @@ $custom-button: button-theme( * [列のサイズ変更](column-resizing.md) * [選択](selection.md) + コミュニティに参加して新しいアイデアをご提案ください。 * [{ProductName} **フォーラム (英語)**]({ForumsLink}) diff --git a/doc/jp/components/grids/_shared/column-moving.md b/doc/jp/components/grids/_shared/column-moving.md index 3b2b0e9ee..1b840101a 100644 --- a/doc/jp/components/grids/_shared/column-moving.md +++ b/doc/jp/components/grids/_shared/column-moving.md @@ -65,6 +65,7 @@ function headerTemplate(ctx: IgrCellTemplateContext) { ## 概要 **列移動**機能は各列レベルで有効にできます。つまり、`{ComponentName}` に移動可能な列または移動不可の列の両方を含むことができます。`{ComponentName}` の `Moving` 入力によって制御されます。 + ```html @@ -88,6 +89,45 @@ function headerTemplate(ctx: IgrCellTemplateContext) { ``` + + + + + +```html +<{ComponentSelector} [moving]="true"> + ... + <{RowIslandSelector} [moving]="true"> + +``` + + +```razor +<{ComponentSelector} Moving=true> + ... + <{RowIslandSelector} Moving=true> + +``` + + +```html +<{ComponentSelector} moving="true"> + ... + <{RowIslandSelector} moving="true"> + +``` + + + +```tsx +<{ComponentSelector} moving="true"> + ... + <{RowIslandSelector} moving="true"> + +``` + + + ## API ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる API メソッドも用意されています。 @@ -170,6 +210,7 @@ public onColumnMovingEnd(event) { ``` + ```tsx function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEventArgs) { if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") { @@ -182,6 +223,8 @@ function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEve ``` + + ```razor <{ComponentSelector} ShowGroupArea="true" @ref='Grid' Width="100%" Height="100%" AllowFiltering=true diff --git a/doc/jp/components/grids/_shared/column-resizing.md b/doc/jp/components/grids/_shared/column-resizing.md index 915d7bae0..e0608b311 100644 --- a/doc/jp/components/grids/_shared/column-resizing.md +++ b/doc/jp/components/grids/_shared/column-resizing.md @@ -182,18 +182,21 @@ public onResize(event) { + ```html - - + ``` + + ```html - - + ``` ```ts @@ -202,18 +205,40 @@ constructor() { hierarchicalGrid.data = this.data; hierarchicalGrid.columnResized = this.onResize; } -``` -```typescript public onResize(event) { this.col = event.column; this.pWidth = event.prevWidth; this.nWidth = event.newWidth; } ``` + + +```tsx +function onResize(grid: IgrGridBaseDirective, event: IgrColumnMovingEventArgs) { + IgrColumn col = event.detail.column; + string pWidth = event.detail.prevWidth; + string nWidth = event.detail.newWidth; +} + +<{ComponentSelector} id="hierarchicalGrid" autoGenerate="false" columnResized={onResize}> + + +``` ```razor -TO DO! +<{ComponentSelector} Data=data AutoGenerate=false ColumnResized="onResize"> + + + +@code { + private void onResize(IgbColumnResizeEventArgs args) + { + IgbColumnType col = args.Detail.Column; + string pWidth = args.Detail.PrevWidth; + string nWidth = args.Detail.NewWidth; + } +} ``` @@ -251,7 +276,7 @@ TO DO! ``` ```tsx - + @@ -307,7 +332,20 @@ TO DO! ``` ```razor -TO DO! +<{ComponentSelector} Data=data ColumnResized="onResize" AutoGenerate=false Height="600px" Width="100%"> + + + + +``` + +```tsx +<{ComponentSelector} id="hierarchicalGrid" columnResized={onResize} autoGenerate="false" + height="600px" width="100%"> + + + + ``` @@ -327,6 +365,8 @@ TO DO! 列の最小幅および最大幅の構成も可能です。`Column` の `MinWidth` および `MaxWidth`入力によって制御されます。この場合、サイズ変更インジケーターのドラッグ操作が制限されます。列が `MinWidth` および `MaxWidth` によって定義される範囲以外にサイズ変更できないことをユーザーに通知します。 + + ```html @@ -338,17 +378,43 @@ TO DO! ```tsx + minWidth="60px" maxWidth="230px"> ``` ```razor ``` + + + +```html + +``` + +```html + +``` + +```tsx + +``` + +```razor + +``` + + + 列幅の最小値と最大値のタイプ (ピクセルまたはパーセンテージ) を混在させることができます。最小値と最大値がパーセンテージに設定されている場合、それぞれの列サイズはピクセルと同様の正確なサイズに制限されます。 つまり、次の構成が可能です。 + + ```html @@ -360,15 +426,41 @@ TO DO! ```tsx + minWidth="60px" maxWidth="230px"> ``` ```razor ``` + + + +```html + +``` + +```html + +``` + +```tsx + +``` + +```razor + +``` + + + または + + ```html @@ -380,19 +472,45 @@ TO DO! ```tsx + minWidth="5%" maxWidth="15%"> ``` ```razor ``` + + + +```html + +``` + +```html + +``` + +```tsx + +``` + +```razor + +``` + + + ## ダブルクリックで列の自動サイズ調整 各列ヘッダーの右側をダブルクリックして列を**自動サイズ**調整することができます。列は、現在表示されているヘッダーを含む一番長いセル値にサイズ設定されます。この動作はデフォルトで有効なため、追加で構成する必要はありません。ただし、`MaxWidth` がその列に設定され、新しい幅が `MaxWidth` 値より大きい場合、列は自動サイズ調整されません。この場合、列が `MaxWidth` 値に設定されます。 また、`Column` の `Autosize` メソッドで列を動的に自動でサイズ変更できます。 + + ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: {ComponentName}; @@ -418,7 +536,7 @@ constructor() { @code { private {ComponentSelector} gridRef; - protected void OnInitialize() + private void AutosizeColumn() { IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "ID"; }).FirstOrDefault(); column.Autosize(false); @@ -426,6 +544,44 @@ constructor() { } ``` + + + + +```typescript +@ViewChild('@@igObjectRef') @@igObjectRef: {ComponentName}; + +let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0]; +column.autosize(); +``` + + +```typescript +constructor() { + var column = this.column = document.getElementById('Artist') as IgcColumnComponent; + column.autosize(); +} +``` + +```tsx +const column = grid.getColumnByName('Artist'); +column.autosize(); +``` + +```razor +@code { + private {ComponentSelector} gridRef; + + private void AutosizeColumn() + { + IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "Artist"; }).FirstOrDefault(); + column.Autosize(false); + } +} +``` + + + ## 初期化時に列を自動サイズ調整 `Width` を 'auto' に設定することで、初期化時に各列を自動サイズに設定できます。 @@ -451,6 +607,7 @@ constructor() { このアプローチは、初期化後の自動サイズ変更よりもパフォーマンスが最適化されており、特に多数の列のサイズを自動サイズ設定する必要がある場合に推奨されます。 `sample="/{ComponentSample}/column-auto-sizing", height="550", alt="{Platform} {ComponentTitle} 列のサイズ変更の例"` + ## スタイル設定 diff --git a/doc/jp/components/grids/_shared/column-types.md b/doc/jp/components/grids/_shared/column-types.md index f73b58b61..b665b19ce 100644 --- a/doc/jp/components/grids/_shared/column-types.md +++ b/doc/jp/components/grids/_shared/column-types.md @@ -68,15 +68,10 @@ public formatOptions = this.options; ``` ```ts -private _formatOptions: any | null = null; public get formatOptions(): any { - if (this._formatOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs.digitsInfo = "1.4-4"; - this._formatOptions = columnPipeArgs; - } - return this._formatOptions; + return { + digitsInfo: "1.4-4" + }; } constructor() { @@ -139,16 +134,11 @@ public formatOptions = this.options; ``` ```ts -private _formatDateOptions: any | null = null; public get formatDateOptions(): any { - if (this._formatDateOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs2.format = "long"; - columnPipeArgs2.timezone = "UTC+0"; - this._formatDateOptions = columnPipeArgs; - } - return this._formatDateOptions; + return { + format: "long", + timezone: "UTC+0" + }; } constructor() { @@ -287,9 +277,7 @@ const timeFormats = [ ``` ```tsx - - - + ``` 列に `AutoGenerate` を使用すると、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に `dataType === GridColumnDataType.Image` としてマークされ、デフォルトの画像テンプレートが描画されます。 @@ -368,17 +356,12 @@ public formatOptions = this.options; ``` ```ts -private _formatOptions: any | null = null; - public get formatOptions(): any { - if (this._formatOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs.digitsInfo = "1.4-4"; - columnPipeArgs.display = "symbol-narrow"; - this._formatOptions = columnPipeArgs; - } - return this._formatOptions; - } +public get formatOptions(): any { + return { + digitsInfo: '3.4-4', + display: 'symbol-narrow' + }; +} constructor() { var column = document.getElementById('column') as IgcColumnComponent; @@ -405,7 +388,8 @@ formatOptions.display = "symbol-narrow"; *display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。 -セルの値を編集すると、**通貨記号**がサフィックスまたはプレフィックスとして表示されます。詳細については、公式の[セル編集トピック](cell-editing.md#セル編集と編集テンプレートの例)を参照してください。 +セルの値を編集すると、**通貨記号**がサフィックスまたはプレフィックスとして表示されます。詳細については、公式の[セル編集トピック](cell-editing.md#セル編集と編集テンプレートの例)を参照してください。 + > 注: 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。 @@ -465,16 +449,18 @@ public formatPercentOptions = this.options; ``` ```ts -private _formatPercentOptions: any | null = null; - public get formatPercentOptions(): any { - if (this._formatPercentOptions == null) - { - var columnPipeArgs: any = {}; - columnPipeArgs.digitsInfo = "2.2-3"; - this._formatPercentOptions = columnPipeArgs; - } - return this._formatPercentOptions; - } +public get formatPercentOptions(): any { + return { + /** + * Decimal representation options, specified by a string in the following format: + * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. + * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. + * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + */ + digitsInfo: '2.2-3' + }; +} constructor() { var column = document.getElementById('column') as IgcColumnComponent; @@ -483,6 +469,13 @@ constructor() { ``` ```tsx +/** +* Decimal representation options, specified by a string in the following format: +* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. +* `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. +* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. +* `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. +*/ const formatOptions = new IgrColumnPipeArgs(); formatOptions.digitsInfo = "2.2-3"; @@ -501,22 +494,23 @@ formatOptions.digitsInfo = "2.2-3"; カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。 ### カスタム テンプレート - + ```html - +<{ComponentSelector} #grid1 [data]="data | async" [autoGenerate]="false"> {{ value | currency:'USD':'symbol':'1.0-0'}} - + ``` + ```html - +<{ComponentSelector} id="grid1" auto-generate="false"> - + ``` ```ts @@ -539,9 +533,9 @@ function editCellTemplate(ctx: IgrCellTemplateContext) { ); } - +<{ComponentSelector} autoGenerate="false"> - + ``` ```razor @@ -560,10 +554,10 @@ function editCellTemplate(ctx: IgrCellTemplateContext) { ### 列の書式設定 ```html - +<{ComponentSelector} id="grid1" auto-generate="false"> - + ``` ```ts @@ -582,9 +576,9 @@ function formatCurrency(value: number) { return `$ ${value.toFixed(0)}`; } - +<{ComponentSelector} autoGenerate="false"> - + ``` ```razor diff --git a/doc/jp/components/grids/_shared/conditional-cell-styling.md b/doc/jp/components/grids/_shared/conditional-cell-styling.md index 3a6b93170..5d2cb215e 100644 --- a/doc/jp/components/grids/_shared/conditional-cell-styling.md +++ b/doc/jp/components/grids/_shared/conditional-cell-styling.md @@ -33,8 +33,8 @@ _language: ja ```razor - - +<{ComponentSelector} AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid"> + ``` @@ -45,7 +45,7 @@ _language: ja ```ts constructor() { - var grid = this.grid = document.getElementById('grid') as IgcGridComponent; + var grid = this.grid = document.getElementById('grid') as {ComponentName}; grid.rowClasses = this.rowClasses; } ``` @@ -253,7 +253,18 @@ public childRowStyles = { ``` ```razor -Add Hierarchical styles +igRegisterScript("WebGridRowStylesHandler", () => { + return { + background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb', + 'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null + }; +}, true); + +igRegisterScript("WebGridChildRowStylesHandler", () => { + return { + 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null + }; +}, true); ``` ```html @@ -265,13 +276,17 @@ Add Hierarchical styles ``` ```razor -Add Hierarchical markup + + + + ``` ```html - - + > ``` @@ -283,12 +298,20 @@ constructor() { rowIsland1.rowStyles = this.childRowStyles; } ``` + +```tsx + + + + +``` ### デモ -`sample="/{ComponentSample}/row-styles", height="620", alt="{Platform} {ComponentTitle} row styles"` +`sample="/{ComponentSample}/row-styles", height="620", alt="{Platform} {ComponentTitle} 行のスタイル設定"` ## {ComponentTitle} 条件付きセルのスタイル設定 @@ -328,6 +351,27 @@ constructor() { + +```html + +``` +```ts +constructor() { + var grammyNominations = document.getElementById('grammyNominations') as IgcColumnComponent; + grammyNominations.cellClasses = this.grammyNominationsCellClassesHandler; +} +``` + +```razor + +``` + +```tsx + +``` + + + @@ -365,12 +409,6 @@ Add tree grid example - -```razor -add example -``` - - `CellClasses` 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。 @@ -445,6 +483,43 @@ igRegisterScript("CellClassesHandler", () => { + + +```typescript +public grammyNominationsCellClassesHandler = { + downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5, + upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6 +}; +``` + + +```tsx +public grammyNominationsCellClassesHandler = { + downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5, + upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6 +}; +``` + +```razor +igRegisterScript("GrammyNominationsCellClassesHandler", () => { + return { + downFont: (rowData, columnKey) => rowData[columnKey] < 5, + upFont: (rowData, columnKey) => rowData[columnKey] >= 6 + }; +}, true); +``` +```css +.upFont { + color: green !important; +} + +.downFont { + color: red !important; +} +``` + + + ```typescript @@ -480,13 +555,6 @@ Add treegrid example - - -```razor -Add hierarchical grid example -``` - - **::ng-deep** または **ViewEncapsulation.None** を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。 @@ -512,10 +580,6 @@ Add hierarchical grid example 列の `CellStyles` プロパティを公開。列セルの条件付きスタイリングが可能になりました。`CellClasses` と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。 -[上記のサンプル](#デモ)で作成した項目: -- 列インデックスに基づいて適用される 2 つの異なるスタイル。 -- また、偶数/奇数行に基づいて**テキストの色**を変更します。 - 次にスタイルを定義します。 @@ -538,6 +602,7 @@ public evenColStyles = { + ```razor igRegisterScript("WebGridCellStylesHandler", () => { return { @@ -554,6 +619,7 @@ igRegisterScript("WebGridCellStylesHandler", () => { }; }, true); ``` + ```ts public webGridCellStylesHandler = { @@ -677,6 +743,142 @@ constructor() { ```tsx ``` + + + +```razor +igRegisterScript("CellStylesHandler", () => { + return { + background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null, + color: (rowData, columnKey, cellValue, rowIndex) => { + if (columnKey === "Debut") { + return cellValue > 2000 ? "#28a745" : "#dc3545"; + } + return undefined; + } + }; +}, true); +``` + + +```ts +public cellStylesHandler = { + background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null, + color: (rowData, columnKey, cellValue, rowIndex) => { + if (columnKey === "Debut") { + return cellValue > 2000 ? "#28a745" : "#dc3545"; + } + return undefined; + } +} +``` + + +```tsx +const cellStylesHandler = { + background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null, + color: (rowData, columnKey, cellValue, rowIndex) => { + if (columnKey === "Debut") { + return cellValue > 2000 ? "#28a745" : "#dc3545"; + } + return undefined; + } +} +``` + + +`ngOnInit` で、`{ComponentName}` 列を動的に作成するために使用される事前定義 `Columns` コレクションの各列に `CellStyles` 構成を追加します。 + +```ts +public ngOnInit() { + this.data = athletesData; + this.columns = [ + { field: 'Id' }, + { field: 'Position' }, + { field: 'Name' }, + { field: 'AthleteNumber' }, + { field: 'CountryName' } + ]; + + this.applyCSS(); +} + +public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); +} + +public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); +} +``` + +```html + + + + +``` + +`popin` アニメーションの定義: + +```scss +// component.scss +@keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } +} +``` + + + +```razor + + +``` + +```html + + +``` + +```ts +constructor() { + var col1 = document.getElementById('col1') as IgcColumnComponent; + col1.cellStyles = this.cellStylesHandler; +} +``` + + +```tsx + +``` + + ### デモ @@ -712,16 +914,16 @@ public editDone(evt) { ``` ```html - +<{ComponentSelector} id="grid1" height="500px" width="100%" > - +<{ComponentSelector}> ``` ```ts constructor() { - var grid = this.grid = document.getElementById('grid1') as IgcGridComponent; + var grid = this.grid = document.getElementById('grid1') as {ComponentName}; var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent; var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent; var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent; @@ -747,11 +949,11 @@ function editDone(grid, evt) { backgroundClasses = {...backgroundClasses}; } - +<{ComponentSelector} id="grid1" height="500px" width="100%" onCellEdit={editDone}> - + ``` ## API リファレンス @@ -779,6 +981,7 @@ function editDone(grid, evt) { * [表示密度](display-density.md) + コミュニティに参加して新しいアイデアをご提案ください。 * [{ProductName} **フォーラム (英語)**]({ForumsLink}) diff --git a/doc/jp/components/grids/_shared/display-density.md b/doc/jp/components/grids/_shared/display-density.md index 008002bdf..c9b60241d 100644 --- a/doc/jp/components/grids/_shared/display-density.md +++ b/doc/jp/components/grids/_shared/display-density.md @@ -11,7 +11,6 @@ _language: ja # {Platform} {ComponentTitle} 表示密度 {Platform} {ComponentTitle} の {ProductName} 表示密度を使用すると、ユーザーは `{ComponentName}` 内のデータの間隔とレイアウトを制御できます。[密度](https://material.io/design/layout/applying-density.html)を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つの表示密度オプションから選択できます。 - - Cozy - Comfortable - Compact @@ -51,8 +50,7 @@ _language: ja ``` - -or +または ```typescript @@ -86,6 +84,7 @@ gridRef.current.displayDensity = 'cosy'; ``` + ```razor
``` + ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; @@ -161,6 +161,57 @@ public ngOnInit() { } ``` + +```razor +
+ + + + +
+``` + +```html +
+ + + + +
+``` + +```tsx + + + + +``` + + マークアップを追加します。 @@ -496,27 +547,6 @@ public ngOnInit() { ``` - -```ts -constructor() { - var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; - var grid = this.grid = document.getElementById('grid') as IgcGridComponent; - propertyEditor.componentRenderer = this.renderer; - propertyEditor.target = this.grid; - grid.data = this.data; -} - -private _componentRenderer: ComponentRenderer = null; -public get renderer(): ComponentRenderer { - if (this._componentRenderer == null) { - this._componentRenderer = new ComponentRenderer(); - var context = this._componentRenderer.context; - PropertyEditorPanelDescriptionModule.register(context); - WebGridDescriptionModule.register(context); - } - return this._componentRenderer; -} -``` @@ -658,26 +688,6 @@ public get renderer(): ComponentRenderer { ``` -```ts -constructor() { - var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; - var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent; - propertyEditor.componentRenderer = this.renderer; - propertyEditor.target = this.grid; - grid.data = this.data; -} - -private _componentRenderer: ComponentRenderer = null; -public get renderer(): ComponentRenderer { - if (this._componentRenderer == null) { - this._componentRenderer = new ComponentRenderer(); - var context = this._componentRenderer.context; - PropertyEditorPanelDescriptionModule.register(context); - WebGridDescriptionModule.register(context); - } - return this._componentRenderer; -} -``` @@ -711,6 +721,7 @@ public get renderer(): ComponentRenderer { + @@ -723,6 +734,123 @@ public get renderer(): ComponentRenderer { ``` ```razor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` ```html @@ -765,6 +893,7 @@ public get renderer(): ComponentRenderer { + @@ -775,10 +904,68 @@ public get renderer(): ComponentRenderer { ``` + +```tsx + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + + + +最後に密度を適用するためのロジックを実装します。 + + + +```typescript +@ViewChild('grid', { read: {ComponentName} }) +public grid: {ComponentName}; + +public selectDensity(event) { + this.density = this.displayDensities[event.index].label; +} +``` + + + ```ts constructor() { var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; - var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; + var grid = this.grid = document.getElementById('grid') as {ComponentName}; propertyEditor.componentRenderer = this.renderer; propertyEditor.target = this.grid; grid.data = this.data; @@ -795,20 +982,7 @@ public get renderer(): ComponentRenderer { return this._componentRenderer; } ``` - - -最後に密度を適用するためのロジックを実装します。 - - -```typescript -@ViewChild('grid', { read: {ComponentName} }) -public grid: {ComponentName}; - -public selectDensity(event) { - this.density = this.displayDensities[event.index].label; -} -``` - + ```razor @code { @@ -824,7 +998,39 @@ public selectDensity(event) { private IgbPropertyEditorPanel propertyEditor; private IgbPropertyEditorPropertyDescription displayDensityEditor; - private IgbGrid grid; + private {ComponentSelector} grid; +} +``` + +```tsx +private propertyEditor: IgrPropertyEditorPanel +private propertyEditorRef(r: IgrPropertyEditorPanel) { + this.propertyEditor = r; + this.setState({}); +} +private displayDensityEditor: IgrPropertyEditorPropertyDescription +private grid: {ComponentName} +private gridRef(r: {ComponentName}) { + this.grid = r; + this.setState({}); +} + +constructor(props: any) { + super(props); + + this.propertyEditorRef = this.propertyEditorRef.bind(this); + this.gridRef = this.gridRef.bind(this); +} + +private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + WebHierarchicalGridDescriptionModule.register(context); + } + return this._componentRenderer; } ``` @@ -891,7 +1097,8 @@ public selectDensity(event) { * [検索](search.md) + コミュニティに参加して新しいアイデアをご提案ください。 * [{ProductName} **フォーラム (英語)**]({ForumsLink}) -* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file +* [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/doc/jp/components/grids/_shared/editing.md b/doc/jp/components/grids/_shared/editing.md index 2e0e9b08a..76ca0d18d 100644 --- a/doc/jp/components/grids/_shared/editing.md +++ b/doc/jp/components/grids/_shared/editing.md @@ -62,14 +62,14 @@ _language: ja - カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。 - + すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.md#デフォルトのテンプレート)にあります。 - + ### イベントの引数とシーケンス - + グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行の編集**](row-editing.md)および[**セルの編集**](cell-editing.md)のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。 - + | イベント | 説明 | 引数 | キャンセル可能 | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | @@ -108,6 +108,7 @@ _language: ja たとえば、ユーザーがセル/行が編集モードのときに列をソートしようとする場合に、新しい値をコミットする方法を示します: + ```html @@ -179,6 +180,76 @@ function onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { ``` + + + + +```html + + +``` + + + +```html +<{ComponentSelector} id="hierarchicalGrid" primary-key="ProductID" > + +``` + +```ts +constructor() { + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; + hierarchicalGrid.data = this.data; + hierarchicalGrid.addEventListener("sorting", this.onSorting); +} + +public onSorting(event: IgcSortingEventArgs) { + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; + hierarchicalGrid.endEdit(true); +} +``` + + + +```typescript +public onSorting(event: ISortingEventArgs) { + this.hierarchicalGrid.endEdit(true); +} +``` + + +```razor +<{ComponentSelector} + Id="hierarchicalGrid" + SortingScript="SortingHandler" + RowEditable="true"> + + +//In JavaScript +function SortingHandler() { + hierarchicalGrid.endEdit(true); +} +igRegisterScript("SortingHandler", SortingHandler, false); +``` + + + +```tsx + + +``` + + + + +```tsx +public onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { + hierarchicalGrid.endEdit(true); +} +``` + + + ## API リファレンス diff --git a/doc/jp/components/grids/_shared/excel-style-filtering.md b/doc/jp/components/grids/_shared/excel-style-filtering.md index 475e0797f..ad6efa6d3 100644 --- a/doc/jp/components/grids/_shared/excel-style-filtering.md +++ b/doc/jp/components/grids/_shared/excel-style-filtering.md @@ -42,8 +42,8 @@ _language: ja ```tsx - - +<{ComponentSelector} data={nwindData} autoGenerate="true" allowFiltering="true" filterMode={FilterMode.ExcelStyleFilter}> + ``` @@ -82,16 +82,13 @@ _language: ja ``` ```razor - - - - - - - + + + + + + + ``` ```html @@ -110,7 +107,7 @@ _language: ja ``` ```tsx - + @@ -156,7 +153,7 @@ _language: ja ``` ```razor - + @@ -193,7 +190,7 @@ _language: ja ```html - @@ -204,67 +201,48 @@ _language: ja - - - - - - - - - - - - - - - - - - - - - - + + + ``` -```razor -Add blazor snippets here -``` - ```html - + - - + - - - - - - - - - - - - - - - - - - - - - - + + + ``` +```tsx + + + + + + + {/* ... */} + +``` + +```razor + + + + + + + @* ... *@ + +``` + 下のサンプルでは、「Artist」 列では 3 つの機能がすべて有効化され、「Debut」 では 3 つすべてが無効化され、「Grammy Nominations」 ではピン固定と非表示のみが設定されています。 @@ -293,9 +271,7 @@ Excel スタイル フィルター メニューをさらにカスタマイズす 次のコードは、`ExcelStyleHeaderIconTemplate` を使用して Excel スタイル フィルター メニューをカスタマイズする方法を示しています。 ```razor -<{ComponentSelector} - Name="grid" - @ref="grid" +<{ComponentSelector} Data="Data" AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter" @@ -309,6 +285,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => { }, false); ``` + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -319,6 +296,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => { return html`Continued` } ``` + ```tsx const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => { @@ -333,15 +311,9 @@ const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => ); } -function App() { - return ( - <> - - - <> - ) -} +<{ComponentSelector} autoGenerate="true" allowFiltering="true" filterMode="excelStyleFilter" + excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}> + ``` @@ -725,7 +697,7 @@ Add snippet for blazor ### デモ -`sample="/{ComponentSample}/external-outlet", height="700", alt="{Platform} {ComponentTitle} external outlet"` +`sample="/{ComponentSample}/external-outlet", height="700", alt="{Platform} {ComponentTitle} 表示要素が重なる場合のアウトレット"` @@ -1055,7 +1027,7 @@ $custom-drop-down: drop-down-theme( ``` ```tsx - +<{ComponentSelector} className="grid"> ``` ```razor diff --git a/doc/jp/components/grids/_shared/export-excel.md b/doc/jp/components/grids/_shared/export-excel.md index eadabef7b..274ec3738 100644 --- a/doc/jp/components/grids/_shared/export-excel.md +++ b/doc/jp/components/grids/_shared/export-excel.md @@ -124,6 +124,7 @@ public exportButtonHandler() { + ```ts constructor() { var gridToolbarExporter1 = document.getElementById('gridToolbarExporter1') as IgcGridToolbarExporterComponent; @@ -134,6 +135,22 @@ public webGridExportEventFreezeHeaders(args: any): void { args.detail.options.freezeHeaders = true; } ``` + + + + + +```ts +constructor() { + var hGridToolbarExporter = document.getElementById('hGridToolbarExporter') as IgcGridToolbarExporterComponent; + hGridToolbarExporter.addEventListener("exportStarted", this.webGridExportEventFreezeHeaders); +} + +public webGridExportEventFreezeHeaders(args: CustomEvent): void { + args.detail.options.freezeHeaders = true; +} +``` + ```tsx @@ -148,21 +165,56 @@ function exportEventFreezeHeaders(grid: IgrGridBaseDirective, args: IgrExporterE ``` + + +```tsx +function exportEventFreezeHeaders(sender: IgrGridToolbarExporter, args: IgrExporterEventEventArgs) { + args.detail.options.freezeHeaders = true; +} + + + + + + +``` + + + ```razor <{ComponentSelector}> + ExportExcel="true" ExportStartedScript="WebGridExportEventFreezeHeaders"> -igRegisterScript("WebGridExportEventMultiColumnHeaders", (ev) => { - ev.detail.options.ignoreMultiColumnHeaders = false; +igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => { + ev.detail.options.freezeHeaders = false; }, false); ``` + + +```razor + <{ComponentSelector}> + + + + + + + + +igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => { + ev.detail.options.freezeHeaders = false; +}, false); +``` + + ```razor diff --git a/doc/jp/components/grids/_shared/filtering.md b/doc/jp/components/grids/_shared/filtering.md index 0b29bb24a..cc385b985 100644 --- a/doc/jp/components/grids/_shared/filtering.md +++ b/doc/jp/components/grids/_shared/filtering.md @@ -60,23 +60,19 @@ _language: ja ``` - ```html <{ComponentSelector} id="grid1" auto-generate="false" allow-filtering="true"> -<{ComponentSelector}> + ``` - - ```tsx <{ComponentSelector} data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowFiltering="true"> ``` - [高度なフィルタリング](advanced-filtering.md) を有効にするには、`AllowAdvancedFiltering` 入力プロパティを **true** に設定します。 @@ -580,20 +576,16 @@ constructor() { - - + + ``` ```ts constructor() { - var artist = this.artist = document.getElementById('Artist') as IgcColumnComponent; - var hasGrammyAward = this.hasGrammyAward = document.getElementById('HasGrammyAward') as IgcColumnComponent; - - this._bind = () => { - artist.bodyTemplate = this.caseSensitiveFilteringOperand; - hasGrammyAward.bodyTemplate = this.booleanFilteringOperand; - } - this._bind(); + var artist = document.getElementById('Artist') as IgcColumnComponent; + var hasGrammyAward = document.getElementById('HasGrammyAward') as IgcColumnComponent; + artist.filters = this.caseSensitiveFilteringOperand; + hasGrammyAward.filters = this.booleanFilteringOperand; } ``` @@ -651,18 +643,18 @@ public matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStr 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。 -```ts +```html <{ComponentSelector} class="grid"> ``` ```razor -<{ComponentSelector} Class="grid"> +<{ComponentSelector} Class="grid"> ``` ```tsx - +<{ComponentSelector} className="grid"> ``` diff --git a/doc/jp/components/grids/_shared/multi-column-headers.md b/doc/jp/components/grids/_shared/multi-column-headers.md index 7a1be0165..848163187 100644 --- a/doc/jp/components/grids/_shared/multi-column-headers.md +++ b/doc/jp/components/grids/_shared/multi-column-headers.md @@ -118,24 +118,76 @@ _language: ja ```html - + - - - - + + + + - - + + ``` ```razor -TO-DO H-GRID CODE SNIPPET +<{ComponentSelector} Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true"> + + + + + + + + + + + + + + +``` + + +```html + + + + + + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + + + + + + ``` @@ -260,7 +312,7 @@ TO-DO H-GRID CODE SNIPPET ```html - + @@ -271,7 +323,44 @@ TO-DO H-GRID CODE SNIPPET ``` ```razor -TO-DO H-GRID CODE SNIPPET +<{ComponentSelector} Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true"> + + + + + + + + + +``` + + +```html + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + ``` @@ -286,7 +375,7 @@ TO-DO H-GRID CODE SNIPPET ```html <{ComponentSelector} [data]="data" height="600px" [allowFiltering]="true"> - + @@ -398,7 +487,44 @@ TO-DO H-GRID CODE SNIPPET ``` ```razor -TO-DO H-GRID CODE SNIPPET +<{ComponentSelector} Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true"> + + + + + + + + + +``` + + +```html + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + ``` diff --git a/doc/jp/components/grids/_shared/row-actions.md b/doc/jp/components/grids/_shared/row-actions.md index 13999c1cf..010e38639 100644 --- a/doc/jp/components/grids/_shared/row-actions.md +++ b/doc/jp/components/grids/_shared/row-actions.md @@ -79,6 +79,22 @@ import { IgxActionStripModule } from 'igniteui-angular'; ``` + +```razor + + @foreach (var c in columns) + { + + + } + + + + + +``` + + ```html @@ -100,9 +116,22 @@ import { IgxActionStripModule } from 'igniteui-angular'; ``` + + +```html + + + + + + + +``` + + ```tsx <{ComponentSelector} id="grid" rowEditable="true" primaryKey="ID"> @@ -113,6 +142,20 @@ import { IgxActionStripModule } from 'igniteui-angular'; ``` + + + +```tsx + + + + + + + + +``` + > [!Note] @@ -139,6 +182,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; ``` + ```razor
<{ComponentSelector} Data=northwindEmployees> @@ -157,11 +201,33 @@ import { IgxActionStripModule } from 'igniteui-angular';
``` + - + +```razor +
+ + + + + edit + + @if (!IsDeleted(actionstrip.Context)) + { + + delete + + } + + +
+``` + + + ```html <{ComponentSelector}> @@ -170,17 +236,42 @@ import { IgxActionStripModule } from 'igniteui-angular'; ``` + + + +```html + + + + + + +``` + + ```tsx <{ComponentSelector}> - + ``` + + + +```tsx + + + + + + +``` + `sample="/{ComponentSample}/action-strip", height="600", alt="{Platform} {ComponentTitle} アクション ストリップの例"` diff --git a/doc/jp/components/grids/_shared/row-adding.md b/doc/jp/components/grids/_shared/row-adding.md index e556c92c5..b14ed86b0 100644 --- a/doc/jp/components/grids/_shared/row-adding.md +++ b/doc/jp/components/grids/_shared/row-adding.md @@ -186,9 +186,8 @@ export class AppModule {} - - + ```html <{ComponentSelector} igxPreventDocumentScroll [data]="localdata" [autoGenerate]="false" [primaryKey]="'Debut'" [rowEditable]="true"> @@ -226,9 +225,11 @@ export class AppModule {}
``` + + ```html <{ComponentSelector} id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true"> @@ -265,8 +266,11 @@ export class AppModule {} ``` + + + ```razor <{ComponentSelector} AutoGenerate="false" Id="hGrid" PrimaryKey="Debut" RowEditable="true"> @@ -303,8 +307,148 @@ export class AppModule {} ``` + + + + +```tsx +<{ComponentSelector} + autoGenerate="false" + data={this.singersData} + id="hGrid" + primaryKey="ID" + rowEditable="true" + ref={this.hierarchicalGrid1Ref}> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + > **注**: > プライマリ キーは行追加操作で必須です。 @@ -460,6 +604,7 @@ this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the fi 行追加オーバーレイのテキストのカスタマイズは、`RowAddTextDirective` を使用して可能です。 + ```html <{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true"> @@ -467,24 +612,41 @@ this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the fi ``` + + ```ts this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => { return html`Adding Row`; } ``` + + +```tsx +gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { + return ('Adding Row'); +} +``` + + + + + ```tsx gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { return ('Adding Row'); } ``` + + + ```razor <{ComponentSelector} Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate"> @@ -496,6 +658,8 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { }; } ``` + + ### ボタンのカスタマイズ diff --git a/doc/jp/components/grids/_shared/row-drag.md b/doc/jp/components/grids/_shared/row-drag.md index 759066bf0..b22285d3d 100644 --- a/doc/jp/components/grids/_shared/row-drag.md +++ b/doc/jp/components/grids/_shared/row-drag.md @@ -317,6 +317,58 @@ public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => { そのためには、`DragIndicatorIcon` を使用して `{ComponentSelector}` の本体内にテンプレートを渡すことができます。 + + +```tsx + function dragIndicatorIconTemplate(ctx: IgrGridEmptyTemplateContext) { + return ( + <> + + + ); + } + + + +``` + + +```razor + + + +private RenderFragment dragIndicatorIconTemplate = (context) => +{ + return @
+ +
; +}; +``` + + + + + +```html +<{ComponentSelector} row-draggable="true" id="grid"> + +``` + +```ts +constructor() { + var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; + grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate; +} + +public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => { + return html``; +} +``` + + + + + ```html <{ComponentSelector}> @@ -327,6 +379,8 @@ public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => { ``` + + ```html @@ -371,6 +425,7 @@ private RenderFragment dragIndicatorIconTemplate =
; }; ``` + 新しいアイコン テンプレートの設定後、**DragIcon enum** の **DEFAULT** アイコンも調整する必要があるため、`ChangeIcon` メソッドによって適切に変更されます。 @@ -450,10 +505,13 @@ enum DragIcon { > [!Note] > 上記のデモで使用されている行ドラッグ ゴーストに適用されるクラスは ::ng-deep 修飾子を使用しています。これは、行ドラッグが内部グリッド機能であり、CSS カプセル化のためにアプリケーション レベルでアクセスできないためです。 + + ### 行の並べ替えデモ + グリッドの行ドラッグ イベントと `Drop` ディレクティブを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。 すべてのアクションはグリッド本体の**内側**で発生するため、ここで `Drop` ディレクティブをアタッチする必要があります: @@ -468,6 +526,62 @@ enum DragIcon { グリッドの行ドラッグ イベントを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。 + + + + +```html + + +``` + +```ts +constructor() { + var hGrid = this.grihGridd = document.getElementById('hGrid') as IgcHierarchicalGridComponent; + hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler) +} +``` + + +```tsx + + +``` + +```razor + + +// In JavaScript +igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +}, false); + +function getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + + + + ```html @@ -483,11 +597,16 @@ constructor() { ``` + + ```tsx ``` + + + ```razor @@ -517,6 +636,9 @@ function getCurrentRowIndex(rowList, cursorPosition) { return -1; } ``` + + + @@ -688,6 +810,8 @@ export class TreeGridRowReorderComponent { + + ```typescript export class HGridRowReorderComponent { public rowDragStart(args: any): void { @@ -739,6 +863,98 @@ export class HGridRowReorderComponent { } ``` + + + +```tsx + public webHierarchicalGridReorderRowHandler(sender: IgrHierarchicalGrid, args: IgrRowDragEndEventArgs): void { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = this.hierarchicalGrid; + grid.collapseAll(); + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); + } + + public getCurrentRowIndex(rowList: any[], cursorPosition: any) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; + } +``` + + + +```typescript +public webGridReorderRowHandler(args: CustomEvent): void { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +} +public getCurrentRowIndex(rowList: any[], cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + + +```razor + + +//In JavaScript +igRegisterScript("WebGridReorderRowHandler", (args) => { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +}, false); + +function getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + これらの簡単な手順で、ドラッグ/ドロップで行を並べ替えることができるグリッドを構成しました! 次のデモで、上記コードの動作を確認できます。 diff --git a/doc/jp/components/grids/_shared/row-editing.md b/doc/jp/components/grids/_shared/row-editing.md index a44c5efba..791268bd2 100644 --- a/doc/jp/components/grids/_shared/row-editing.md +++ b/doc/jp/components/grids/_shared/row-editing.md @@ -43,6 +43,8 @@ export class AppModule {} 次に `{ComponentName}` をバインドしたデータソースで定義し、`RowEditable` を true に設定してバインドします。 + + ```html <{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true"> @@ -106,8 +108,6 @@ function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) { ``` - - ```razor <{ComponentSelector} Width="100%"   Height="100%" @@ -137,6 +137,306 @@ function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) { } } ``` + + + + +```html +<{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true"> + + + + + + + + + + + +``` + + + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +```ts +constructor() { + var grid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; + grid.data = this.data; +} +``` + + + +```tsx + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + + + +```razor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + + > [!Note] > プライマリキーは行編集操作で必須です。 @@ -233,14 +533,14 @@ export class {ComponentName}RowEditSampleComponent { ``` - ```razor +```razor igRegisterScript("RowEditTextTemplate", (ctx) => { var html = window.igTemplating.html; return html`
Changes: ${ctx.implicit}
`; }, false); - ``` +``` ```ts public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => { @@ -248,6 +548,8 @@ public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => { } ``` + + ```tsx function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) { return ( @@ -257,6 +559,8 @@ function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) { ); } ``` + + ### ボタンのカスタマイズ @@ -266,14 +570,14 @@ function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) { キーボード ナビゲーションにボタンを含める場合、各ボタンに `RowEditTabStopDirective` が必要です。 - ```html +```html - ``` +``` - ```razor +```razor igRegisterScript("RowEditActionsTemplate", (ctx) => { var html = window.igTemplating.html; window.endRowEdit = ctx.implicit; @@ -282,7 +586,7 @@ function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) { `; }, false); - ``` +``` ```ts public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => { @@ -294,6 +598,8 @@ public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => { } ``` + + ```tsx function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) { const endRowEdit = ctx.dataContext.implicit; @@ -305,6 +611,8 @@ function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) { ); } ``` + + diff --git a/doc/jp/components/grids/_shared/row-pinning.md b/doc/jp/components/grids/_shared/row-pinning.md index f9a51e526..5d35ac24a 100644 --- a/doc/jp/components/grids/_shared/row-pinning.md +++ b/doc/jp/components/grids/_shared/row-pinning.md @@ -32,7 +32,7 @@ _language: ja ``` - + ```razor <{ComponentSelector} Width="100%"   Height="100%" @@ -56,8 +56,10 @@ _language: ja ``` + + ```html <{ComponentSelector} auto-generate="false"> @@ -67,8 +69,10 @@ _language: ja ``` + + ```tsx <{ComponentSelector}> @@ -78,6 +82,7 @@ _language: ja ``` + ## 行のピン固定 API @@ -147,6 +152,7 @@ public rowPinning(event) { ``` + ```tsx function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) { event.detail.insertAtIndex = 0; @@ -155,6 +161,7 @@ function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) { <{ComponentSelector} autoGenerate="true" rowPinning={rowPinning}> ``` + ```razor <{ComponentSelector} Width="100%" @@ -176,7 +183,6 @@ function rowPinningHandler(event) { igRegisterScript("rowPinningHandler", rowPinningHandler, false); ``` - ## ピン固定の位置 @@ -226,7 +232,16 @@ grid.pinning = { rows: RowPinningPosition.Bottom }; } } ``` - + + +```tsx + <{ComponentSelector} id="dataGrid" autoGenerate="true"> + + + var hierarchicalGrid = document.getElementById("dataGrid") as IgrGrid; + hierarchicalGrid.pinning = { rows: RowPinningPosition.Bottom }; +``` + ## カスタム行ピン固定 UI @@ -237,6 +252,7 @@ grid.pinning = { rows: RowPinningPosition.Bottom }; アクション ストリップの代わりに、すべての行にピンのアイコンを表示し、エンドユーザーが特定の行のピン状態をクリックして変更できます。 カスタム アイコンを含むセル テンプレートの列を追加することで実行できます。 + ```razor @@ -271,7 +287,6 @@ igRegisterScript("WebGridRowPinCellTemplate", (ctx) => { ``` -カスタムアイコンをクリックすると、関連する行のピン状態は、行の API メソッドを使用して変更できます。 ```typescript public togglePinning(row: IgxGridRow, event) { @@ -306,7 +321,9 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => { return html` this.togglePinning(index)}>📌`; } ``` + + ```tsx function cellPinCellTemplate(ctx: IgrCellTemplateContext) { const index = ctx.dataContext.cell.id.rowIndex; @@ -322,9 +339,106 @@ function cellPinCellTemplate(ctx: IgrCellTemplateContext) { ``` + -カスタムアイコンをクリックすると、関連する行のピン状態は、行の API メソッドを使用して変更できます。 + + + +```razor + + +// In Javascript + +igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => { + var html = window.igTemplating.html; + window.toggleRowPin = function toggleRowPin(row) { + row.pinned = !row.pinned; + } + const row = ctx.cell.row; + return html`
+ 📌 +
`; +}, false); +``` + + +```html +<{ComponentSelector} [data]="data" [primaryKey]="'ID'" [autoGenerate]="false"> + + + + {{cell.row.pinned ? 'lock' : 'lock_open'}} + + + + + + + + +``` + + +```typescript +public togglePinning(row: IgxGridRow, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } +} +``` + + +```html +<{ComponentSelector} id="grid" primary-key="ID" auto-generate="false"> + + + + +``` + +```typescript +constructor() { + var grid = document.getElementById('grid') as {ComponentName}Component; + var column = document.getElementById('column1') as IgcColumnComponent; + + grid.data = this.data; + column.bodyTemplate = this.pinCellTemplate; +} + +public pinCellTemplate = (ctx: IgcCellTemplateContext) => { + const row = ctx.cell.row; + return html` this.togglePinning(row)}>📌`; +} +``` + + + +```tsx +function cellPinCellTemplate(ctx: IgrCellTemplateContext) { + const row = ctx.dataContext.cell.row; + return ( + <> + toggleRowPin(row)}>📌 + + ); +} + +<{ComponentSelector} primaryKey="ID" autoGenerate="false"> + + + + +``` + + + + + +カスタムアイコンをクリックすると、関連する行のピン状態は、行の API メソッドを使用して変更できます。 ```typescript public togglePinning(index: number) { @@ -340,6 +454,24 @@ function toggleRowPin(index: number) { grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned; } ``` + + + +カスタムアイコンをクリックすると、関連する行のピン状態は、行の API メソッドを使用して変更できます。 + +```typescript +public togglePinning(row: IgcRowType) { + row.pinned = !row.pinned; +} +``` + + +```tsx +function toggleRowPin(row: IgrRowType) { + row.pinned = !row.pinned; +} +``` + #### デモ diff --git a/doc/jp/components/grids/_shared/row-selection.md b/doc/jp/components/grids/_shared/row-selection.md index e25cf0438..fcb0b6328 100644 --- a/doc/jp/components/grids/_shared/row-selection.md +++ b/doc/jp/components/grids/_shared/row-selection.md @@ -25,7 +25,7 @@ _language: ja -以下のサンプルは、`{ComponentName}` の 3 種類の**行選択**動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。スイッチ ボタンを使用して、行セレクター チェックボックスを非表示または表示します。 +以下のサンプルは、`{ComponentName}` の 3 種類の**行選択**動作を示しています。以下のドロップダウンを使用して、利用可能な各選択モードを有効にします。チェックボックスを使用して、行セレクター チェックボックスを非表示または表示します。 diff --git a/doc/jp/components/grids/_shared/selection.md b/doc/jp/components/grids/_shared/selection.md index 7327cd4fb..80a509756 100644 --- a/doc/jp/components/grids/_shared/selection.md +++ b/doc/jp/components/grids/_shared/selection.md @@ -36,9 +36,9 @@ _language: ja ## {Platform} {ComponentTitle} 選択のオプション - + {ProductName} `{ComponentName}` コンポーネントは、[行選択](row-selection.md)、[セル選択](cell-selection.md)、[列選択](column-selection.md)の 3 つの選択モードを提供します。デフォルトでは、`{ComponentName}` で**複数セル選択**モードのみが有効になっています。選択モードの変更または有効化は、`RowSelection`、`CellSelection` または `Selectable` プロパティを使用します。 - + ### {Platform} {ComponentTitle} 行選択 @@ -48,11 +48,11 @@ _language: ja - `Single` - `{ComponentName}` 内の 1 行のみの選択が利用可能になります。 - `Multiple` - 複数行の選択は、Ctrl + クリックSpace キー を押して行セレクターを使用することにより、複数行の選択が可能になります。 - + - `MultipleCascade` - これはカスケード選択のモードであり、ユーザーがユーザーの操作で選択したレコードの下のツリー内のすべての子が選択されます。このモードでは、親の選択状態はその子の選択状態に完全に依存します。 - + > 詳細については、[行選択トピック](row-selection.md)を参照してください。 diff --git a/doc/jp/components/grids/_shared/sorting.md b/doc/jp/components/grids/_shared/sorting.md index e75fcbad0..c1a65b98a 100644 --- a/doc/jp/components/grids/_shared/sorting.md +++ b/doc/jp/components/grids/_shared/sorting.md @@ -78,6 +78,7 @@ import { SortingDirection } from 'igniteui-webcomponents-grids'; import { SortingDirection } from "igniteui-react-grids"; ``` + ```typescript @@ -136,13 +137,74 @@ gridRef.current.sort([ { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` + + + + +```typescript + +// Perform a case insensitive ascending sort on the ProductName column. +this.hierarchicalGrid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); + +// Perform sorting on both the ProductName and Price columns. +this.hierarchicalGrid.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } +]); +``` + + + +```typescript + +// Perform a case insensitive ascending sort on the ProductName column. +this.hierarchicalGrid.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]); + +// Perform sorting on both the ProductName and Price columns. +this.hierarchicalGrid.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } +]); +``` + + +```razor +@code { + this.hierarchicalGrid.SortAsync(new IgbSortingExpression[] + { + new IgbSortingExpression + { + FieldName = "CompanyName", + Dir = SortingDirection.Asc + }, + new IgbSortingExpression + { + FieldName = "Country", + Dir = SortingDirection.Asc + } + }); +} +``` + +```tsx +// Perform a case insensitive ascending sort on the ProductName column. +hierarchicalGridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]); + +// Perform sorting on both the ProductName and Price columns. +hierarchicalGridRef.current.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } +]); +``` + > [!Note] > Sorting は、`DefaultSortingStrategy` アルゴリズムを使用して実行されます。`Column` または `ISortingExpression` は、代替アルゴリズムとして `ISortingStrategy` のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 フィルター動作と同様に、ソート状態をクリアするには `ClearSort` メソッドを使用します。 + ```typescript // Removes the sorting state from the ProductName column @@ -170,6 +232,37 @@ gridRef.current.clearSort(); this.grid.ClearSortAsync(""); } ``` + + + + +```typescript +// Removes the sorting state from the ProductName column +this.hierarchicalGrid.clearSort('ProductName'); + +// Removes the sorting state from every column in the {ComponentTitle} +this.hierarchicalGrid.clearSort(); +``` + + +```tsx +// Removes the sorting state from the ProductName column +hierarchicalGridRef.current.clearSort('ProductName'); + +// Removes the sorting state from every column in the {ComponentTitle} +hierarchicalGridRef.current.clearSort(); +``` + +```razor +@code { + @*Removes the sorting state from the Title column*@ + this.hierarchicalGrid.ClearSortAsync("Title"); + + @*Removes the sorting state from every column in the Grid*@ + this.hierarchicalGrid.ClearSortAsync(""); +} +``` + > [!Note] > `{ComponentName}` の `SortStrategy` は `Column` の `SortStrategy` と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。 @@ -181,6 +274,7 @@ gridRef.current.clearSort(); `{ComponentName}` でソート状態を初期設定するには、ソート式の配列を `{ComponentName}` の `SortingExpressions` プロパティに渡します。 + ```typescript public ngOnInit() { @@ -228,6 +322,57 @@ useEffect(() => { ]; }, []) ``` + + + + +```typescript +public ngOnInit() { + this.hierarchicalGrid.sortingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } + ]; +} +``` + + +```razor +@code { + protected override void OnAfterRender(bool first) + { + if (first) + { + this.hierarchicalGrid.SortingExpressions = new IgbSortingExpression[]{ + new IgbSortingExpression() + { + FieldName = "Title", + Dir = SortingDirection.Asc + }}; + } + } +} +``` + + +```typescript +public connectedCallback() { + this.hierarchicalGrid.sortingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } + ]; +} +``` + + +```tsx +useEffect(() => { + hierarchicalGridRef.current.sortingExpressions = [ + { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'ProductName', dir: SortingDirection.Desc } + ]; +}, []) +``` + > [!Note] > `string` 型の値が `DataType` `Date` の列で使用される場合、`{ComponentName}` が値を `Date` オブジェクトに解析しないため `{ComponentName}` `Sorting` が正しく動作しません。`string` オブジェクトを使用する場合、値を `Date` オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。 @@ -239,7 +384,6 @@ useEffect(() => { `{ComponentName}` はリモート仮想化をサポートします。詳細については、[{ComponentTitle} リモート データ操作](remote-data-operations.md)で説明されています。 - ## ソート インジケーター テンプレート @@ -255,10 +399,11 @@ useEffect(() => { ``` -- `SortHeaderIconTemplate` – ソートが適用されない場合にソート アイコンを再テンプレート化します。 +- `SortHeaderIconTemplate` – ソートが適用されない場合にソート アイコンを再テンプレート化します。 - + + ```razor <{ComponentSelector} SortHeaderIconTemplate="SortDefaultTemplate"> @@ -269,8 +414,10 @@ useEffect(() => { }; } ``` - + + + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -282,7 +429,10 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { return html``; } ``` + + + ```tsx function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { return ( @@ -292,8 +442,10 @@ function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { ); } - +<{ComponentSelector} sortHeaderIconTemplate={sortHeaderIconTemplate}> ``` + + @@ -309,8 +461,8 @@ function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { - `SortAscendingHeaderIconTemplate` – 列が昇順にソートされたときにソート アイコンを再テンプレート化します。 - - + + ```razor <{ComponentSelector} SortAscendingHeaderIconTemplate="SortAscendingTemplate"> @@ -321,8 +473,10 @@ function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { }; } ``` - + + + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -334,7 +488,10 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + + + ```tsx function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { return ( @@ -344,8 +501,10 @@ function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { ); } - +<{ComponentSelector} sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}> ``` + + @@ -361,7 +520,8 @@ function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { - `SortDescendingHeaderIconTemplate` – 列が降順にソートされたときにソート アイコンを再テンプレート化します。 - + + ```razor <{ComponentSelector} SortDescendingHeaderIconTemplate="SortDescendingTemplate"> @@ -372,8 +532,10 @@ function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { }; } ``` - + + + ```ts constructor() { var grid = this.grid = document.getElementById('grid') as {ComponentName}Component; @@ -385,7 +547,10 @@ public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => return html``; } ``` + + + ```tsx function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { return ( @@ -395,8 +560,10 @@ function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) { ); } - +<{ComponentSelector} sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}> ``` + + diff --git a/doc/jp/components/grids/_shared/summaries.md b/doc/jp/components/grids/_shared/summaries.md index e80c83bc3..4d10525c7 100644 --- a/doc/jp/components/grids/_shared/summaries.md +++ b/doc/jp/components/grids/_shared/summaries.md @@ -43,6 +43,7 @@ _language: ja `HasSummary` プロパティを **true** に設定すると `{ComponentName}` 集計が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。`{ComponentName}` のデフォルトの列データ型は `string` のため、`number` または `date` 固有の集計を適用するには、`DataType` プロパティを `number` または `date` に設定します。集計値は、グリッドの `Locale` および列 `PipeArgs` に従ってローカライズされて表示されます。 + ```html <{ComponentSelector} #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> @@ -88,9 +89,76 @@ _language: ja ``` + + + + +```html +<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + + + +``` + + +```razor +<{ComponentSelector} AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID"> + + + + + + + + + + + + +``` + + +```html + + + + + + + + + + + + + +``` + + +```tsx + + + + + + + + + + + + + +``` + 特定の列や列のリストを有効または無効にする他の方法として `{ComponentName}` のパブリック メソッド `EnableSummaries`/`DisableSummaries` を使用する方法があります。 + ```html <{ComponentSelector} #grid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" > @@ -186,6 +254,101 @@ function disableSummary() { ``` + + + + +```html +<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px"> + + + + + + + + +``` + + + +```html + + + + + + + + + +``` +```ts +constructor() { + var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}; + var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement; + var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement; + hierarchicalGrid.data = this.data; + enableBtn.addEventListener("click", this.enableSummary); + disableBtn.addEventListener("click", this.disableSummary); +} +``` + + + +```typescript +public enableSummary() { + this.hierarchicalGrid.enableSummaries([ + {fieldName: 'GrammyNominations'}, + {fieldName: 'GrammyAwards'} + ]); +} +public disableSummary() { + this.hierarchicalGrid.disableSummaries(['GrammyNominations']); +} +``` + + +```razor +<{ComponentSelector} AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID"> + + + + + + + +@code { + public async void DisableSummaries() + { + object[] disabledSummaries = { "GrammyNominations" }; + await this.hierarchicalGrid.DisableSummariesAsync(disabledSummaries); + } +} +``` + +```tsx +function enableSummary() { + hierarchicalGridRef.current.enableSummaries([ + {fieldName: 'GrammyNominations'}, + {fieldName: 'GrammyAwards'} + ]); +} +function disableSummary() { + hierarchicalGridRef.current.disableSummaries(['GrammyNominations']); +} + + + + + + + + + + +``` + ## カスタム {ComponentTitle} 集計 @@ -299,7 +462,7 @@ interface IgcSummaryResult { > [!Note] > 集計行の高さを適切に計算するには、データが空の場合でも、{ComponentTitle} が常に適切な長さの `SummaryResult` の配列を返す `Operate` メソッドを必要とします。 - + 次に、カスタム集計を列 `UnitsInStock` に追加しましょう。次に、カスタム集計を列 `UnitsInStock` に追加しましょう。 ```html @@ -362,6 +525,67 @@ igRegisterScript("WebGridCustomSummary", (event) => { } }, false); ``` + + + +次に、カスタム集計を列 `GrammyAwards` に追加しましょう。これを実現するには、以下で作成するクラスに `Summaries` プロパティを設定します。 + +```html +<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px"> + + + + + + +``` + + + +```html + + + + + + + +``` +```ts +constructor() { + var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}; + var grammyAwards = this.grammyAwards = document.getElementById('grammyAwards') as IgcColumnComponent; + hierarchicalGrid.data = this.data; + grammyAwards.summaries = this.mySummary; +} +``` + + +```typescript +export class HierarchicalGridComponent implements OnInit { + mySummary = MySummary; +} +``` + +```razor +<{ComponentSelector} + AutoGenerate="true" + Name="hierarchicalGrid" + @ref="hierarchicalGrid" + Data="SingersData" + PrimaryKey="ID" + ColumnInitScript="WebHierarchicalGridCustomSummary"> + + +// In Javascript +igRegisterScript("WebHierarchicalGridCustomSummary", (event) => { + if (event.detail.field === "GrammyAwards") { + event.detail.summaries = WebHierarchicalGridSummary; + } +}, false); +``` + + ### すべてのデータにアクセスするカスタム集計 カスタム列集計内のすべての {ComponentTitle} データにアクセスできます。SummaryOperand `Operate` メソッドには、2 つの追加のオプション パラメーターが導入されています。 @@ -410,6 +634,7 @@ class WebGridDiscontinuedSummary { } ``` + `sample="/{ComponentSample}/data-summaries-custom", height="650", alt="{Platform} {ComponentTitle} データ集計カスタム"` @@ -421,6 +646,11 @@ class WebGridDiscontinuedSummary { `sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} データ集計オプション"` + + + +`sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} データ集計オプション"` + @@ -489,14 +719,8 @@ igRegisterScript("SummaryTemplate", (ctx) => { - - `sample="/{ComponentSample}/data-summary-template", height="650", alt="{Platform} {ComponentTitle} データ集計のテンプレート"` - - - - ## 集計のフォーマット デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド `Locale` および列 `PipeArgs` に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、`Locale` と `PipeArgs` は適用されません。集計結果のデフォルトの外観を変更する場合は、`SummaryFormatter` プロパティを使用してフォーマットできます。 @@ -537,20 +761,36 @@ constructor() { } ``` - - ```razor -igRegisterScript("SummaryFormatter", (summary, summaryOperand) => { - return summary.summaryResult + " rows"; -}, false); +igRegisterScript("SummaryFormatter", (summary) => { + const result = summary.summaryResult; + if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) { + const format = new Intl.DateTimeFormat("en", { year: "numeric" }); + return format.format(new Date(result)); + } + return result; +}, true); ``` -`sample="/{ComponentSample}/data-summary-formatter", height="650", alt="{Platform} {ComponentTitle} データ集計のフォーマッタ"` - +```tsx +public summaryFormatter( + summary: IgrSummaryResult, + summaryOperand: IgrSummaryOperand + ): string { + const result = summary.summaryResult; + if (summary.key !== "count" && result !== null && result !== undefined) { + const format = new Intl.DateTimeFormat("en", { year: "numeric" }); + return format.format(new Date(result)); + } + return result; + } + + +``` - +`sample="/{ComponentSample}/data-summary-formatter", height="650", alt="{Platform} {ComponentTitle} データ集計のフォーマッタ"` @@ -631,6 +871,7 @@ igRegisterScript("SummaryFormatter", (summary, summaryOperand) => { 定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。 + ```html <{ComponentSelector} class="grid"> ``` @@ -658,7 +899,37 @@ igRegisterScript("SummaryFormatter", (summary, summaryOperand) => { ### デモ `sample="/{ComponentSample}/groupby-summary-styling", height="710", alt="{Platform} {ComponentTitle} グループ化集計のスタイル設定"` + + + +```html +<{ComponentSelector} id="hierarchicalGrid"> +``` + +```razor +<{ComponentSelector} id="hierarchicalGrid"> +``` + +```tsx +<{ComponentSelector} id="hierarchicalGrid"> + +``` + +次に、そのクラスに関連する CSS プロパティを設定します。 + +```css +#hierarchicalGrid { + --ig-grid-summary-background-color:#e0f3ff; + --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 ); + --ig-grid-summary-label-color: rgb(228, 27, 117); + --ig-grid-summary-result-color: black; +} +``` + +### デモ +`sample="/{ComponentSample}/data-summary-options-styling", height="710", alt="{Platform} {ComponentTitle} グループ化集計のスタイル設定"` + diff --git a/doc/jp/components/grids/_shared/toolbar.md b/doc/jp/components/grids/_shared/toolbar.md index 2ca0b4afc..cd4cbac24 100644 --- a/doc/jp/components/grids/_shared/toolbar.md +++ b/doc/jp/components/grids/_shared/toolbar.md @@ -19,10 +19,19 @@ _language: ja ツールバーと事前定義された UI コンポーネントは、{Platform} イベントをサポートし、開発者向けに API を公開します。 + ## {Platform} ツールバー グリッドの例 +`sample="/{ComponentSample}/toolbar-sample-1", height="420", alt="{Platform} {ComponentTitle} ツールバーの例"` + + + + +## {Platform} Toolbar Grid Example `sample="/{ComponentSample}/toolbar-sample-1", height="420", alt="{Platform} {ComponentTitle} ツールバーの例"` + + 事前定義された `Actions` および `Title` UI コンポーネントが `GridToolbar` 内に追加されます。これはすべて、対応するグリッド機能とのデフォルトのインタラクションを提供するツールバーを持つために必要です。 @@ -59,7 +68,7 @@ _language: ja - Grid Toolbar + Grid Toolbar @@ -118,6 +127,7 @@ _language: ja ``` + ```html @@ -132,6 +142,11 @@ _language: ja
``` + + + + + ```html @@ -146,6 +161,45 @@ _language: ja ``` + + + + +```tsx + + + + Hierarchical Grid Toolbar + + + + + + + + + +``` + + + + + +```razor + + + Hierarchical Grid Toolbar + + + + + + + + +``` + + > [!Note] > 上記のコード スニペットに示されているように、事前定義された `Actions` UI コンポーネントは `GridToolbarActions` にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。 @@ -196,6 +250,7 @@ _language: ja ``` + ```html @@ -203,6 +258,11 @@ _language: ja
``` + + + + + ```html @@ -210,13 +270,37 @@ _language: ja ``` + -デフォルトの各 UI コンポーネントの詳細については、以下の**機能**セクションを読み続けてください。 + + +```razor + + + + +``` + + + +```tsx + + + + +``` + + +デフォルトの各 UI コンポーネントの詳細については、以下の**機能**セクションを読み続けてください。 + + + ## 子グリッド付きのツールバー + IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動作には特定の制限があるため、子グリッドのスコープでツールバーを使用する場合は注意が必要です。 `igx-row-island` タグ内でツールバー コンポーネントを定義するときは、必ず IgxGridToolbar を使用し、提供されたグリッド インスタンスを入力プロパティとしてツールバー自体に渡すようにしてください。 これにより、テンプレートのスコープ内に常に正しいグリッド インスタンスが含まれるようになります。 @@ -236,8 +320,85 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 ``` + + + +`{ComponentSelector}` の子グリッドの実装方法および DI スコープの動作には制限があるため、`{RowIslandSelector}` 内でツールバー コンポーネントを定義するには、`ToolbarTemplate` 入力プロパティを使用します。これにより、子グリッドが独立したツールバー インスタンスを作成することができます。 + + + +```ts +constructor() { + var rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent; + rowIsland1.toolbarTemplate = this.rowIslandToolbarTemplate; +} + +public rowIslandToolbarTemplate = () => { + return html` + + + + + + + `; +} +``` + +```html + + ... + + + +``` + + + +```razor + + ... + + + + +//In JavaScript: +igRegisterScript("RowIslandToolbarTemplate", () => { + var html = window.igTemplating.html; + return html` + + + + + + + `; +}, false); +``` + +```tsx +function rowIslandToolbarTemplate = () => { + return ( + + + + + + + + + ); +} + + + ... + + + +``` + ## 機能 @@ -249,8 +410,15 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 以下にリストされているのは、ツールバーの主な機能と、それぞれのサンプル コードです。 + `sample="/{ComponentSample}/toolbar-sample-2", height="630", alt="{Platform} {ComponentTitle} ツールバー サンプル 2"` + + + +`sample="/{ComponentSample}/toolbar-sample-2", height="630", alt="{Platform} {ComponentTitle} ツールバー サンプル 2"` + + ### Title (タイトル) @@ -259,29 +427,47 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 ユーザーは、単純なテキストからより複雑なテンプレートまで、どんなものでも提供できます。 + + ```html Grid toolbar title ``` + + + + ```html Grid toolbar title ``` + + + + ```tsx - Grid toolbar title + + Grid toolbar title + ``` + + + + ```razor Grid toolbar title ``` + + ### 操作 @@ -289,6 +475,8 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 `GridToolbarActions` は、ユーザーが親グリッドに関連して操作 / インタラクションを配置できる特定のコンテナを公開します。 ツールバーのタイトル部分と同様に、ユーザーは、デフォルトのツールバー インタラクション コンポーネントを含め、そのテンプレート部分内にどんなものでも提供できます。 + + ```html @@ -298,15 +486,11 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 ``` + + -```razor - - - - - -``` - + + ```html @@ -314,15 +498,33 @@ IgxHierarchicalGrid の子グリッドの実装方法と DI スコープの動 ``` + + + + + +```razor + + + + + +``` + + + + ```tsx - ``` + + + 各アクションは、`OverlaySettings` 入力を使用して、アクション ダイアログのオーバーレイ設定を変更する方法を公開するようになりました。例: @@ -385,6 +587,8 @@ constructor() { コンポーネントは、ツールバーを含む親グリッドと、コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするためのいくつかの入力プロパティを使用して、そのまま動作します。 + + ```html @@ -397,15 +601,11 @@ constructor() { ``` + + -```razor - - - - - -``` - + + ```html @@ -417,7 +617,23 @@ constructor() { ``` + + + + + +```razor + + + + + +``` + + + + ```tsx @@ -425,11 +641,15 @@ constructor() { ``` + + ### 列の非表示 `GridToolbarHiding` は、列非表示を操作するためのデフォルトの UI を提供します。コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするための同じ入力プロパティを公開します。 + + ```html @@ -442,15 +662,11 @@ constructor() { ``` + + -```razor - - - - - -``` - + + ```html @@ -462,7 +678,23 @@ constructor() { ``` + + + + + +```razor + + + + + +``` + + + + ```tsx @@ -470,11 +702,15 @@ constructor() { ``` + + ### 高度なフィルタリング ツールバーの高度なフィルタリング コンポーネントは、高度なフィルタリング機能のデフォルトの UI を提供します。コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。 + + ```html @@ -482,15 +718,11 @@ constructor() { ``` + + -```razor - - - - - -``` - + + ```html @@ -498,7 +730,23 @@ constructor() { ``` + + + + +```razor + + + + + +``` + + + + + ```tsx @@ -506,6 +754,8 @@ constructor() { ``` + + ### データのエクスポート @@ -547,6 +797,8 @@ export class AppModule { ... } これは、{Platform} テンプレートを介してカスタマイズできるいくつかのオプションを示すスニペットです。 + + ```html @@ -563,15 +815,11 @@ export class AppModule { ... } ``` + + -```razor - - - - - -``` - + + ```html @@ -580,7 +828,23 @@ export class AppModule { ... } ``` + + + + + +```razor + + + + + +``` + + + + ```tsx @@ -588,6 +852,8 @@ export class AppModule { ... } ``` + + エクスポートされたファイル名を変更することに加えて、ユーザーは `ToolbarExporting` イベントを待機し、イベント プロパティのオプション エントリをカスタマイズすることで、エクスポーター オプションをさらに構成できます。 @@ -598,6 +864,8 @@ export class AppModule { ... } 次のコード スニペットは、ツールバーのエクスポート イベントのサブスクライブとエクスポーター オプションの構成を示しています。 + + ```html <{ComponentSelector} (toolbarExporting)="configureExport($event)" > @@ -688,6 +956,64 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { }); }, false); ``` + + + + + + +```html +<{ComponentSelector} id="hierarchicalGrid"> +``` +```ts +constructor() { + var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent; + hierarchicalGrid.addEventListener("toolbarExporting", this.configureExport); +} + +public configureExport(evt: CustomEvent) { + const args = evt.detail; + const options: IgcExporterOptionsBase = args.options; + if (options) { + options.fileName = `Report_${new Date().toDateString()}`; + (args.exporter as any).columnExporting.subscribe((columnArgs: any) => { + columnArgs.cancel = columnArgs.header === 'Photo'; + }); + } +} +``` + + +```tsx +function configureExport(evt: IgrGridToolbarExportEventArgs) { + const args = evt.detail; + const options: IgrExporterOptionsBase = args.options; + + options.fileName = `Report_${new Date().toDateString()}`; + (args.exporter as any).columnExporting.subscribe((columnArgs: any) => { + columnArgs.cancel = columnArgs.header === 'Photo'; + }); +} + +<{ComponentSelector} toolbarExporting={configureExport}> + +``` + +```razor +<{ComponentSelector} ToolbarExportingScript="ConfigureExport"> + +// In Javascript +igRegisterScript("ConfigureExport", (evt) => { + const args = evt.detail; + const options = args.options; + options.fileName = `Report_${new Date().toDateString()}`; + args.exporter.columnExporting.subscribe((columnArgs) => { + columnArgs.cancel = columnArgs.header === 'Photo'; + }); +}, false); +``` + + 以下のサンプルは、エクスポート ファイルをカスタマイズする方法を示します。 @@ -695,7 +1021,6 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { - ## エクスポート インジケーター @@ -710,17 +1035,22 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { `sample="/{ComponentSample}/data-exporting-indicator", height="370", alt="{Platform} {ComponentTitle} データ エクスポート インジケーター"` - + ## カスタム コンテンツ + + > [!Note] > これは、古いツールバー テンプレート ディレクティブを置き換えます。v11 より前のバージョンから移行する場合は、マイグレーションによってテンプレート コンテンツの移動が処理されます。ただし、テンプレート内のバインディングは処理しないため、マイグレーションの完了後に、変更されたテンプレート ファイルを再確認してください。 + + ツールバー コンポーネントのアクション部分が特定のユース ケースに十分でない場合、ツールバー自体には、ユーザーが追加の UI を提供できる一般的なコンテンツ プロジェクションがあります。ユーザーが API 呼び出しまたはバインディングにそれぞれのグリッド インスタンスを必要とする場合は、テンプレート参照変数を作成できます。 サンプル スニペットは次のとおりです。 + ```html <{ComponentSelector} #gridRef> @@ -739,9 +1069,11 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { ``` + + ```html <{ComponentSelector} id="grid"> @@ -755,13 +1087,52 @@ igRegisterScript("WebGridToolbarExporting", (evt) => { ``` + + + +```tsx +<{ComponentSelector}> + + + title + + {/* + Everything between the toolbar tags except the default toolbar components + will be projected as custom content. + */} + + + + +``` + + + + + +```razor +<{ComponentSelector}> + + title + @* + Everything between the toolbar tags except the default toolbar components + will be projected as custom content. + *@ + + + + +``` + + + 以下のサンプルは、列ヘッダーをクリックして並べ替えセットをクリアするためのボタンをツールバーに追加する方法です。 `sample="/{ComponentSample}/toolbar-sample-4", height="420", alt="{Platform} {ComponentTitle} ツールバー サンプル 4"` - + @@ -917,6 +1288,15 @@ $dark-input-group-theme: input-group-theme( + + +## 既知の制限 + +> [!Note] +> 現在、{RowIslandSelector} 内でのツールバー コンポーネントの定義はサポートされていません。 + + + ## API リファレンス 以下は、Grid Toolbar サービスのその他の API です。 diff --git a/doc/jp/components/grids/grid/master-detail.md b/doc/jp/components/grids/grid/master-detail.md index 329900d21..aa418b6c6 100644 --- a/doc/jp/components/grids/grid/master-detail.md +++ b/doc/jp/components/grids/grid/master-detail.md @@ -1,5 +1,5 @@ --- -title: {Platform} {ComponentTitle} マスターと詳細 Grid - インフラジスティックス +title: {Platform} マスターと詳細 Grid - インフラジスティックス _description: Ignite UI {Platform} Grid を使用して行データの展開可能な詳細ビュー テンプレートを定義します。マスターと詳細スタイル データを階層構造で表示する場合に便利です。 _keywords: {Platform}, {ComponentKeywords}, {ProductName}, master detail, Infragistics, マスターと詳細, インフラジスティックス mentionedTypes: ['Infragistics.Controls.Grid'] diff --git a/doc/jp/components/grids/grid/paste-excel.md b/doc/jp/components/grids/grid/paste-excel.md index ea20ee884..5ef5b1d8a 100644 --- a/doc/jp/components/grids/grid/paste-excel.md +++ b/doc/jp/components/grids/grid/paste-excel.md @@ -24,25 +24,392 @@ _language: ja 貼り付け後の新しいデータはイタリックで装飾されます。 -`sample="/{GridSample}/data-paste-options", height="570", alt="{Platform} Excel から貼り付けの例"` +`sample="/{GridSample}/paste", height="570", alt="{Platform} Excel から貼り付けの例"` -
+ ## 使用方法 -`paste-handler` ディレクティブ (次のセクションにコードがあります) を `Grid` に追加して `onDataProcessed` イベントを処理する必要があります。`onDataProcessed` イベントに配列フォームの Excel データへアクセスを与えるパラメーターがあります。詳細については、`addRecords` と `updateRecords` メソッドを参照してください。 + +最初にグリッドの `rendered` イベントにバインドして、テキスト領域要素を作成して管理します。 + +```tsx + + + + + + + + + + + + + + +``` ```html - - - - - + + + + + + + + + + + + ``` +```ts +public webGridPasteFromExcel() { + const grid = document.getElementById("grid") as any; + this.onKeyDown = this.onKeyDown.bind(this); + grid.addEventListener("keydown", this.onKeyDown); +} +public onKeyDown(eventArgs: any): void { + const ctrl = eventArgs.ctrlKey; + const key = eventArgs.keyCode; + // Ctrl-V || Shift-Ins || Cmd-V + if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) { + this.textArea.focus(); + } +} + +private txtArea: any; + +public get textArea() { + if(!this.txtArea) { + const div = document.createElement("div"); + const divStyle = div.style; + divStyle.position = "fixed"; + document.body.appendChild(div); + this.txtArea = document.createElement("textarea"); + const style = this.txtArea.style; + style.opacity = "0"; + style.height = "0px"; + style.width = "0px"; + style.overflow = "hidden"; + div.appendChild(this.txtArea); + + this.txtArea.addEventListener("paste", (eventArgs: any) => { this.onPaste(eventArgs); }); + } + return this.txtArea; + } +``` + +```razor + + + + + + + + + + + + + + + +// In JavaScript +igRegisterScript("WebGridPasteFromExcel", (evtArgs) => { + const grid = document.getElementById("grid"); + grid.addEventListener("keydown", onWebGridPasteFromExcelKeyDown); +}, false); + +function onWebGridPasteFromExcelKeyDown(eventArgs) { + const ctrl = eventArgs.ctrlKey; + const key = eventArgs.keyCode; + // Ctrl-V || Shift-Ins || Cmd-V + if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) { + textArea.focus(); + } +} + +var txtArea; +var textArea = getTextArea(); +function getTextArea() { + if(!txtArea) { + const div = document.createElement("div"); + const divStyle = div.style; + divStyle.position = "fixed"; + document.body.appendChild(div); + txtArea = document.createElement("textarea"); + const style = txtArea.style; + style.opacity = "0"; + style.height = "0px"; + style.width = "0px"; + style.overflow = "hidden"; + div.appendChild(txtArea); + + txtArea.addEventListener("paste", (eventArgs) => { onPaste(eventArgs); }); + } + return txtArea; +} + +``` + +このコードはクリップボードから貼り付けられたデータを受け取るための DOM textarea 要素を作成します。コードは textarea に貼り付けられたデータが配列に解析します。 + +```ts +public onPaste(eventArgs: any) { + let data; + const clData: any = "clipboardData"; + + // get clipboard data - from window.cliboardData for IE or from the original event's arguments. + if (window[clData] as any) { + (window.event as any).returnValue = false; + data = (window[clData] as any).getData("text"); + } else { + data = eventArgs[clData].getData("text/plain"); + } + + // process the clipboard data + const processedData = this.processData(data); + if (this.pasteMode === "Paste data as new records") { + this.addRecords(processedData); + } else { + this.updateRecords(processedData); + } +} + +public processData(data: any) { + const pasteData = data.split("\n"); + for (let i = 0; i < pasteData.length; i++) { + pasteData[i] = pasteData[i].split("\t"); + // Check if last row is a dummy row + if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") { + pasteData.pop(); + } + // remove empty data + if (pasteData.length === 1 && + pasteData[0].length === 1 && + (pasteData[0][0] === "" || pasteData[0][0] === "\r")) { + pasteData.pop(); + } + } + return pasteData; +} +``` + +```razor +function onPaste(eventArgs) { + let data; + const clData = "clipboardData"; + + // get clipboard data - from window.cliboardData for IE or from the original event's arguments. + if (window[clData]) { + window.event.returnValue = false; + data = window[clData].getData("text"); + } else { + data = eventArgs[clData].getData("text/plain"); + } + + // process the clipboard data + const processedData = processData(data); + if (pasteMode === "Paste data as new records") { + addRecords(processedData); + } else { + updateRecords(processedData); + } +} +function processData(data) { + const pasteData = data.split("\n"); + for (let i = 0; i < pasteData.length; i++) { + pasteData[i] = pasteData[i].split("\t"); + // Check if last row is a dummy row + if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") { + pasteData.pop(); + } + // remove empty data + if (pasteData.length === 1 && + pasteData[0].length === 1 && + (pasteData[0][0] === "" || pasteData[0][0] === "\r")) { + pasteData.pop(); + } + } + return pasteData; +} +``` + +貼り付けたデータは、新しいレコードとして追加したり、ユーザーの選択に基づいて既存のレコードを更新するために使用したりすることができます。addRecords と updateRecords メソッドを参照してください。 + +```ts +public addRecords(processedData: any[]) { + const grid = this.grid as any; + const columns = grid.visibleColumns; + const pk = grid.primaryKey; + const addedData: any[] = []; + for (const curentDataRow of processedData) { + const rowData = {} as any; + for (const col of columns) { + const index = columns.indexOf(col); + rowData[col.field] = curentDataRow[index]; + } + // generate PK + rowData[pk] = grid.data.length + 1; + grid.addRow(rowData); + addedData.push(rowData); + } + // scroll to last added row + grid.navigateTo(grid.data.length - 1, 0, () => { + this.clearStyles(); + for (const data of addedData) { + const row = grid.getRowByKey(data[pk]); + if (row) { + const rowNative = this.getNative(row) as any; + if (rowNative) { + rowNative.style["font-style"] = "italic"; + rowNative.style.color = "gray"; + } + } + } + }); +} + +public updateRecords(processedData: any[]) { + const grid = this.grid as any; + const cell = grid.selectedCells[0]; + const pk = grid.primaryKey; + if (!cell) { return; } + const rowIndex = cell.row.index; + const columns = grid.visibleColumns; + const cellIndex = grid.visibleColumns.indexOf(cell.column); + let index = 0; + const updatedRecsPK: any[] = []; + for (const curentDataRow of processedData) { + const rowData = {} as any; + const dataRec = grid.data[rowIndex + index]; + const rowPkValue = dataRec ? dataRec[pk] : grid.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = currentCell || (dataRec ? dataRec[colKey] : null); + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + grid.addRow(rowData); + continue; + } + grid.updateRow(rowData, rowPkValue); + updatedRecsPK.push(rowPkValue); + index++; + } + + this.clearStyles(); + for (const pkVal of updatedRecsPK) { + const row = grid.getRowByKey(pkVal); + if (row) { + const rowNative = this.getNative(row) as any; + if (rowNative) { + rowNative.style["font-style"] = "italic"; + rowNative.style.color = "gray"; + } + } + } +} +``` + +```razor +function addRecords(processedData) { + const grid = document.getElementById("grid"); + const columns = grid.visibleColumns; + const pk = grid.primaryKey; + const addedData = []; + for (const curentDataRow of processedData) { + const rowData = {}; + for (const col of columns) { + const index = columns.indexOf(col); + rowData[col.field] = curentDataRow[index]; + } + // generate PK + rowData[pk] = grid.data.length + 1; + grid.addRow(rowData); + addedData.push(rowData); + } + // scroll to last added row + grid.navigateTo(grid.data.length - 1, 0, () => { + clearStyles(); + for (const data of addedData) { + const row = grid.getRowByKey(data[pk]); + if (row) { + const rowNative = getNative(row); + if (rowNative) { + rowNative.style["font-style"] = "italic"; + rowNative.style.color = "gray"; + } + } + } + }); +} + +function updateRecords(processedData) { + const grid = document.getElementById("grid"); + const cell = grid.selectedCells[0]; + const pk = grid.primaryKey; + if (!cell) { return; } + const rowIndex = cell.row.index; + const columns = grid.visibleColumns; + const cellIndex = grid.visibleColumns.indexOf(cell.column); + let index = 0; + const updatedRecsPK = []; + for (const curentDataRow of processedData) { + const rowData = {}; + const dataRec = grid.data[rowIndex + index]; + const rowPkValue = dataRec ? dataRec[pk] : grid.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = currentCell || (dataRec ? dataRec[colKey] : null); + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + grid.addRow(rowData); + continue; + } + grid.updateRow(rowData, rowPkValue); + updatedRecsPK.push(rowPkValue); + index++; + } +``` + + + + + +## 使用方法 + +`paste-handler` ディレクティブ (次のセクションにコードがあります) を `Grid` に追加して `onDataProcessed` イベントを処理する必要があります。`onDataProcessed` イベントに配列フォームの Excel データへアクセスを与えるパラメーターがあります。詳細については、`addRecords` と `updateRecords` メソッドを参照してください。 + +```html + + + + + + +``` + ```typescript public dataPasted(processedData) { if (this.pasteMode === "Paste data as new records") { @@ -133,7 +500,6 @@ _language: ja } } ``` -
## Paste Handler (貼り付けハンドラー) ディレクディブ @@ -217,15 +583,15 @@ export class PasteHandler { } ``` + + ## API リファレンス -* `GridComponent` +* `Grid` ## その他のリソース -
* [Excel エクスポーター](export-excel.md) - Excel エクスポーター サービスを使用して、グリッドから Excel にデータをエクスポートします。選択したデータのみをグリッドからエクスポートするオプションもあります。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、ExcelExporterService の export メソッドを呼び出して最初の引数として グリッド コンポーネントを渡します。 -
コミュニティに参加して新しいアイデアをご提案ください。 * [{ProductName} **フォーラム (英語)**]({ForumsLink}) diff --git a/doc/jp/components/grids/hierarchical-grid/load-on-demand.md b/doc/jp/components/grids/hierarchical-grid/load-on-demand.md new file mode 100644 index 000000000..2fca921c2 --- /dev/null +++ b/doc/jp/components/grids/hierarchical-grid/load-on-demand.md @@ -0,0 +1,898 @@ +--- +title: {Platform} 階層グリッド | 最速の {Platform} 階層テーブル | インフラジスティックス +_description: {ProductName} Hierarchical Grid は、展開された各子グリッドでロードオンデマンドに必要なツールを提供します。データ量が大幅に軽減されてユーザがデータを必要な場合のみ取得されます。 +_keywords: {Platform} hierarchical grid, igniteui for {Platform}, infragistics, {Platform} 階層グリッド, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_language: ja +--- + +# Hierarchical Grid ロードオンデマンド + +Ignite UI for {Platform} `HierarchicalGrid` は、要求するサーバーからのデータを最低限にすることによりすばやく描画できます。このため、ユーザーがビューで結果を確認でき、表示データをインタラクティブに操作できます。初期時にグリッドのデータのみが取得されて描画され、ユーザーが子グリッドを含む行を拡張した後のみ、特定の子グリッドのデータを取得します。このメカニズムは、ロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。 + +このトピックは、既に利用可能なリモート サービスと通信してリモート サービス プロバイダーを作成し、ロードオンデマンドを設定する方法を説明します。以下は、デモと作成手順を示します。 + +## {Platform} Hierarchical Grid ロードオンデマンドの例 + +`sample="/{HierarchicalGridSample}/data-performance-virtualization", height="700", alt="{Platform} Hierarchical Grid ロードオンデマンドの例"` + +### リモート サービス プロバイダー + +はじめにサービス プロバイダーを準備して階層グリッドに必要なデータを取得します。 + +#### 基本データの取得 + + +ブラウザーが提供する XMLHttpRequest インターフェイス を使用した HTTP プロトコルでバックエンドサービスと通信します。簡易的なクライアント HTTP API を提供する Angular の [`HttpClient`](https://angular.io/api/common/http/HttpClient) モジュールを使用してより簡単に行うことができます。データを取得にはサービスのシンプルなメソッドが必要となります。 + +```typescript +public getData(dataState): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map(response => response), + ); +} +``` + +`this.http` は、`HttpCLient` モジュールの参照となり、`buildUrl()` は取得したデータに基づいて url を生成するメソッドになります。実行された非同期のため、返信をマップし、Observable を返します。それにより後でサブスクライブし、アプリケーションで処理を進めてグリッドへ渡すことができます。 + + + +ブラウザーが提供する [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) グローバル関数を使用した HTTP プロトコルでバックエンドサービスと通信します。データを取得にはサービスのシンプルなメソッドが必要となります。 + +```ts +export function getData(dataState: any): any { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} +``` + +`buildUrl()` は取得したデータに基づいて url を生成するメソッドになります。実行された非同期のため、Promise を返します。それにより後でサブスクライブし、アプリケーションで処理を進めてグリッドへ渡すことができます。 + + + +ブラウザーが提供する [`fetch()`](https://developer.mozilla.org/ja-JP/docs/Web/API/fetch) グローバル関数を使用した HTTP プロトコルでバックエンドサービスと通信します。データを取得にはサービスのシンプルなメソッドが必要となります。 + +```razor +function getData(dataState) { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} +``` + +`buildUrl()` は取得したデータに基づいて url を生成するメソッドになります。実行された非同期のため、Promise を返します。それにより後でサブスクライブし、アプリケーションで処理を進めてグリッドへ渡すことができます。 + + +#### 要求 URL のビルド + +次に GET 要求の URL をビルドする方法を定義します。メイン グリッドのデータを取得できますが含まれる子グリッドのデータも取得できます。ルート レベルに[こちら](https://data-northwind.indigo.design/swagger/index.html)の `Customers` データを使用し、それ以外のレベルには `Orders` と `Details` を使用します。このモデルはアプリケーションごとに異なりますが、ここでは以下を使用します。 + + + +はじめに必要となるのはグリッドのデータ、親業のプライマリキーとその一意の ID をどこから取得するかを決定するテーブルの `key` が必要です。 + + +インターフェイス `IDataState` でこれらすべてを定義します。例: + +```typescript +export interface IDataState { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} + +//... +public buildUrl(dataState: IDataState): string { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${this.url}${qS}`; +} +//... +``` + + + +これらすべてを `dataState` オブジェクトで定義します。例: + +```ts +const dataState: { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} = { + //... +}; + +function buildUrl(dataState: any) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${URL}${qS}`; +} +``` + + + +これらすべてを `dataState` オブジェクトで定義します。例: + +```razor +const dataState: { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} = { + //... +}; + +function buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${DATA_URL}${qS}`; +} +``` + + +#### 結果 + + +最後に `remote-lod.service.ts` は以下のようになります。 + +```typescript +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +export interface IDataState { + key: string; + parentID: any; + parentKey: string; + rootLevel: boolean; +} + +@Injectable() +export class RemoteLoDService { + public url = `https://data-northwind.indigo.design/`; + + constructor(private http: HttpClient) { } + + public getData(dataState: IDataState): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map((response) => response) + ); + } + + public buildUrl(dataState: IDataState): string { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${this.url}${qS}`; + } +} +``` + + + +最後に、リモート サービスは以下のようになります。 + +```ts +const URL = `https://data-northwind.indigo.design/`; + +export function getData(dataState: any): any { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState: any) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${URL}${qS}`; +} +``` + + + +最後に、リモート サービスは以下のようになります。 + +```razor +const DATA_URL = `https://data-northwind.indigo.design/`; + +function getData(dataState) { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${DATA_URL}${qS}`; +} +``` + + +### 階層グリッドの`設定 + +次に階層グリッドを設定してリモート サービス プロバイダーに接続します。 + +#### テンプレートの地祇 + +最初に階層グリッド テンプレートを必要な階層レベルで定義します。customers のルート グリッド `PrimaryKey` は最初のレベルの orders の `customerId` です。`orderId` と各 order 詳細の `productId` です。各データベース テーブルとキーで初期テンプレートを定義します。 + + +```html + + + + + + + + + + + + + + + + + + + + + +``` + + + +```html + + + + + + + + + + + + + + + + + + + + + +``` + + + +```tsx + + + + + + + + + + + + + + + + + + + + + +``` + + + +```razor + + + + + + + + + + + + + + + + + + + + + +``` + + +ルート レベル階層グリッドと最終的にはその子のデータがテンプレートに必要となります。 + + +`#hGrid` 参照が使用できるため、コードでサービスからデータ取得後にルート グリッドのデータを簡単に設定できます。 + + + +`id="hGrid"` 参照が使用できるため、コードでサービスからデータ取得後にルート グリッドのデータを簡単に設定できます。 + + + +`ref={hierarchicalGrid}` 参照が使用できるため、コードでサービスからデータ取得後にルート グリッドのデータを簡単に設定できます。 + + + +`Id="hGrid"` 参照が使用できるため、コードでサービスからデータ取得後にルート グリッドのデータを簡単に設定できます。 + + +展開されている子にデータを設定する方法は異なります。行がはじめて展開されたときに新し子 `HierarchicalGrid` が描画がされるため、データを設定するために新しく作成されたグリッドの参照を取得する必要があります。各 `RowIsland` コンポーネントに `GridCreated` イベントがあり、特定の子アイランドに新しい子グリッドが作成されたときに発生します。新しいグリッドの参照を取得するために使用でき、サービスからデータを要求して適用します。 + +サービスをビルドしているためルートレベルの場合に情報のみが必要なため、すべてのアイランドに 1 メソッドを使用できます。このすべての情報には、イベント引数から直接またはイベントをトリガーする行アイランドからアクセスできます。 + + +`gridCreated` を使用するメソッドに名前を付けます。 + + + +`OnGridCreated` を使用するメソッドに名前を付けます。 + + + +`GridCreated` イベントは `parentID` プロパティ、`owner` として行アイランドへの参照、新しい子 `grid` プロパティを提供するため、最初の引数として渡されます。親行の `primaryKey` についての情報はありませんが、バインドした行アイランドに基づいて 2 番目の引数として簡単に渡すことができます。 + + + +`GridCreated` イベントは行アイランド、`parentID` プロパティ、および新しい子グリッド プロパティへの参照を提供するため、これは最初と 2 番目の引数として渡されます。親行の `primaryKey` についての情報はありませんが、バインドした行アイランドに基づいて 2 番目の引数として簡単に渡すことができます。 + + + +`GridCreated` イベントは `parentID` プロパティ、`owner` として行アイランドへの参照、新しい子 `grid` プロパティを提供するため、最初の引数として渡されます。親行の `primaryKey` についての情報しかありませんが、行アイランドの `ChildDataKey` に基づいてそれを簡単に判断できます。 + + +変更を加えたテンプレート ファイルは以下のようになります。 + + +```html + + + + + + + + + + + + + + + + + + + + + +``` + + + +```html + + + + + + + + + + + + + + + + + + + + + +``` +```ts +constructor() { + const ordersRowIsland = document.getElementById("ordersRowIsland"); + const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland"); + + ordersRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Customers"); + }); + + orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Orders"); + }); +} +``` + + + +```tsx + + + + + + + + gridCreated(rowIsland, e, "Customers")} + > + + + + + + gridCreated(rowIsland, e, "Orders")} + > + + + + + + + +``` + + + +```razor + + + + + + + + + + + + + + + + + + + + + +``` + + +#### サービスへ接続 + +最後の手順の 1 つとして、以前作成したサービスに階層グリッドを接続することです。 + + +`Injectable` として定義するため、プロバイダーとしてアプリケーションへ渡すことができます。`ViewChild` クエリをデータに設定してルートグリッドへの参照も取得します。 + +```typescript +@Component({ + providers: [RemoteLoDService], + selector: "app-hierarchical-grid-lod", + styleUrls: ["./hierarchical-grid-lod.component.scss"], + templateUrl: "./hierarchical-grid-lod.component.html" +}) +export class HierarchicalGridLoDSampleComponent { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } +} +``` + +グリッドがサービスのデータを要求して割り当てる前に描画されることを確認するために、ライフサイクル フックを使用します。親がないため、`rootLevel` は **true** でそのキーのみをサービスの `getData` へ渡すことができます。サブスクライブする必要のある observable を返します。 + +```typescript +public ngAfterViewInit() { + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); +} +``` + + + +ルート グリッドへの参照を取得して、そのデータを設定します。親がないため、`rootLevel` は **true** でそのキーのみをサービスの `getData` へ渡すことができます。サブスクライブする必要のある Promise を返します。 + +```ts +constructor() { + const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => { + hierarchicalGrid.data = data; + hierarchicalGrid.markForCheck(); + }); +} +``` + + + +`useRef` React フックを介してルート グリッドへの参照を取得し、そのデータを設定します。 + +```tsx +const hierarchicalGrid = useRef(null); +``` + +グリッドがサービスのデータを要求して割り当てる前に描画されることを確認するために、`useEffect` React フックを使用します。親がないため、`rootLevel` は **true** でそのキーのみをサービスの `getData` へ渡すことができます。サブスクライブする必要のある Promise を返します。 + +```tsx +useEffect(() => { + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data: any) => { + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); +}, []); +``` + + + +ルート グリッドへの参照を取得して、そのデータを設定します。グリッドがサービスのデータを要求して割り当てる前に描画されることを確認するために、`Rendered` イベントを使用します。親がないため、`rootLevel` は **true** でそのキーのみをサービスの `getData` へ渡すことができます。サブスクライブする必要のある Promise を返します。 + +```razor +igRegisterScript("OnGridRendered", () => { + const grid = document.getElementById("hGrid"); + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data) => { + grid.data = data; + grid.markForCheck(); + }); +}, false) +``` + + + +次に作成した新しい子グリッドのデータを要求する `gridCreated` メソッドを作成する必要があります。 + + + +次に作成した新しい子グリッドのデータを要求する `OnGridCreated` メソッドを作成する必要があります。 + + +ルート レベル グリッド データの取得と同様に、ここでは`parentID` や `parentKey` などの情報を渡す必要があります。`rootLevel` はいずれの子も **false** です。 + + +```typescript +public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); +} +``` + + + +```ts +public gridCreated(event: CustomEvent, _parentKey: string) { + const context = event.detail; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false + }; + + getData(dataState).then((data: any[]) => { + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```tsx +function gridCreated(rowIsland: IgrRowIsland, event: IgrGridCreatedEventArgs, _parentKey: string) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + getData(dataState).then((data: any[]) => { + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```razor +igRegisterScript("OnGridCreated", (args) => { + const context = args.detail; + const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders"; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + getData(dataState).then((data) => { + context.grid.data = data; + context.grid.markForCheck(); + }); +}, false) +``` + + +これにより、アプリケーションの設定はほぼ完了です。最後の手順は、空グリッドを表示する代わりにユーザーにデータがまだ読み込み中であることを通知してユーザー エクスペリエンスを向上します。`HierarchicalGrid` は、グリッドが空のときに表示できるインジケーターの読み込みサポートします。新しいデータが取得されると読み込みインジケーターが非表示となりデータが描画されます。 + +#### 読み込み通知の設定 + +`HierarchicalGrid` は、`IsLoading` プロパティを **true** に設定して読み込みインジケーターを表示できます。データが読み込まれるまでルートグリッドにあらかじめ設定しますが、新しい子グリッドを作成する際にも必要です。テンプレートで常に **true** に設定できますが、**false** に設定してサービスが空配列を返した場合は非表示にしてデータのないグリッドを表示できます。 + +以下は構成の最終バージョンです。 + + +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { + IGridCreatedEventArgs, + IgxHierarchicalGridComponent, + IgxRowIslandComponent +} from "igniteui-angular"; +import { RemoteLoDService } from "../services/remote-lod.service"; + +@Component({ + providers: [RemoteLoDService], + selector: "app-hierarchical-grid-lod", + styleUrls: ["./hierarchical-grid-lod.component.scss"], + templateUrl: "./hierarchical-grid-lod.component.html" +}) +export class HierarchicalGridLoDSampleComponent implements AfterViewInit { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } + + public ngAfterViewInit() { + this.hGrid.isLoading = true; + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.isLoading = false; + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); + } + + public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); + } +} +``` + + + +```ts +constructor() { + const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent; + const ordersRowIsland = document.getElementById("ordersRowIsland"); + const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland"); + + ordersRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Customers"); + }); + + orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Orders"); + }); + + hierarchicalGrid.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => { + hierarchicalGrid.isLoading = false; + hierarchicalGrid.data = data; + hierarchicalGrid.markForCheck(); + }); +} + +public gridCreated(event: CustomEvent, _parentKey: string) { + const context = event.detail; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false + }; + + context.grid.isLoading = true; + + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```tsx +const hierarchicalGrid = useRef(null); + +useEffect(() => { + hierarchicalGrid.current.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data: any) => { + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); +}, []); + +function gridCreated(rowIsland: IgrRowIsland, event: IgrGridCreatedEventArgs, _parentKey: string) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + context.grid.isLoading = true; + + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +} +``` + + + +```razor +igRegisterScript("OnGridRendered", () => { + const grid = document.getElementById("hGrid"); + + grid.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data) => { + grid.isLoading = false; + grid.data = data; + grid.markForCheck(); + }); +}, false) + +igRegisterScript("OnGridCreated", (args) => { + const context = args.detail; + const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders"; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + context.grid.isLoading = true; + + getData(dataState).then((data) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +}, false) +``` + + +### API リファレンス + +* `HierarchicalGrid` +* `RowIsland` + +### その他のリソース + +* [Hierarchical Grid コンポーネント](overview.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/grids/hierarchical-grid/overview.md b/doc/jp/components/grids/hierarchical-grid/overview.md index 3843f466e..7c20aec0f 100644 --- a/doc/jp/components/grids/hierarchical-grid/overview.md +++ b/doc/jp/components/grids/hierarchical-grid/overview.md @@ -1,15 +1,884 @@ --- -title: {Platform} 階層データ グリッド | マテリアル テーブル | {ProductName} | インフラジスティックス -_description: {Platform} マテリアル テーブルに基づいて {ProductName} データ グリッドを使用し、さまざまな Angular イベントを使用してタッチ応答 Angular コンポーネントを作成する方法を説明します。 -_keywords: angular data grid, igniteui for angular, infragistics, angular データ グリッド, インフラジスティックス +title: {Platform} 階層グリッド | 最速の {Platform} 階層テーブル | インフラジスティックス +_description: {ProductName} 階層グリッドは、階層データを簡単に表示および操作するために使用されます。最小限のコードでデータをすばやくバインドできます。無料でお試しください。 +_keywords: {Platform} hierarchical grid, igniteui for {Platform}, infragistics, {Platform} 階層グリッド, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] namespace: Infragistics.Controls _language: ja --- -# 階層データ グリッドの概要と構成 +# Hierarchical Data Grid (階層データ グリッド) の概要と構成 -{ProductName} 階層データ グリッドは、階層化されたデータの表示や操作を簡単にできます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイル フィルタリング、ソート、ページング、テンプレート、列移動などの豊富な機能を提供します。データ グリッドは、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。マテリアル テーブルをベースとした UI グリッドにより、階層データの表示がさらに簡単できれいになりました。 +{ProductName} 階層データ グリッドは、階層表形式データの表示と操作に使用されます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイル フィルタリング、ソート、ページング、テンプレート化、列の移動、列のピン固定、Excel および CSV へのエクスポートなどの豊富な機能セットを提供します。階層グリッドは、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。 - +## {Platform} 階層データ グリッドの例 + +この {Platform} グリッドの例では、ユーザーがデータの階層セットを視覚化し、セル テンプレートを使用して他の視覚的コンポーネントを追加する方法を確認できます。 + +`sample="/{HierarchicalGridSample}/overview", height="700", alt="{Platform} Hierarchical Grid の例"` + +## {ProductName} 階層グリッドを使用した作業の開始 + +### 依存関係 + +{Platform} 階層グリッドを初期化するには、{ProductName} パッケージをインストールする必要があります。 + + + +IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 + +- [作業の開始](../../general-getting-started-blazor-client.md) +- [NuGet パッケージの追加](../../general-nuget-feed.md) + +また、 階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: + +```razor + +``` + +以下の名前空間を追加してコントロールの実装を開始できます。 + +```razor +@using IgniteUI.Blazor.Controls +``` + + + + + +{Platform} 階層グリッドのパッケージをインストールするときは、core パッケージもインストールする必要があります。 + +```cmd +npm install --save {PackageCore} +npm install --save {PackageGrids} +npm install --save {PackageInputs} +npm install --save {PackageLayouts} +``` + +グリッドを使用するには、次のインポートも含める必要があります。 + + +```typescript +import 'igniteui-webcomponents-grids/grids/combined.js'; +``` + + +```tsx +import "igniteui-react-grids/grids"; +``` + +対応するスタイルも参照する必要があります。[テーマ](../../themes/overview.md)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます: + + +```typescript +import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'; +``` + + +```tsx +import 'igniteui-react-grids/grids/themes/light/bootstrap.css' +``` + + +またはそれをリンクするには: +```typescript + +``` + +階層グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](overview.md#スタイル設定)セクションを参照してください。 + + + + +### コンポーネント モジュール + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule)); +``` + +```typescript +// app.module.ts + +import { IgxhierarchicalGridModule } from 'igniteui-angular'; +// import { IgxhierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + // ... + IgxhierarchicalGridModule, + // ... + ] +}) +export class AppModule {} +``` + + + +## {Platform} 階層データ グリッドの使用 + +### データ バインディング + +*{HierarchicalGridSelector}* は、{GridSelector} から派生し、ほとんどの機能を共有します。主要な違いは階層で複数レベルを定義できることです。*{RowIslandSelector}* と呼ばれる *{HierarchicalGridSelector}* の定義内の個別のタグで設定されます。*{RowIslandSelector}* コンポーネントは、特定レベルの各子グリッドの設定を定義します。レベルごとの複数行アイランドがサポートされます。 +階層グリッドで 2 通りのデータ バインドがサポートされます。 + +### 階層データの使用 + +アプリケーションが階層データ全体をオブジェクトの子配列を参照するオブジェクトの配列として読み込む場合、階層グリッドを設定して読み込み、自動的にバインドすることができます。以下はプロパティ構造の階層データソースのプロパティの例です。 + +```ts +export const singers = [{ + "Artist": "Naomí Yepes", + "Photo": "assets/images/hgrid/naomi.png", + "Debut": "2011", + "Grammy Nominations": 6, + "Grammy Awards": 0, + "Tours": [{ + "Tour": "Faithful Tour", + "Started on": "Sep-12", + "Location": "Worldwide", + "Headliner": "NO", + "Toured by": "Naomí Yepes" + }], + "Albums": [{ + "Album": "Dream Driven", + "Launch Date": new Date("August 25, 2014"), + "Billboard Review": "81", + "US Billboard 200": "1", + "Artist": "Naomí Yepes", + "Songs": [{ + "No.": "1", + "Title": "Intro", + "Released": "*", + "Genre": "*", + "Album": "Dream Driven" + }] + }] +}]; +``` +```razor +public class SingersData : List +{ + public SingersData() + { + this.Add(new SingersDataItem() + { + Artist = "Naomí Yepes", + Photo = "assets/images/hgrid/naomi.png", + Debut = "2011", + GrammyNomination = 6, + GrammyAwards = 0, + Tours = new List() { + new ToursItem() { + Tour = "Faithful Tour", + StartedOn = new DateTime(), + Location = "Worldwide", + Headliner = "NO", + TouredBy = "Naomí Yepes" + } + }, + Albums = new List() { + new AlbumItem() { + Album = "Dream Driven", + LaunchDate = new DateTime(), + BillboardReview= "81", + Artist = "Naomí Yepes", + Songs = new List() { + new SongItem() { + Number = "1", + Title="Intro", + Released = "*", + Genre = "Rock", + Album ="Dream Driven" + } + } + } + } + }); + } +} +``` +各 *{RowIslandSelector}* は、子データを保持するプロパティのキーを指定します。 + +```html + + + + + + + + +``` + +```html + + + + + + + + +``` + +```tsx + + + + + + + + +``` + +```razor + + + + + + +``` +> [!NOTE] +> `data` の代わりにユーザーは、データを自動的に設定するめの読み込みに {HierarchicalGridSelector} が必要な `childDataKey` のみ設定します。 + +### ロードオンデマンドの使用 + +ほとんどのアプリケーションがはじめに最小限のデータを読み込むようでざいんされているため、結果的に読み込み時間が短くなります。このような場合、{HierarchicalGridSelector} を設定してユーザーが作成したサービスでデータのオンデマンド フィードを可能にします。 + + +```html + + + + + + + + +``` + +```typescript +// hierarchicalGridSample.component.ts + +@Component({...}) +export class HierarchicalGridLoDSampleComponent implements AfterViewInit { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } + + public ngAfterViewInit() { + this.hGrid.isLoading = true; + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.isLoading = false; + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); + } + + public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); + } +} +``` + +```typescript +// remote-load-on-demand.service.ts + +@Injectable() +export class RemoteLoDService { + public url = `https://data-northwind.indigo.design/`; + + constructor(private http: HttpClient) { } + + public getData(dataState: any): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map((response) => response) + ); + } + + public buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${this.url}${qS}`; + } +} +``` + + + +```html + + + + + +``` + +```ts +import { getData } from "./remoteService"; + +export class HierarchicalGridLoadOnDemand { + constructor() { + const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent; + const ordersRowIsland = document.getElementById("ordersRowIsland"); + const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland"); + + ordersRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Customers"); + }); + orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => { + this.gridCreated(event, "Orders"); + }); + + hierarchicalGrid.isLoading = true; + + getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => { + hierarchicalGrid.isLoading = false; + hierarchicalGrid.data = data; + hierarchicalGrid.markForCheck(); + }); + } + + public gridCreated(event: CustomEvent, _parentKey: string) { + const context = event.detail; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false + }; + context.grid.isLoading = true; + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); + } +} +``` + + +```tsx +import { getData } from "./remoteService"; + +export default function Sample() { + const hierarchicalGrid = useRef(null); + + function gridCreated( + rowIsland: IgrRowIsland, + event: IgrGridCreatedEventArgs, + _parentKey: string + ) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + context.grid.isLoading = true; + getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); + } + + useEffect(() => { + hierarchicalGrid.current.isLoading = true; + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data: any) => { + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); + }, []); + + return ( + + gridCreated(rowIsland, e, "Customers")} + > + gridCreated(rowIsland, e, "Orders")} + > + + + ); +} +``` + + +```ts +const URL = `https://data-northwind.indigo.design/`; + +export function getData(dataState: any): any { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState: any) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${URL}${qS}`; +} +``` + + +```razor + + + + + + +In JavaScript +igRegisterScript("OnGridRendered", () => { + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + grid.isLoading = true; + getData({ parentID: null, rootLevel: true, key: "Customers" }).then( + (data) => { + grid.isLoading = false; + grid.data = data; + grid.markForCheck(); + }); +}, false) + +igRegisterScript("OnGridCreated", (args) => { + const context = args.detail; + const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders"; + const dataState = { + key: context.owner.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + context.grid.isLoading = true; + getData(dataState).then((data) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); +}, false) + +const DATA_URL = `https://data-northwind.indigo.design/`; + +function getData(dataState) { + return fetch(buildUrl(dataState)) + .then((result) => result.json()); +} + +function buildUrl(dataState) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + return `${DATA_URL}${qS}`; +} +``` + +## 行展開インジケーターの表示/非表示 + +行がその展開前に子を持つかどうかについての情報を提供する方法がある場合は、`HasChildrenKey` 入力プロパティを使用できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。 + +```html + + +``` + +```html + + +``` + +```tsx + + +``` + +```razor + + +``` + +`HasChildrenKey` プロパティを設定する必要はありません。指定しなかった場合は、各行に展開インジケーターが表示されます。 + +さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、`ShowExpandAll` プロパティを使用できます。 +この UI は、パフォーマンス上の理由からデフォルトで無効になっているため、データが大きいグリッドやロードオンデマンドのグリッドで有効にすることはお勧めしません。 + +## 機能 + +グリッド機能を有効にして {RowIslandSelector} マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランド インスタンスでオプションを変更すると生成した各グリッドで変更されます。 + +```html + + + + + + + + + + + + + + + + + +``` + +```html + + + + + + + + + + + + + + + + + +``` + +```tsx + + + + + + + + + + + + + + + + +``` + +```razor + + + + + + + + + + + + + + + + +``` + +以下のグリッド機能はグリッド レベルごとに動作するため、各グリッド インスタンスが残りのグリッドとは別に管理します。 + +- ソート +- フィルタリング +- ページング +- 複数列ヘッダー +- 非表示 +- ピン固定 +- 移動 +- 集計 +- 検索 + +選択とナビゲーション機能は、{HierarchicalGridTitle} 全体でグローバルに作用します。 + +- 選択 + 選択は、選択したセルを異なる 2 つの子グリッドで同時に表示することを許可しません。 +- ナビゲーション + up/down へ移動するときに next/prev 要素が子グリッドの場合、ナビゲーションが関連子グリッド内で継続され、関連セルが選択済みにマークされ、フォーカスされます。子セルが現在の表示ビューポート以外にある場合にビューへスクロールされるため、選択したセルが常に表示されます。 + +## 「すべて縮小」 ボタン + +左上の角にある [すべて縮小] ボタンを押して階層グリッドで展開されてる行を縮小できます。更に他のグリッドを含む各子グリッドと階層グリッドにも同様のボタンがあり、階層の特定のグリッドのみ縮小することができます。 + + + + + + + +## CRUD 操作 + +> [!NOTE] +> フラットな Data Grid と行アイランドの各インスタンスの重要な違いは、同じトランザクション サービス インスタンスがあり、同じトランザクション ログを蓄積する点です。CRUD 機能を有効にするには、`IgxHierarchicalTransactionServiceFactory` を注入する必要があります。 + +CRUD API メソッドの呼び出しは,各グリッド インスタンスで可能です。 + +「[igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.md)」トピックを確認してください。 + + + +## スタイル設定 +igxHierarchicalGrid を使用すると、[Ignite UI for Angular Theme ライブラリ](../themes/sass/component-themes.md) でスタイルを設定できます。[theme]({environment:sassApiUrl}/index.html#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。 + +以下の手順では、igxHierarchicalGrid スタイルをカスタマイズする手順を実行しています。 + +### グローバル テーマのインポート +階層グリッドのカスタマイズは、すべてのスタイリング機能と mixins が配置されている `index` ファイルをインポートする必要があります。 + +```scss +@import '~igniteui-angular/lib/core/styles/themes/index' +``` + +### カスタム テーマの定義 +次に、[`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) を拡張し、必要に応じて階層グリッドをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。 + + >[!NOTE] + >特定の `sass` 階層グリッド機能はありません。 + + +```scss +$custom-theme: grid-theme( + $cell-active-border-color: #ffcd0f, + $cell-selected-background: #6f6f6f, + $row-hover-background: #f8e495, + $row-selected-background: #8d8d8d, + $header-background: #494949, + $header-text-color: #fff, + $expand-icon-color: #ffcd0f, + $expand-icon-hover-color: #e0b710, + $resize-line-color: #ffcd0f, + $row-highlight: #ffcd0f +); +``` + +### カスタム カラー パレットの定義 +上記で説明したアプローチでは、色の値がハード コーディングされていました。または、[`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) および [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) 関数を使用して、柔軟性を高めることができます。 +`igx-palette` は指定した一次色と二次色に基づいてカラーパレットを生成します。 + + ```scss +$black-color: #494949; +$yellow-color: #FFCD0F; + +$custom-palette: palette( + $primary: $black-color, + $secondary: $yellow-color +); +``` +カスタム パレットが生成された後、`igx-color` 関数を使用して、さまざまな種類の原色と二次色を取得できます。 +```scss +$custom-theme: grid-theme( + $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)), + $cell-selected-background: (igx-color($custom-palette, "primary", 300)), + $row-hover-background: (igx-color($custom-palette, "secondary", 100)), + $row-selected-background: (igx-color($custom-palette, "primary", 100)), + $header-background: (igx-color($custom-palette, "primary", 500)), + $header-text-color: (igx-contrast-color($custom-palette, "primary", 500)), + $expand-icon-color: (igx-color($custom-palette, "secondary", 500)), + $expand-icon-hover-color: (igx-color($custom-palette, "secondary", 600)), + $resize-line-color: (igx-color($custom-palette, "secondary", 500)), + $row-highlight: (igx-color($custom-palette, "secondary", 500)) +); +``` + +### カスタム スキーマの定義 +[**schema**](../themes/sass/schemas.md) のすべての利点を備えた柔軟な構造を構築できます。**schema** はテーマを作成させるための方法です。 +すべてのコンポーネントに提供される 2 つの事前定義されたスキーマのいずれかを拡張します。この場合、`$_light_grid` を使用します。 +```scss +$custom-grid-schema: extend($_light-grid,( + cell-active-border-color: (igx-color:('secondary', 500)), + cell-selected-background: (igx-color:('primary', 300)), + row-hover-background: (igx-color:('secondary', 100)), + row-selected-background: (igx-color:('primary', 100)), + header-background: (igx-color:('primary', 500)), + header-text-color: (igx-contrast-color:('primary', 500)), + expand-icon-color: (igx-color:('secondary', 500)), + expand-icon-hover-color: (igx-color:('secondary', 600)), + resize-line-color: (igx-color:('secondary', 500)), + row-highlight: (igx-color:('secondary', 500)) +)); +``` +カスタム スキーマを適用するには、`light` グローバルまたは `dark` グローバルを拡張する必要があります。プロセス全体が実際にコンポーネントにカスタム スキーマを提供し、その後、それぞれのコンポーネントテーマに追加します。 +```scss +$my-custom-schema: extend($light-schema, ( + igx-grid: $custom-grid-schema +)); + +$custom-theme: grid-theme( + $palette: $custom-palette, + $schema: $my-custom-schema +); +``` + +### カスタム テーマの適用 +テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。 + +```scss +@include grid($custom-theme); +``` + +### スコープ コンポーネント テーマ + +カスタム テーマが特定のコンポーネントのみに影響するように、定義したすべてのスタイルをグローバル スタイル ファイルからカスタム コンポーネントのスタイルファイルに移動できます (`index` ファイルのインポートを含む)。 + +このように、Angular の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。 + + >[!NOTE] + >コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 + >[!NOTE] + >ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを `:host` セレクター内にラップします。 + +```scss +:host { + ::ng-deep { + @include grid($custom-theme); + } +} +``` + +### サンプル + + + + +>[!NOTE] +>サンプルは、`テーマの変更`で選択したグローバル テーマの影響を受けません。 + + + + +## スタイル設定 +定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。ヘッダーの背景とテキストの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります: + + +```html + +``` + + +```tsx + +``` + +```razor + +``` + +次に、そのクラスの `--header-background` および `--header-text-color` CSS プロパティを設定します: + +```css +.grid { + --header-background: #494949; + --header-text-color: #FFF; +} +``` +### サンプル +`sample="/{HierarchicalGridSample}/hierarchical-grid-styling", height="700", alt="{Platform} Hierarchical Grid スタイル設定の例"` + + + +## 既知の制限 + +|制限|説明| +|--- |--- | +|グループ化|グループ化機能は、階層グリッドでサポートされません。| + +## API リファレンス + +* `HierarchicalGrid` +* `RowIsland` +* `Grid` +* `Column` +* `Cell` + + + + +コミュニティに参加して新しいアイデアをご提案ください。 + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/grids/tree-grid/overview.md b/doc/jp/components/grids/tree-grid/overview.md index 090dc2888..32ced937b 100644 --- a/doc/jp/components/grids/tree-grid/overview.md +++ b/doc/jp/components/grids/tree-grid/overview.md @@ -81,7 +81,7 @@ import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'; - + ### コンポーネント モジュール ```razor @@ -106,7 +106,7 @@ import { IgxTreeGridModule } from 'igniteui-angular'; export class AppModule {} ``` - + ## 使用方法 diff --git a/doc/jp/components/grids/tree.md b/doc/jp/components/grids/tree.md index 47dac386b..2ec30cc3f 100644 --- a/doc/jp/components/grids/tree.md +++ b/doc/jp/components/grids/tree.md @@ -86,7 +86,7 @@ builder.Services.AddIgniteUIBlazor( ### ツリーの宣言 `TreeItem` は、`Tree` に属するすべての項の表現です。 -項目は、`disabled`、`active`、`selected`、および `expanded` プロパティを提供します。これにより、要件に応じて項目の状態を構成できます。 +項目は、`Disabled`、`Active`、`Selected`、および `Expanded` プロパティを提供します。これにより、要件に応じて項目の状態を構成できます。 `value` プロパティを使用して、項目が表すデータ エントリへの参照を追加できます。 @@ -125,7 +125,7 @@ builder.Services.AddIgniteUIBlazor( - 静的な非バインド項目を作成してツリーを宣言します。 -ツリーを描画するために、必ずしもデータ セットは必要ありません。公開された `label` プロパティを使用して、基になるデータ モデルなしで個々の項目を作成したり、`TreeItem` ラベルのカスタム スロット コンテンツを提供したりできます。 +ツリーを描画するために、必ずしもデータ セットは必要ありません。公開された `Label` プロパティを使用して、基になるデータ モデルなしで個々の項目を作成したり、`TreeItem` ラベルのカスタム スロット コンテンツを提供したりできます。 ```html @@ -192,16 +192,49 @@ builder.Services.AddIgniteUIBlazor( ### 項目のインタラクション +`TreeItem` は展開または折り畳むことができます。 +- 項目の展開インジケーター *(デフォルトの動作)* をクリックします。 +- `Tree` の `ToggleNodeOnClick` プロパティが **true** に設定されている場合、項目をクリックします。 + +```html + + + + + + + + + + +``` + +デフォルトでは、複数の項目を同時に展開できます。この動作を変更し、一度に 1 つのブランチのみを展開できるようにするには、`SingleBranchExpand` プロパティを有効にします。このようにして、項目が展開されると、同じレベル内ですでに展開されている他のすべてのブランチが縮小されます。 + +```html + + + + + + + + + + +``` + `Tree` は、項目のインタラクションのために次の API メソッドを提供します: -- `expand` - すべての項目を展開します。項目配列が渡されると、指定された項目のみが展開されます。 -- `collapse` - すべての項目を縮小します。項目配列が渡されると、指定された項目のみが縮小されます。 -- `select` - すべての項目を選択します。項目配列が渡された場合、指定された項目のみを選択します。`Selection` イベントを発行しません。 -- `deselect` - すべての項目の選択を解除します。項目配列が渡された場合、指定された項目のみの選択を解除します。`Selection` イベントを発行しません。 +- `Tree.Expand` - すべての項目を展開します。項目配列が渡されると、指定された項目のみが展開されます。 +- `Tree.Collapse` - すべての項目を縮小します。項目配列が渡されると、指定された項目のみが縮小されます。 +- `Tree.Select` - すべての項目を選択します。項目配列が渡された場合、指定された項目のみを選択します。`selection` イベントを発行しません。 +- `Tree.Deselect` - すべての項目の選択を解除します。項目配列が渡された場合、指定された項目のみの選択を解除します。`selection` イベントを発行しません。 + ## {Platform} ツリーの選択 -{ProductName} ツリー コンポーネントで項目の選択を設定するには、その `selection` プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: **None**、**Multiple** および **Cascade**。以下で、それぞれについて詳しく説明します。 +{ProductName} ツリー コンポーネントで項目の選択を設定するには、その `Selection` プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: **None**、**Multiple** および **Cascade**。以下で、それぞれについて詳しく説明します。 ### None @@ -209,7 +242,7 @@ builder.Services.AddIgniteUIBlazor( ### Multiple -`Tree` で複数の項目を選択できるようにするには、`selection` プロパティを **multiple** に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。各項目には、選択されているまたは選択されていないの 2 つの状態があります。このモードは複数選択をサポートします。 +`Tree` で複数の項目を選択できるようにするには、`Selection` プロパティを **multiple** に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。各項目には、選択されているまたは選択されていないの 2 つの状態があります。このモードは複数選択をサポートします。 ```html diff --git a/doc/jp/components/inputs/button.md b/doc/jp/components/inputs/button.md index 4d135050c..d18f2a72d 100644 --- a/doc/jp/components/inputs/button.md +++ b/doc/jp/components/inputs/button.md @@ -8,7 +8,7 @@ _language: ja # {Platform} Button (ボタン) の概要 -{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベント、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 +{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベントクリックされたコールバック、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 ## {Platform} Button の例 diff --git a/doc/jp/components/inputs/date-time-input.md b/doc/jp/components/inputs/date-time-input.md index 111db6b8f..b0d2ffbe9 100644 --- a/doc/jp/components/inputs/date-time-input.md +++ b/doc/jp/components/inputs/date-time-input.md @@ -6,9 +6,9 @@ mentionedTypes: ['DateTimeInput'] _language: ja --- -# {Platform} 日時入力の概要 +# {Platform} Date Time Input (日時入力) の概要 -{ProductName} 日時入力を使用すると、ユーザーは選択した入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスクされた入力を使用して、日付と時刻の両方の部分を編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。 +{ProductName} Date Time Input を使用すると、ユーザーは選択した入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスクされた入力を使用して、日付と時刻の両方の部分を編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。 `sample="/inputs/date-time-input/overview", height="150", alt="{Platform} 日時入力の概要の例"` diff --git a/doc/jp/components/inputs/dropdown.md b/doc/jp/components/inputs/dropdown.md index 8a1bd6bb3..f5f38224c 100644 --- a/doc/jp/components/inputs/dropdown.md +++ b/doc/jp/components/inputs/dropdown.md @@ -57,6 +57,8 @@ import { IgrDropdownModule, IgrDropdown } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; IgrDropdownModule.register(); ``` + +{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 @@ -83,6 +85,17 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); ``` +```tsx + +
+ Options +
+ Option 1 + Option 2 + Option 3 +
+``` + ### Target (ターゲット) {Platform} ドロップダウン リストは、ターゲットに対して相対的に配置されます。`target` スロットを使用すると、クリック時に `open` プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる `Show`、`Hide`、および `Toggle` メソッドを使用して実現できます。デフォルトでは、ドロップダウン リストは CSS の `absolute` 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、{Platform} ドロップダウンの `PositionStrategy` を `fixed` に設定する必要があります。ドロップダウン リストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、`SameWidth` プロパティを **true** に設定する必要があります。 diff --git a/doc/jp/components/inputs/input.md b/doc/jp/components/inputs/input.md index 09b9b074f..3a9028f52 100644 --- a/doc/jp/components/inputs/input.md +++ b/doc/jp/components/inputs/input.md @@ -5,7 +5,7 @@ _keywords: {Platform} input, {ProductName}, Infragistics, {Platform} 入力, イ mentionedTypes: ['Input', 'Icon', 'Radio'] _language: ja --- -# {Platform} Input の概要 +# {Platform} Input (入力) の概要 {ProductName} Input は、ユーザーがデータを入力できるコンポーネントです。 diff --git a/doc/jp/components/inputs/mask-input.md b/doc/jp/components/inputs/mask-input.md index 78ed0159a..b74d83985 100644 --- a/doc/jp/components/inputs/mask-input.md +++ b/doc/jp/components/inputs/mask-input.md @@ -33,6 +33,30 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcMaskInputComponent); ``` + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`MaskInput` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +```tsx +import { IgrMaskInput, IgrMaskInputModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +IgrMaskInputModule.register(); +``` + + +```tsx + + + + + ZIP Code + +``` + {ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 ### マスクのルール @@ -66,6 +90,15 @@ defineComponents(IgcMaskInputComponent); ``` +```tsx + + + + + Phone number + +``` + その後、ブラウザーに次のように表示されます: `sample="/inputs/mask-input/applying-mask", height="150", alt="{Platform} マスク入力マスクの適用の例"` @@ -80,6 +113,10 @@ defineComponents(IgcMaskInputComponent); ``` +```tsx + +``` + デフォルトでは、`prompt` 文字はアンダースコアです。 ### プレースホルダー @@ -90,6 +127,10 @@ defineComponents(IgcMaskInputComponent); ``` +```tsx + +``` + ### 値モード IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる `valueMode` プロパティを公開します。デフォルトでは、`valueMode` は *raw* に設定されています。以下の例をご覧ください: diff --git a/doc/jp/components/inputs/rating.md b/doc/jp/components/inputs/rating.md index b2eda3e16..4156b9141 100644 --- a/doc/jp/components/inputs/rating.md +++ b/doc/jp/components/inputs/rating.md @@ -23,6 +23,16 @@ npm install {PackageWebComponents} + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + + + `Rating` を使用する前に、次のように登録する必要があります: @@ -52,14 +62,6 @@ defineComponents(IgcRatingComponent); -まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: - -```cmd -npm install igniteui-react -``` - -次に、以下のように、`Rating` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: - ```tsx import { IgrRatingModule, IgrRating } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; @@ -81,11 +83,17 @@ IgrRatingModule.register(); ``` + +```tsx + +``` + + これにより、データの入力と読み取りに使用できる 5 つ星の評価コンポーネントが作成されます。 ## カスタム シンボルの使用 -評価コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、`Rating` の開く括弧と閉じる括弧の間に `RatingSymbol` コンポーネントを配置する必要があります。 +`Rating` コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、`Rating` の開く括弧と閉じる括弧の間に `RatingSymbol` コンポーネントを配置する必要があります。 ```html @@ -110,6 +118,28 @@ IgrRatingModule.register(); ``` + +```tsx + + + + + + + + + + + + + + + + + +``` + + `sample="/inputs/rating/custom", height="150", alt="{Platform} Rating カスタム シンボルの例"` @@ -142,7 +172,34 @@ IgrRatingModule.register(); ``` -`sample="/inputs/rating/custom", height="150", alt="{Platform} 単一選択による {Platform} Rating"` + +```tsx + + +
😣
+
😣
+
+ +
😣
+
😣
+
+ +
😣
+
😣
+
+ +
😣
+
😣
+
+ +
😣
+
😣
+
+
+``` + + +`sample="/inputs/rating/single-selection", height="150", alt="{Platform} 単一選択による {Platform} Rating"` > `step` 属性は単一選択モードでは機能しないことに注意してください。 @@ -168,6 +225,15 @@ IgrRatingModule.register(); ``` + +```tsx + +
+
+
+``` + + `sample="/inputs/rating/empty", height="150", alt="{Platform} 空および選択状態の {Platform} Rating"` @@ -203,9 +269,13 @@ IgrRatingModule.register(); -`HoverPreview` 属性により、ホバー時にユーザーが選択した場合の様子がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。 +`HoverPreview` 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。 + +`hoverPreview` 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。 + + #### Read-Only (読み取り専用) `ReadOnly` 属性を使用すると、ユーザーは `Rating` を読み取り専用モードで設定できます。この属性は、コンポーネントを情報提供のみを目的として使用する場合に役立ちます。 @@ -234,6 +304,10 @@ IgrRatingModule.register(); `Rating` コンポーネントは、`Hover` と `Change` の 2 つの個別のイベントを発行します。 + +`Rating` コンポーネントは、`hover` と `change` の 2 つの個別のイベントを発行します。 + + #### Hover Event (ホバー イベント) @@ -244,6 +318,10 @@ IgrRatingModule.register(); `Hover` イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。 + +`hover` イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。 + + #### Change Event (変更イベント) @@ -254,6 +332,10 @@ IgrRatingModule.register(); 選択した値が変更されると、`Change` イベントが発生します。 + +選択した値が変更されると、`change` イベントが発生します。 + + ## スタイル設定 `Rating` コンポーネントは、base、label、value-label、symbol、およびコンポーネント シンボルとそれに含まれるラベルのスタイルを設定できるシンボルを提供します。 diff --git a/doc/jp/components/inputs/select.md b/doc/jp/components/inputs/select.md index de785062c..f48603475 100644 --- a/doc/jp/components/inputs/select.md +++ b/doc/jp/components/inputs/select.md @@ -62,6 +62,26 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`Select` および `SelectItem` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrSelectModule, IgrSelect, IgrSelectItemModule, IgrSelectItem } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrSelectModule.register(); +IgrSelectItemModule.register(); +``` + + + > [!Note] > ヘッダーとグループの選択コンポーネントは、使用しない限り必須ではないことに注意してください。 @@ -89,6 +109,19 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); ``` + + +```tsx + + Orange + Apple + Banana + Mango + +``` + + + ### Select (選択) `Select` コンポーネントは `Form` コンポーネント内で使用できるため、登録する `Name` プロパティを公開します。また、`Label` および `Placeholder` プロパティもあります。`Outlined` プロパティは、Material テーマに関してのみ、スタイリング目的で使用されます。デフォルトのスロットを除いて、コンポーネントは、`header`、`footer`、`helper-text`、`prefix`、`suffix`、および `toggle-icon` を含む他のいくつかのスロットを提供します。コンポーネントのサイズは、`--ig-size` CSS 変数を使用して変更できます。 @@ -123,6 +156,18 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); ``` + + +```tsx + + + Tasks + + +``` + + + ### Group (グループ) 複数の `SelectItem` を `SelectGroup` コンポーネントの開く括弧と閉じる括弧の間に配置して、ユーザーがそれらを視覚的にグループ化できるようにすることができます。`SelectGroup` は、その `label` スロットを介してラベルを付け、その `Disabled` プロパティを介して無効にすることができます。 @@ -188,6 +233,42 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); ``` + + +```tsx + + + Europe + + + + + + Germany + DE + + + + + + + France + FR + + + + + + + Spain + ES + + + +``` + + + ## 検証 さらに、`Select` は、`Required`、`Disabled`、`Autofocus` など、ほとんどの `Input` プロパティをサポートします。コンポーネントは、その検証にバインドされたメソッドも公開します。 @@ -215,7 +296,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); > [!Note] > `Select` コンポーネントは、項目の**単一**選択のみをサポートします。 - + ## スタイル設定 @@ -253,7 +334,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); - + ## API リファレンス diff --git a/doc/jp/components/layouts/accordion.md b/doc/jp/components/layouts/accordion.md index 12e78443d..4912792fd 100644 --- a/doc/jp/components/layouts/accordion.md +++ b/doc/jp/components/layouts/accordion.md @@ -45,6 +45,31 @@ defineComponents(IgcAccordionComponent); + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`Accordion` および `ExpansionPanel` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { + IgrAccordion, + IgrAccordionModule, + IgrExpansionPanel, + IgrExpansionPanelModule, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +IgrAccordionModule.register(); +IgrExpansionPanelModule.register(); +``` + + + `Accordion` を使用する前に、次のように登録する必要があります: ```razor @@ -108,6 +133,19 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); ``` +```tsx + + +
Title Panel 1
+
Content Panel 1
+
+ +
Title Panel 2
+
Content Panel 2
+
+
+``` + `Panels` アクセサーを使用して、`Accordion` のすべての子の拡張パネルを含むコレクションへの参照を取得できます。 @@ -123,6 +161,7 @@ constructor() { ``` + 上記で示したように、`SingleExpand` プロパティを使用すると、一度に 1 つまたは複数のパネルを展開できるかどうかを設定できます。 `HideAll` メソッドと `ShowAll` メソッドを使用すると、`Accordion` のすべての `ExpansionPanel` をプログラムでそれぞれ省略したり展開したりできます。 diff --git a/doc/jp/components/layouts/expansion-panel.md b/doc/jp/components/layouts/expansion-panel.md index 40c335c62..0e0ae6859 100644 --- a/doc/jp/components/layouts/expansion-panel.md +++ b/doc/jp/components/layouts/expansion-panel.md @@ -7,7 +7,7 @@ namespace: Infragistics.Controls _language: ja --- -# {Platform} 展開パネルの概要 +# {Platform} Expansion Panel (展開パネル) の概要 {ProductName} 展開パネルは、縮小または展開の 2 つの状態で描画できる軽量のアコーディオン コンポーネントです。展開パネルは、マウス クリックまたはキーボード操作によって切り替えることができます。 ## {Platform} 展開パネルの例 @@ -131,7 +131,7 @@ IgrExpansionPanelModule.register(); `ExpansionPanel` を使用すると、公開された *title*、*subTitle*、および *indicator* スロット全体でヘッダーを簡単にカスタマイズできます。 -展開インジケーターの位置の構成は、展開パネルの `indicatorAlignment` プロパティを使用して行うことができます。可能なオプションは、**start**、**end**、または **none** です。 +展開インジケーターの位置の構成は、展開パネルの `IndicatorPosition` プロパティを使用して行うことができます。可能なオプションは、**start**、**end**、または **none** です。 次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。 diff --git a/doc/jp/components/layouts/stepper.md b/doc/jp/components/layouts/stepper.md index 6901e07b1..69daa0c90 100644 --- a/doc/jp/components/layouts/stepper.md +++ b/doc/jp/components/layouts/stepper.md @@ -11,9 +11,9 @@ _language: ja ## {Platform} ステッパーの例 -次の {ProductName} ステッパーの例は、動作中のコンポーネントを示しています。これは、エンド ユーザーがクレジット カードの資格情報を変更するために通過しなければならないプロセスを、いくつかの連続したステップに従って視覚化します。 +次の {ProductName} ステッパーの例は、動作中のコンポーネントを示しています。これは、エンドユーザーが注文の詳細を構成するために通過しなければならないプロセスを、いくつかの連続したステップに従って視覚化します。 -`sample="/layouts/stepper/overview", height="725", alt="{Platform} ステッパーの例"` +`sample="/layouts/stepper/linear", height="430", alt="{Platform} リニア ステッパーの例"`
@@ -38,6 +38,24 @@ defineComponents(IgcStepperComponent); {ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 + + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`Stepper` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrStepperModule, IgrStepper, IgrStep } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +IgrStepperModule.register(); +``` + + ```razor // in Program.cs file @@ -59,7 +77,7 @@ builder.Services.AddIgniteUIBlazor( これで、{Platform} `Stepper` とそのパネルの基本構成から始めることができます。 ## {Platform} ステッパーの使用方法 -`Step` は、`Stepper` に属するすべてのステップの表現です。ステップは `Invalid`、`Active`、`Optional`、`Disabled`、`Complete` プロパティを提供し、ビジネス要件に応じてステップの状態を構成できます。 +`Step` は、`Stepper` に属するすべてのステップの表現です。ステップは `Step.Invalid`、`Step.Active`、`Step.Optional`、`Step.Disabled`、`Step.Complete` プロパティを提供し、ビジネス要件に応じてステップの状態を構成できます。 ### {Platform} ステッパーの宣言 ステップは、以下の方法のいずれかを使用して宣言できます。 @@ -90,6 +108,16 @@ builder.Services.AddIgniteUIBlazor( ``` +```tsx + + {this.StepsData.map(item => + +

{item.title}

+
+ } +
+``` + - 静的ステップの作成 ```html @@ -113,6 +141,18 @@ builder.Services.AddIgniteUIBlazor( ``` + +```tsx + + +

Step 1

+
+ +

Step 2

+
+
+``` + 各ステップで、`Indicator`、`Title`、および `Subtitle` スロットを使用してインジケーター、タイトル、およびサブタイトルを構成できます。 > [!Note] @@ -144,6 +184,21 @@ builder.Services.AddIgniteUIBlazor( ``` + +```tsx + + + +

Home

+

Home Sub Title

+
+ Step Content + ... +
+
+
+``` + ### {Platform} ステッパーの向きの変更 @@ -166,23 +221,6 @@ builder.Services.AddIgniteUIBlazor( -
- -### Stepper のアニメーション - -{Platform} の `Stepper` のアニメーションにより、エンドユーザーは、定義されたステップを操作しているときに美しいユーザー操作体験を得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。 - -ステッパーが水平方向の場合、デフォルトでは `slide` アニメーションを使用するように設定されています。その他に `fade` アニメーションもサポートされます。アニメーションは、`horizontalAnimation` 入力を介して構成されます。 - -垂直方向のレイアウトでは、アニメーション タイプは `verticalAnimationType` プロパティを使用して定義できます。デフォルトでは、その値は `grow` に設定されており、ユーザーはそれを `fade` に設定することもできます。 - -両方のアニメーション タイプ入力に `none` を設定すると、ステッパー アニメーションが無効になります。 - -`Stepper` コンポーネントを使用すると、ステップ間の遷移にかかる時間を設定することもできます。これは、数値を受け取る `animationDuration` プロパティで設定でき、いずれのレイアウト方向でも共通の設定です。デフォルト値は 320ms に設定されています。 - -`sample="/layouts/stepper/animations", height="600", alt="{Platform} Stepper アニメーションの例"` - -
### ステップ状態 @@ -197,20 +235,46 @@ builder.Services.AddIgniteUIBlazor( {Platform} `Stepper` は、`Linear` プロパティを使用してステップ フローを設定できます。デフォルトで、linear は *false* に設定され、ユーザーは `Stepper` で無効にされていないステップを選択できます。 -linear プロパティが *true* に設定されている場合、ステッパーは次のステップに進む前に現在のオプションではないステップを有効にする必要があります。 -現在のオプションではないステップが有効でない場合、現在のステップを検証するまで次のステップに進むことができません。 - -> [!Note] -> オプションのステップの有効性は考慮されません。 +```html + + +

Step 1

+
+ +

Step 2

+
+
+``` -以下の例は、リニア ステッパーを構成する方法を示しています。 +```razor + + +

Step 1

+
+ +

Step 2

+
+
+``` -`sample="/layouts/stepper/linear", height="430", alt="{Platform} リニア ステッパーの例"` +```tsx + + +

Step 1

+
+ +

Step 2

+
+
+``` +linear プロパティが *true* に設定されている場合、ステッパーは次のステップに進む前に現在のオプションではないステップを有効にする必要があります。 +現在のオプションではないステップが有効でない場合、現在のステップを検証するまで次のステップに進むことができません。 -
+> [!Note] +> オプションのステップの有効性は考慮されません。 ### ステップ操作 @@ -249,7 +313,7 @@ linear プロパティが *true* に設定されている場合、ステッパ 向きが垂直に設定され、タイトルの位置が**定義されていない**場合、タイトルはインジケーターの**後**に表示されます。 > [!Note] -> **titlePosition** プロパティは、ステッパーの StepType プロパティが *full* に設定されている場合に**のみ**適用できます。 +> **titlePosition** プロパティは、ステッパーの stepType プロパティが *full* に設定されている場合に**のみ**適用できます。 **Indicator (インジケーター)** @@ -270,9 +334,25 @@ linear プロパティが *true* に設定されている場合、ステッパ `sample="/layouts/stepper/steptypes", height="300", alt="{Platform} ステップ タイプの例"` +
+ + +### Stepper のアニメーション + +{Platform} の `Stepper` のアニメーションにより、エンドユーザーは、定義されたステップを操作しているときに美しいユーザー操作体験を得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。 + +ステッパーが水平方向の場合、デフォルトでは `slide` アニメーションを使用するように設定されています。その他に `fade` アニメーションもサポートされます。アニメーションは、`HorizontalAnimation` 入力を介して構成されます。 + +垂直方向のレイアウトでは、アニメーション タイプは `VerticalAnimation` プロパティを使用して定義できます。デフォルトでは、その値は `grow` に設定されており、ユーザーはそれを `fade` に設定することもできます。 +両方のアニメーション タイプ入力に `none` を設定すると、ステッパー アニメーションが無効になります。 + +`Stepper` コンポーネントを使用すると、ステップ間の遷移にかかる時間を設定することもできます。これは、数値を受け取る `animationDuration` プロパティで設定でき、いずれのレイアウト方向でも共通の設定です。デフォルト値は 320ms に設定されています。 + +`sample="/layouts/stepper/animations", height="600", alt="{Platform} Stepper アニメーションの例"`
+ ## キーボード ナビゲーション @@ -297,24 +377,24 @@ linear プロパティが *true* に設定されている場合、ステッパ | 部分名 | 説明 | | ---------|------------ | -| `header-container` | ステップのヘッダーとそのセパレーターのラッパー。 | -| `disabled` | 使用不可な状態を示します。ヘッダー コンテナーに適用されます。 | -| `complete-start` | 現在のステップの完了状態を示します。ヘッダー コンテナーに適用されます。 | -| `complete-end` | 前のステップの完了状態を示します。ヘッダー コンテナーに適用されます。 | -| `optional` | オプションの状態を示します。ヘッダー コンテナーに適用されます。 | -| `invalid` | オプションの状態を示します。ヘッダー コンテナーに適用されます。 | -| `top` | タイトルがインジケーターの上にあることを示します。ヘッダー コンテナーに適用されます。 | -| `bottom` | タイトルがインジケーターの下にあることを示します。ヘッダー コンテナーに適用されます。 | -| `start` | タイトルがインジケーターの前にあることを示します。ヘッダー コンテナーに適用されます。 | -| `end` | タイトルがインジケーターの後にあることを示します。ヘッダー コンテナーに適用されます。 | -| `header` | ステップのインジケーターとテキストのラッパー。 | -| `indicator` | Tステップのインジケーター。 | -| `text` | ステップのタイトルとサブタイトルのラッパー。 | -| `empty` | ステップにタイトルとサブタイトルが提供されていないことを示します。テキストに適用されます。 | -| `title` | ステップのタイトル。 | -| `subtitle` | ステップのサブタイトル。 | -| `body` | ステップのコンテンツのラッパー。 | -| `content` | ステップのコンテンツ。 | +| `header-container` | ステップのヘッダーとそのセパレーターのラッパー。| +| `disabled` | 使用不可な状態を示します。ヘッダー コンテナーに適用されます。| +| `complete-start` | 現在のステップの完了状態を示します。ヘッダー コンテナーに適用されます。| +| `complete-end` | 前のステップの完了状態を示します。ヘッダー コンテナーに適用されます。| +| `optional` | オプションの状態を示します。ヘッダー コンテナーに適用されます。| +| `invalid` | オプションの状態を示します。ヘッダー コンテナーに適用されます。| +| `top` | タイトルがインジケーターの上にあることを示します。ヘッダー コンテナーに適用されます。| +| `bottom` | タイトルがインジケーターの下にあることを示します。ヘッダー コンテナーに適用されます。| +| `start` | タイトルがインジケーターの前にあることを示します。ヘッダー コンテナーに適用されます。| +| `end` | タイトルがインジケーターの後にあることを示します。ヘッダー コンテナーに適用されます。| +| `header` | ステップのインジケーターとテキストのラッパー。| +| `indicator` | Tステップのインジケーター。| +| `text` | ステップのタイトルとサブタイトルのラッパー。| +| `empty` | ステップにタイトルとサブタイトルが提供されていないことを示します。テキストに適用されます。| +| `title` | ステップのタイトル。| +| `subtitle` | ステップのサブタイトル。| +| `body` | ステップのコンテンツのラッパー。| +| `content` | ステップのコンテンツ。| これらの CSS パーツを使用して、次のように `Stepper` コンポーネントの外観をカスタマイズできます: diff --git a/doc/jp/components/menus/navigation-drawer.md b/doc/jp/components/menus/navigation-drawer.md index 407005d1f..fe55f3d6d 100644 --- a/doc/jp/components/menus/navigation-drawer.md +++ b/doc/jp/components/menus/navigation-drawer.md @@ -428,6 +428,10 @@ public onMenuIconClick() { + + + Toggle + ``` 以下は結果です: diff --git a/doc/jp/components/nextjs-usage.md b/doc/jp/components/nextjs-usage.md new file mode 100644 index 000000000..424e024a8 --- /dev/null +++ b/doc/jp/components/nextjs-usage.md @@ -0,0 +1,267 @@ +--- +title: Next.js アプリケーションで {ProductName} コンポーネントを使用する | インフラジスティックス +_description: インフラジスティックスの {Platform} コンポーネントを使用してアプリを作成し、Next.js の世界最速の {Platform} データ グリッドとチャートでデータの視覚化を向上させます。 +_keywords: {ProductName} Next.js, {ProductName} Components in Next.js, Infragistics, {ProductName} Next.js のコンポーネント, インフラジスティックス +mentionedTypes: [] +_language: ja +--- + +# {ProductName} と Next.js の統合 + +{ProductName} を Next.js プロジェクトにシームレスに統合する方法について説明します。このトピックは、開発者が堅牢でパフォーマンスの高いフル スタック アプリケーションを構築するために Next.js の機能を活用しながら、Infragistics {Platform} コンポーネントを最大限に活用できるように作成されています。 + +## 前提条件 + +1. NodeJS をインストールします。 +2. Visual Studio Code をインストールします。 + + + +## 新しい Next.js プロジェクトの作成 + +前提条件のインストール後、新しい Next.js アプリケーションを作成できます。 + +1 - **VS Code** を開き、**[ターミナル]** メニューを選択してから、**[新しいターミナル]** オプションを選択します。 + +2 - ターミナル ウィンドウに以下のコマンドを入力します。 + +```cmd +npx create-next-app@latest MyAppName +cd MyAppName +``` + +## 既存の Next.js アプリの更新 + +既存の Next.js プロジェクト(既に以前に作成したもの) で {ProductName} を使用する場合は、以下のコマンドを実行するだけです。 + +```cmd +npm install --save {PackageCommon} +npm install --save {PackageCharts} {PackageCore} +npm install --save {PackageExcel} {PackageCore} +npm install --save {PackageGauges} {PackageCore} +npm install --save {PackageGrids} {PackageCore} +npm install --save {PackageMaps} {PackageCore} +npm install --save {PackageSpreadsheet} {PackageCore} +``` + +または + +```cmd +yarn add {PackageCharts} {PackageCore} +yarn add {PackageExcel} {PackageCore} +yarn add {PackageGauges} {PackageCore} +yarn add {PackageGrids} {PackageCore} +yarn add {PackageMaps} {PackageCore} +yarn add {PackageSpreadsheet} {PackageCore} +``` + +これにより、{ProductName} のパッケージが、それらのすべての依存関係、フォントのインポート、および既存のプロジェクトへのスタイル参照と共に自動的にインストールされます。 + +## コンポーネント モジュールのインポート + +はじめに、使いたいコンポーネントの必要なモジュールをインポートします。[**GeographicMap**](geo-map.md) コンポーネントに対してこれを行います。 + +```ts +"use client" +import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps'; +import { IgrDataChartInteractivityModule } from 'igniteui-react-charts'; + +IgrGeographicMapModule.register(); +IgrDataChartInteractivityModule.register(); +``` +> [!Note] +> {ProductName} コンポーネントは、状態やブラウザー イベントなどのクライアント専用の機能を使用していることに注意してください。Infragistics のコンポーネントは、「use client」 ディレクティブがあるため、クライアント Next.js コンポーネント内では期待どおりに動作しますが、サーバー コンポーネント内では動作しません。 + +## コンポーネントの使用 + +Next.js に {ProductName} マップ コンポーネントを使用する準備が整いました。以下のように定義します。 + +```tsx +function App() { + return ( +
+ +
+ ); +} +``` + +## アプリケーションの実行 + +以下のコマンドを使用して新しいアプリケーションを実行できます。 + +```cmd +npm run dev +``` + +コマンドを実行した後、プロジェクトがローカルでビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで {ProductName} コンポーネントを使用できるようになります。 + +以下の画像は、上記を実行した結果です。 + + + +## Next.js サーバー コンポーネントでの {Platform} の使用 +上記に記述した通り、{Platform} のほとんどのコンポーネントは状態とブラウザー イベントに依存しているため、サーバー コンポーネント内での直接使用と互換性がありません。ですが、サーバーコンポーネント内で使用する必要がある場合は、Infragistics のコンポーネントをそれぞれのクライアント コンポーネント内にラップすることができます。 + +```tsx +'use client' +import { IgrGeographicMap } from 'igniteui-react-maps'; +IgrGeographicMapModule.register(); + +export default IgrGeographicMap; +``` + +そのようにすることで、Next.js サーバー コンポーネントで IgrGeographicMap を直接使用できます。 + +```tsx +import IgrGeographicMap from './wrapped-geographic-map'; + +function App() { + return ( +
+ +
+ ); +} +``` + +> [!Note] +> {ProductName} コンポーネントの大部分は、他のクライアント コンポーネント内で使用されることが予想されるため、ラップされていないままになる可能性があります。したがって、Infragistics コントロールをラップする必要はありません。 + +## {ProductName} コンポーネントの動的インポート + +アプリケーションの初期読み込みパフォーマンスの向上は、遅延読み込みによって促進されます。これにより、ルートをレンダリングするために必要な JavaScript の量が削減されます。インポートされたライブラリの読み込みを延期し、必要な場合にのみクライアント バンドルに含めることができます。`next/dynamic` を使用すると、遅延読み込みを実装できます。 + +```tsx +"use client"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import dynamic from "next/dynamic"; + +export default function DynamicButtonComponent() { + const IgButton = dynamic( + async () => { + const { IgrButton, IgrButtonModule } = await import("igniteui-react"); + IgrButtonModule.register(); + return IgrButton; + } + ); + + return ( + + Click me + + ); +} +``` + +ただし、より複雑なコンポーネント (通常は子コンポーネントを含む [**IgrGrid**](grids/data-grid.md) など) を使用する場合は、すべての子コンポーネントを動的にインポートしないことが重要です。コンポーネントは次のように使用する必要があります。 + +```tsx +"use client"; +import dynamic from "next/dynamic"; +import CustomersDataLocal from "./CustomersDataLocal.json"; +import "igniteui-react-grids/grids/combined"; +import "igniteui-react-grids/grids/themes/light/bootstrap.css"; + +export default function GridDynamicComponent() { + const IgnGrid = dynamic( + async () => { + const { + IgrGrid, + IgrGridModule, + IgrColumn, + IgrGridToolbar, + IgrGridToolbarTitle, + IgrGridToolbarActions, + IgrGridToolbarPinning, + } = await import("igniteui-react-grids"); + IgrGridModule.register(); + + const IgGrid = ({ ...props }) => { + return ( + + + + + + + + + + + + + + + + + + + ); + }; + return IgGrid; + } + ); + + return ; +} +``` + +> [!Note] +> コンポーネントの遅延読み込みを実装するとパフォーマンスが向上しますが、コンポーネントがページ上にすぐに表示されない場合にのみ使用することをお勧めします。 + +## その他のリソース + +* [Ignite UI for React](../components/general-getting-started.md) +* [Grid の概要](../components/grids/data-grid.md) +* [Next.js ドキュメント](https://nextjs.org/docs) + +コミュニティに参加して新しいアイデアをご提案ください。 + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/notifications/dialog.md b/doc/jp/components/notifications/dialog.md index de65ff3ab..7a4857d24 100644 --- a/doc/jp/components/notifications/dialog.md +++ b/doc/jp/components/notifications/dialog.md @@ -35,6 +35,25 @@ import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents'; defineComponents(IgcDialogComponent); ``` + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、{Platform} `Dialog` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrDialogModule, IgrDialog } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrDialogModule.register(); +``` + + + {ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 @@ -85,6 +104,27 @@ Dialog コンポーネントを表示する最も簡単な方法は、`Show` メ ``` +```tsx + + Show Dialog + + + + Dialog Message + + +public onDialogRef(dialog: IgrDialog) { + if (!dialog) { return; } + this.dialogRef = dialog; +} + +public onDialogShow() { + if (this.dialogRef) { + this.dialogRef.show(); + } +} +``` + Dialog コンポーネントは `Open` プロパティを提供します。これにより、アプリケーション シナリオに従ってその状態を構成できます。 Dialog のタイトルを設定するには、`Title` プロパティを使用します。ただし、`title` スロットにコンテンツが指定されている場合は、プロパティよりも優先されます。 @@ -97,11 +137,11 @@ Dialog のタイトルを設定するには、`Title` プロパティを使用 `CloseOnOutsideClick` プロパティを使用して、ダイアログの外側をクリックしたときにダイアログを閉じるかどうかを構成します。デフォルト値は **false** です。 - + `sample="/notifications/dialog/closing-variations", height="400", alt="{Platform} Dialog Closing のバリエーション"` - + ### (フォーム) diff --git a/doc/jp/components/radial-gauge.md b/doc/jp/components/radial-gauge.md index 02c79e7ac..ffc31bb3e 100644 --- a/doc/jp/components/radial-gauge.md +++ b/doc/jp/components/radial-gauge.md @@ -262,7 +262,7 @@ IgrRadialGaugeModule.register(); ``` -`sample="/gauges/radial-gauge/backing", height="320", alt="{Platform} radial gauge backing"` +`sample="/gauges/radial-gauge/backing", height="320", alt="{Platform} ラジアル ゲージのバッキング"` ## スケール @@ -333,7 +333,7 @@ IgrRadialGaugeModule.register(); ``` -`sample="/gauges/radial-gauge/scale", height="320", alt="{Platform} radial gauge scale"` +`sample="/gauges/radial-gauge/scale", height="320", alt="{Platform} ラジアル ゲージのスケール"` ## ラベル @@ -389,8 +389,13 @@ IgrRadialGaugeModule.register(); ``` -`sample="/gauges/radial-gauge/labels", height="320", alt="{Platform} radial gauge labels"` +`sample="/gauges/radial-gauge/labels", height="320", alt="{Platform} ラジアル ゲージのラベル"` +## オプティカル スケーリング + +ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず `OpticalScalingEnabled` を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する `OpticalScalingSize` を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。 + +`sample="/gauges/radial-gauge/optical-scaling", height="500", alt="{Platform} ラジアル ゲージのオプティカル スケーリング"` ## 目盛 目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは `MinimumValue` と `MaximumValue` の間の `Interval` に表示されます。また `MinorTickCount` プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、`TickStartExtent`、`TickEndExtent`、`MinorTickStartExtent`、`MinorTickEndExtent` に少数値 (0 から 1 の間) を設定して制御できます。 @@ -464,7 +469,7 @@ IgrRadialGaugeModule.register(); ``` -`sample="/gauges/radial-gauge/tickmarks", height="320", alt="{Platform} radial gauge tickmarks"` +`sample="/gauges/radial-gauge/tickmarks", height="320", alt="{Platform} ラジアル ゲージの目盛"` ## 範囲 @@ -550,7 +555,7 @@ IgrRadialGaugeModule.register(); ``` -`sample="/gauges/radial-gauge/ranges", height="320", alt="{Platform} radial gauge ranges"` +`sample="/gauges/radial-gauge/ranges", height="320", alt="{Platform} ラジアル ゲージの範囲"` ## 針 @@ -643,7 +648,7 @@ IgrRadialGaugeModule.register(); ``` -`sample="/gauges/radial-gauge/needle", height="320", alt="{Platform} radial gauge needle"` +`sample="/gauges/radial-gauge/needle", height="320", alt="{Platform} ラジアル ゲージの針"` ## まとめ diff --git a/doc/jp/images/hgrid-database.jpg b/doc/jp/images/hgrid-database.jpg new file mode 100644 index 000000000..bf1a3bb3d Binary files /dev/null and b/doc/jp/images/hgrid-database.jpg differ diff --git a/doc/jp/images/stepper/stepper-contentTop.png b/doc/jp/images/stepper/stepper-contentTop.png index 06644fc04..a17b6e510 100644 Binary files a/doc/jp/images/stepper/stepper-contentTop.png and b/doc/jp/images/stepper/stepper-contentTop.png differ diff --git a/doc/jp/images/unfold_less_icon_screenshot.jpg b/doc/jp/images/unfold_less_icon_screenshot.jpg new file mode 100644 index 000000000..e3aaf7518 Binary files /dev/null and b/doc/jp/images/unfold_less_icon_screenshot.jpg differ diff --git a/doc/kr/components/charts/features/chart-highlighting.md b/doc/kr/components/charts/features/chart-highlighting.md index 607d8b246..aecec6b50 100644 --- a/doc/kr/components/charts/features/chart-highlighting.md +++ b/doc/kr/components/charts/features/chart-highlighting.md @@ -12,11 +12,9 @@ All {Platform} Charts support highlighting of visuals such as lines, columns, an ## {Platform} Chart Highlighting Example -The following example demonstrates the different highlighting options that are available on the {Platform} chart. Click on the checkboxes to enable the different highlight types. - -`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} Highlighting Example"` - +The following example demonstrates the different highlighting options that are available on the {Platform} chart. +`sample="/charts/category-chart/annotations-highlighting", height="500", alt="{Platform} Highlighting Example"`
@@ -24,10 +22,22 @@ The following example demonstrates the different highlighting options that are a All {Platform} Charts support a variety of highlighting options. `HighlightingMode` can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. `HighlightingBehavior` can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the `CategoryChart`, `FinancialChart`, and `XamDataChart` controls and they have the same API for using the highlighting feature. +The following example demonstrates the `HighlightingMode` {Platform} chart. + +`sample="/charts/category-chart/highlighting-mode", height="500", alt="{Platform} Highlighting Mode Example"` + +The following example demonstrates the `HighlightingBehavior` {Platform} chart. + +`sample="/charts/category-chart/highlighting-behavior", height="500", alt="{Platform} Highlighting Mode Example"` + # {Platform} Chart Legend Highlighting All {Platform} Charts support legend highlighting. `LegendHighlightingMode` can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the `CategoryChart`, `FinancialChart`, and `XamDataChart` controls and they have the same API for using the highlighting feature. +The following example demonstrates the legend series highlighting {Platform} chart. + +`sample="/charts/category-chart/legend-highlighting", height="500", alt="{Platform} Highlighting Mode Example"` + ## Highlight Layers The {ProductName} `CategoryChart` can enable three types of highlighting when hovering over data items. @@ -38,6 +48,10 @@ The {ProductName} `CategoryChart` can enable three types of highlighting when ho 3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the `IsCategoryHighlightingEnabled` property to true. +The following example demonstrates the different highlighting layers that are available on the {Platform} chart. + +`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} Highlighting Example"` + ## Additional Resources You can find more information about related chart features in these topics: diff --git a/doc/kr/components/charts/features/chart-trendlines.md b/doc/kr/components/charts/features/chart-trendlines.md index 504744596..5f9e56b39 100644 --- a/doc/kr/components/charts/features/chart-trendlines.md +++ b/doc/kr/components/charts/features/chart-trendlines.md @@ -3,7 +3,7 @@ title: {Platform} Chart Trendlines | Data Visualization | Infragistics _description: Infragistics' {Platform} Chart Trendlines _keywords: {Platform} Charts, Trendlines, Infragistics _language: kr -mentionedTypes: ["FinancialChart", "CategoryChart", "XamDataChart", "TrendLineType"] +mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "XamDataChart", "TrendLineType"] --- # {Platform} Chart Trendlines diff --git a/doc/kr/components/general-changelog-dv.md b/doc/kr/components/general-changelog-dv.md index 36c4c9ca2..90084cb64 100644 --- a/doc/kr/components/general-changelog-dv.md +++ b/doc/kr/components/general-changelog-dv.md @@ -143,7 +143,7 @@ This release introduces a few improvements and simplifications to visual design ### Charts & Maps -This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `DataChart`, `CategoryChart`, and `FinancialChart`. +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `XamDataChart`, `CategoryChart`, and `FinancialChart`. * Changed Bar/Column/Waterfall series to have square corners instead of rounded corners * Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 diff --git a/doc/kr/components/general-getting-started.md b/doc/kr/components/general-getting-started.md index f086c09f9..bda67cfdd 100644 --- a/doc/kr/components/general-getting-started.md +++ b/doc/kr/components/general-getting-started.md @@ -39,17 +39,17 @@ Now that we have everything we need, we can start creating/updating our applicat In **VS Code**, select **Terminal** menu, **New Terminal** option, and type this command in terminal window: -- **npx create-react-app my-app-name --typescript** +- **npx create-react-app MyAppName --typescript** Or -- **yarn create react-app my-app-name --typescript** +- **yarn create react-app MyAppName --typescript** Refer to this website for more information on above commands. -Next, you need to open the **my-app-name** folder in **VS Code** app and install the following packages for {ProductName} using these commands: +Next, you need to open the **MyAppName** folder in **VS Code** app and install the following packages for {ProductName} using these commands: - **npm install --save {PackageCharts} {PackageCore}** - **npm install --save {PackageExcel} {PackageCore}** diff --git a/doc/kr/components/geo-map-display-heat-imagery.md b/doc/kr/components/geo-map-display-heat-imagery.md index 5c9fc0427..88aae5e2b 100644 --- a/doc/kr/components/geo-map-display-heat-imagery.md +++ b/doc/kr/components/geo-map-display-heat-imagery.md @@ -8,7 +8,7 @@ mentionedTypes: ['XamGeographicMap', 'ShapefileConverter'] # {Platform} Displaying Heat Imagery -The {ProductName} map control has the ability to show heat-map imagery through the use of the `ShapeFileRecords` that are generated by a `ShapeDataSource` by loading geo-spatial data by loading shape files to a tile series. +The {ProductName} map control has the ability to show heat-map imagery through the use of the `ShapeFileRecord` that are generated by a `ShapeDataSource` by loading geo-spatial data by loading shape files to a tile series. It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic. @@ -27,7 +27,7 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati -When a `ShapeDataSource` loads its shape files, it converts that data into `ShapeFileRecord` objects. These objects can be retrieved from the `GetPointData()` method of the `ShapeDataSource` and can then be used to create a heat-map through usage of a `TileGeneratorMapImagery` object with a `HeatTileGenerator` assigned to its `TileGenerator` property. This `TileGeneratorMapImagery` can then be used in a geographic tile series as its `TileImagery` source. +When a `ShapeDataSource` loads its shape files, it converts that data into `ShapefileRecord` objects. These objects can be retrieved from the `GetPointData()` method of the `ShapeDataSource` and can then be used to create a heat-map through usage of a `TileGeneratorMapImagery` object with a `HeatTileGenerator` assigned to its `TileGenerator` property. This `TileGeneratorMapImagery` can then be used in a geographic tile series as its `TileImagery` source. The `HeatTileGenerator` object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. diff --git a/docConfig.json b/docConfig.json index caabe970f..98658a710 100644 --- a/docConfig.json +++ b/docConfig.json @@ -44,7 +44,8 @@ { "name": "{PackageVerChanges-23-2}", "value": "17.0.0 (November 2023)"}, { "name": "{PackageVerChanges-23-2-DEC}", "value": "17.1.0 (December 2023)" }, { "name": "{PackageVerChanges-23-2-JAN}", "value": "17.2.0 (January 2024)" }, - { "name": "{PackageVerLatest}", "value": "17.2.0"}, + { "name": "{PackageVerChanges-23-2-MAR}", "value": "17.3.0 (March 2024)" }, + { "name": "{PackageVerLatest}", "value": "17.3.0"}, { "name": "{PackageAngularComponents}", "value": "igniteui-angular"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/browser"}, @@ -91,7 +92,8 @@ { "name": "{HierarchicalGridSelector}", "value": "igx-hierarchical-grid"}, { "name": "{HierarchicalGridPackage}", "value": "igniteui-angular-grids"}, { "name": "{HierarchicalGridSample}", "value": "grids/hierarchical-grid"}, - { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""} + { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, + { "name": "{RowIslandSelector}", "value": "igx-row-island"} ], "samplesBrowsers" : { @@ -152,7 +154,8 @@ { "name": "{PackageVerChanges-23-2}", "value": "18.3.0 (October 2023)"}, { "name": "{PackageVerChanges-23-2-DEC}", "value": "18.4.0 (December 2023)"}, { "name": "{PackageVerChanges-23-2-JAN}", "value": "18.5.0 (January 2024)" }, - { "name": "{PackageVerLatest}", "value": "18.5.0"}, + { "name": "{PackageVerChanges-23-2-MAR}", "value": "18.6.0 (March 2024)" }, + { "name": "{PackageVerLatest}", "value": "18.6.0"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/browser"}, { "name": "{GithubLink}", "value": "https://github.com/IgniteUI/igniteui-react"}, @@ -199,6 +202,7 @@ { "name": "{HierarchicalGridPackage}", "value": "igniteui-react-grids"}, { "name": "{HierarchicalGridSample}", "value": "grids/hierarchical-grid"}, { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, + { "name": "{RowIslandSelector}", "value": "IgrRowIsland"}, { "name": "{CanonicalLinkToGridMain}", "value": " ", "note": "do not remove spaces"}, { "name": "{CanonicalLinkToGridCellEditing}", "value": " ", "note": "do not remove spaces"}, @@ -270,9 +274,11 @@ { "name": "{PackageVerChanges-22-2.1}", "value": "4.0.4 (December 2022)"}, { "name": "{PackageVerChanges-22-2.2}", "value": "4.2.5 (April 2023)"}, { "name": "{PackageVerChanges-23-1}", "value": "4.3.0 (June 2023)"}, + { "name": "{PackageVerChanges-23-2}", "value": "4.3.2 (October 2023)"}, { "name": "{PackageVerChanges-23-2-DEC}", "value": "4.6.0 (December 2023)"}, { "name": "{PackageVerChanges-23-2-JAN}", "value": "4.7.0 (January 2024)"}, - { "name": "{PackageVerLatest}", "value": "4.7.0"}, + { "name": "{PackageVerChanges-23-2-MAR}", "value": "4.8.0 (March 2024)" }, + { "name": "{PackageVerLatest}", "value": "4.8.0"}, { "name": "{PackageWebComponents}", "value": "igniteui-webcomponents"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/browser"}, @@ -320,6 +326,7 @@ { "name": "{HierarchicalGridPackage}", "value": "igniteui-webcomponents-grids"}, { "name": "{HierarchicalGridSample}", "value": "grids/hierarchical-grid"}, { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, + { "name": "{RowIslandSelector}", "value": "igc-row-island"}, { "name": "{CanonicalLinkToGridMain}", "value": "grids/data-grid", "note": "data-grid is really gird overview topic"}, { "name": "{CanonicalLinkToGridCellEditing}", "value": "grids/grid/cell-editing"}, @@ -461,7 +468,10 @@ { "name": "{PackageVerChanges-23-1}", "value": "23.1.37 (June 2023)"}, { "name": "{PackageVerChanges-23-2}", "value": "23.2.97 (December 2023)"}, { "name": "{PackageVerChanges-23-2-JAN}","value": "23.2.110 (January 2024)"}, - { "name": "{PackageVerLatest}", "value": "23.2.110"}, + { "name": "{PackageVerChanges-23-2-MAR}", "value": "23.2.189 (March 2024)" }, + { "name": "{PackageVerChanges-23-2-APR}", "value": "23.2.191 (April 2024)" }, + { "name": "{PackageVerChanges-23-2-APR2}", "value": "23.2.204" }, + { "name": "{PackageVerLatest}", "value": "23.2.204"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/browser"}, @@ -509,6 +519,7 @@ { "name": "{HierarchicalGridPackage}", "value": "igniteui-blazor-grids"}, { "name": "{HierarchicalGridSample}", "value": "grids/hierarchical-grid"}, { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, + { "name": "{RowIslandSelector}", "value": "IgbRowIsland"}, { "name": "{CanonicalLinkToGridMain}", "value": "grids/data-grid", "note": "data-grid is really gird overview topic"}, { "name": "{CanonicalLinkToGridCellEditing}", "value": "grids/grid/cell-editing"}, diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 40c480b8e..ba916bf1a 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -21,7 +21,7 @@ ] }, { - "exclude": ["Blazor"], + "exclude": ["Blazor", "Angular"], "name": "Getting Started", "href": "general-getting-started.md", "status": "" @@ -58,7 +58,7 @@ "status": "" }, { - "exclude": ["Blazor"], + "exclude": ["Blazor", "Angular"], "name": "Licensing", "href": "general-licensing.md", "status": "" @@ -112,6 +112,12 @@ "href": "general-changelog-dv.md", "status": "UPDATED" }, + { + "exclude": ["Angular", "Blazor", "WebComponents"], + "name": "Integrating Ignite UI for React with Next.js", + "href": "nextjs-usage.md", + "status": "NEW" + }, { "note": "THIS MAIN NODE FOR OLD XPLAT GRID", "exclude": ["Angular", "Blazor", "WebComponents", "React"], @@ -130,7 +136,7 @@ "exclude": ["Angular"], "name": "Grid", "href": "grids/data-grid.md", - "status": "NEW", + "status": "UPDATED", "items": [ { "exclude": ["Angular"], @@ -272,6 +278,12 @@ "name": "Paging", "href": "grids/grid/paging.md" }, + { + "exclude": [ "Angular" ], + "name": "Paste from Excel", + "href": "grids/grid/paste-excel.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "Remote Data Operations", @@ -333,7 +345,7 @@ "exclude": ["Angular"], "name": "State Persistence", "href": "grids/grid/state-persistence.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular"], @@ -353,202 +365,226 @@ ] }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "Hierarchical Grid", "href": "grids/hierarchical-grid/overview.md", - "status": "", + "status": "NEW", "items": [ { - "exclude": ["Angular", "React", "WebComponents"], - "name": "Advanced Filtering", - "href": "grids/hierarchical-grid/advanced-filtering.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "Cell Editing", - "href": "grids/hierarchical-grid/cell-editing.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "Cell Selection", - "href": "grids/hierarchical-grid/cell-selection.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Collapsible Column Groups", "href": "grids/hierarchical-grid/collapsible-column-groups.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Column Hiding", "href": "grids/hierarchical-grid/column-hiding.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Column Moving", "href": "grids/hierarchical-grid/column-moving.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Column Pinning", "href": "grids/hierarchical-grid/column-pinning.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Column Resizing", "href": "grids/hierarchical-grid/column-resizing.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "Column Selection", - "href": "grids/hierarchical-grid/column-selection.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Column Types", "href": "grids/hierarchical-grid/column-types.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Conditional Styling", "href": "grids/hierarchical-grid/conditional-cell-styling.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Display Density", "href": "grids/hierarchical-grid/display-density.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Editing", "href": "grids/hierarchical-grid/editing.md", - "status": "" + "status": "NEW", + "items": [ + { + "exclude": ["Angular"], + "name": "Cell Editing", + "href": "grids/hierarchical-grid/cell-editing.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Row Adding", + "href": "grids/hierarchical-grid/row-adding.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Row Editing", + "href": "grids/hierarchical-grid/row-editing.md", + "status": "NEW" + } + ] }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], - "name": "Excel Style Filtering", - "href": "grids/hierarchical-grid/excel-style-filtering.md", - "status": "" + "exclude": ["Angular"], + "name": "Export to Excel", + "href": "grids/hierarchical-grid/export-excel.md", + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Filtering", "href": "grids/hierarchical-grid/filtering.md", - "status": "" + "status": "NEW", + "items": [ + { + "exclude": ["Angular"], + "name": "Advanced Filtering", + "href": "grids/hierarchical-grid/advanced-filtering.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Excel Style Filtering", + "href": "grids/hierarchical-grid/excel-style-filtering.md", + "status": "NEW" + } + ] }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Multi-Column Headers", "href": "grids/hierarchical-grid/multi-column-headers.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Multi-Row Layout", "href": "grids/hierarchical-grid/multi-row-layout.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Paging", "href": "grids/hierarchical-grid/paging.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Remote Data Operations", "href": "grids/hierarchical-grid/remote-data-operations.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Row Actions", "href": "grids/hierarchical-grid/row-actions.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "Row Adding", - "href": "grids/hierarchical-grid/row-adding.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Row Dragging", "href": "grids/hierarchical-grid/row-drag.md", - "status": "" - }, - { - "exclude": ["Angular", "WebComponents"], - "name": "Row Editing", - "href": "grids/hierarchical-grid/row-editing.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Row Pinning", "href": "grids/hierarchical-grid/row-pinning.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "Row Selection", - "href": "grids/hierarchical-grid/row-selection.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Selection", "href": "grids/hierarchical-grid/selection.md", - "status": "" + "status": "NEW", + "items": [ + { + "exclude": ["Angular"], + "name": "Cell Selection", + "href": "grids/hierarchical-grid/cell-selection.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Column Selection", + "href": "grids/hierarchical-grid/column-selection.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Row Selection", + "href": "grids/hierarchical-grid/row-selection.md", + "status": "NEW" + } + ] }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Sizing", "href": "grids/hierarchical-grid/sizing.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Sorting", "href": "grids/hierarchical-grid/sorting.md", - "status": "" + "status": "NEW" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "State Persistence", "href": "grids/hierarchical-grid/state-persistence.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Summaries", "href": "grids/hierarchical-grid/summaries.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], + "name": "Toolbar", + "href": "grids/hierarchical-grid/toolbar.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], "name": "Virtualization and performance", "href": "grids/hierarchical-grid/virtualization.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Keyboard navigation", "href": "grids/hierarchical-grid/keyboard-navigation.md", - "status": "" + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Load on Demand", + "href": "grids/hierarchical-grid/load-on-demand.md", + "status": "NEW" } ] }, @@ -594,7 +630,7 @@ "exclude": ["Angular", "React"], "name": "Advanced Filtering", "href": "grids/tree-grid/advanced-filtering.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], @@ -615,13 +651,13 @@ "exclude": ["Angular", "React"], "name": "Column Types", "href": "grids/tree-grid/column-types.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Conditional Styling", "href": "grids/tree-grid/conditional-cell-styling.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], @@ -632,13 +668,13 @@ "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Column Hiding", "href": "grids/tree-grid/column-hiding.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Column Moving", "href": "grids/tree-grid/column-moving.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], @@ -659,151 +695,151 @@ "exclude": ["Angular", "React"], "name": "Display Density", "href": "grids/tree-grid/display-density.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Editing", "href": "grids/tree-grid/editing.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Export to Excel", "href": "grids/tree-grid/export-excel.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Excel Style Filtering", "href": "grids/tree-grid/excel-style-filtering.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Filtering", "href": "grids/tree-grid/filtering.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Keyboard navigation", "href": "grids/tree-grid/keyboard-navigation.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Multi-Column Headers", "href": "grids/tree-grid/multi-column-headers.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Multi-Row Layout", "href": "grids/tree-grid/multi-row-layout.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Paging", "href": "grids/tree-grid/paging.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Remote Data Operations", "href": "grids/tree-grid/remote-data-operations.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Row Actions", "href": "grids/tree-grid/row-actions.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Row Adding", "href": "grids/tree-grid/row-adding.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Row Dragging", "href": "grids/tree-grid/row-drag.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Row Editing", "href": "grids/tree-grid/row-editing.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Row Pinning", "href": "grids/tree-grid/row-pinning.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Row Selection", "href": "grids/tree-grid/row-selection.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Search", "href": "grids/tree-grid/search.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Selection", "href": "grids/tree-grid/selection.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Sizing", "href": "grids/tree-grid/sizing.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Sorting", "href": "grids/tree-grid/sorting.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "State Persistence", "href": "grids/tree-grid/state-persistence.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Summaries", "href": "grids/tree-grid/summaries.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Virtualization and performance", "href": "grids/tree-grid/virtualization.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "Blazor"], "name": "Load On Demand", "href": "grids/tree-grid/load-on-demand.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Live Data / Real-Time", "href": "grids/tree-grid/live-data.md", - "status": "NEW" + "status": "" } ] }, @@ -815,7 +851,8 @@ { "exclude": ["Angular"], "name": "Tree", - "href": "grids/tree.md" + "href": "grids/tree.md", + "status": "UPDATED" }, { "exclude": ["Angular", "Blazor", "WebComponents", "React"], @@ -1213,16 +1250,18 @@ }, { "name": "Chart Data Legend", - "href": "charts/features/chart-data-legend.md" + "href": "charts/features/chart-data-legend.md", + "status": "UPDATED" }, { "name": "Chart Data Tooltip", - "href": "charts/features/chart-data-tooltip.md" + "href": "charts/features/chart-data-tooltip.md", + "status": "UPDATED" }, { "name": "Chart Highlight Filter", "href": "charts/features/chart-highlight-filter.md", - "status": "NEW" + "status": "UPDATED" }, { "name": "Chart Highlighting", @@ -1241,7 +1280,7 @@ { "name": "Chart Overlays", "href": "charts/features/chart-overlays.md", - "status": "UPDATED" + "status": "" }, { "name": "Chart Performance", @@ -1262,7 +1301,7 @@ { "name": "Chart Trendlines", "href": "charts/features/chart-trendlines.md", - "status": "UPDATED" + "status": "" } ] }, @@ -1425,7 +1464,7 @@ "header": true }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Accordion", "href": "layouts/accordion.md", "status": "" @@ -1478,7 +1517,7 @@ "status": "" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Stepper", "href": "layouts/stepper.md", "status": "" @@ -1572,7 +1611,7 @@ { "name": "Radial Gauge", "href": "radial-gauge.md", - "status": "" + "status": "UPDATED" }, { "exclude": ["Angular"], @@ -1731,7 +1770,7 @@ "href": "notifications/toast.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Dialog", "href": "notifications/dialog.md" }, diff --git a/docfx/jp/components/toc.json b/docfx/jp/components/toc.json index 59081be0f..481ea4b37 100644 --- a/docfx/jp/components/toc.json +++ b/docfx/jp/components/toc.json @@ -21,7 +21,7 @@ ] }, { - "exclude": ["Blazor"], + "exclude": ["Blazor", "Angular"], "name": "作業の開始", "href": "general-getting-started.md", "status": "" @@ -58,7 +58,7 @@ "status": "" }, { - "exclude": ["Blazor"], + "exclude": ["Blazor", "Angular"], "name": "ライセンス", "href": "general-licensing.md", "status": "" @@ -112,6 +112,12 @@ "href": "general-changelog-dv.md", "status": "UPDATED" }, + { + "exclude": ["Angular", "Blazor", "WebComponents"], + "name": "Ignite UI for React と Next.js の統合", + "href": "nextjs-usage.md", + "status": "NEW" + }, { "exclude": ["Angular", "Blazor", "WebComponents", "React"], "name": "グリッド & リスト", @@ -128,7 +134,7 @@ "exclude": ["Angular"], "name": "グリッド", "href": "grids/data-grid.md", - "status": "NEW", + "status": "UPDATED", "items": [ { "exclude": ["Angular"], @@ -270,6 +276,12 @@ "name": "ページング", "href": "grids/grid/paging.md" }, + { + "exclude": [ "Angular" ], + "name": "Excel から貼り付け", + "href": "grids/grid/paste-excel.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "リモート データ操作", @@ -331,7 +343,7 @@ "exclude": ["Angular"], "name": "状態の保持", "href": "grids/grid/state-persistence.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular"], @@ -351,202 +363,226 @@ ] }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "階層グリッド", "href": "grids/hierarchical-grid/overview.md", - "status": "", + "status": "NEW", "items": [ { - "exclude": ["Angular", "React", "WebComponents"], - "name": "高度なフィルタリング", - "href": "grids/hierarchical-grid/advanced-filtering.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "セルの編集", - "href": "grids/hierarchical-grid/cell-editing.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "セルの選択", - "href": "grids/hierarchical-grid/cell-selection.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "縮小可能な列グループ", "href": "grids/hierarchical-grid/collapsible-column-groups.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "列の非表示", "href": "grids/hierarchical-grid/column-hiding.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "列の移動", "href": "grids/hierarchical-grid/column-moving.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "列のピン固定", "href": "grids/hierarchical-grid/column-pinning.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "列のサイズ変更", "href": "grids/hierarchical-grid/column-resizing.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "列の選択", - "href": "grids/hierarchical-grid/column-selection.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "列のタイプ", "href": "grids/hierarchical-grid/column-types.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "条件付きスタイル設定", "href": "grids/hierarchical-grid/conditional-cell-styling.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "表示密度", "href": "grids/hierarchical-grid/display-density.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "編集", "href": "grids/hierarchical-grid/editing.md", - "status": "" + "status": "NEW", + "items": [ + { + "exclude": ["Angular"], + "name": "セルの編集", + "href": "grids/hierarchical-grid/cell-editing.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "行の追加", + "href": "grids/hierarchical-grid/row-adding.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "行の編集", + "href": "grids/hierarchical-grid/row-editing.md", + "status": "NEW" + } + ] }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], - "name": "Excel スタイル フィルタリング", - "href": "grids/hierarchical-grid/excel-style-filtering.md", - "status": "" + "exclude": ["Angular"], + "name": "Excel へエクスポート", + "href": "grids/hierarchical-grid/export-excel.md", + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "フィルタリング", "href": "grids/hierarchical-grid/filtering.md", - "status": "" + "status": "NEW", + "items": [ + { + "exclude": ["Angular"], + "name": "高度なフィルタリング", + "href": "grids/hierarchical-grid/advanced-filtering.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "Excel スタイル フィルタリング", + "href": "grids/hierarchical-grid/excel-style-filtering.md", + "status": "NEW" + } + ] }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "複数列ヘッダー", "href": "grids/hierarchical-grid/multi-column-headers.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "複数行レイアウト", "href": "grids/hierarchical-grid/multi-row-layout.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "ページング", "href": "grids/hierarchical-grid/paging.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "リモート データ操作", "href": "grids/hierarchical-grid/remote-data-operations.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "行の操作", "href": "grids/hierarchical-grid/row-actions.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "行の追加", - "href": "grids/hierarchical-grid/row-adding.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "行のドラッグ", "href": "grids/hierarchical-grid/row-drag.md", - "status": "" - }, - { - "exclude": ["Angular", "WebComponents"], - "name": "行の編集", - "href": "grids/hierarchical-grid/row-editing.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "行のピン固定", "href": "grids/hierarchical-grid/row-pinning.md", - "status": "" - }, - { - "exclude": ["Angular", "React", "WebComponents"], - "name": "行の選択", - "href": "grids/hierarchical-grid/row-selection.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "選択", "href": "grids/hierarchical-grid/selection.md", - "status": "" + "status": "NEW", + "items": [ + { + "exclude": ["Angular"], + "name": "セルの選択", + "href": "grids/hierarchical-grid/cell-selection.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "列の選択", + "href": "grids/hierarchical-grid/column-selection.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "行の選択", + "href": "grids/hierarchical-grid/row-selection.md", + "status": "NEW" + } + ] }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "サイズ設定", "href": "grids/hierarchical-grid/sizing.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "ソート", "href": "grids/hierarchical-grid/sorting.md", - "status": "" + "status": "NEW" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "状態の保持", "href": "grids/hierarchical-grid/state-persistence.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], "name": "集計", "href": "grids/hierarchical-grid/summaries.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular"], + "name": "ツールバー", + "href": "grids/hierarchical-grid/toolbar.md", + "status": "NEW" + }, + { + "exclude": ["Angular"], "name": "仮想化とパフォーマンス", "href": "grids/hierarchical-grid/virtualization.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "キーボード ナビゲーション", "href": "grids/hierarchical-grid/keyboard-navigation.md", - "status": "" + "status": "NEW" + }, + { + "exclude": ["Angular"], + "name": "ロードオンデマンド", + "href": "grids/hierarchical-grid/load-on-demand.md", + "status": "NEW" } ] }, @@ -592,7 +628,7 @@ "exclude": ["Angular", "React"], "name": "高度なフィルタリング", "href": "grids/tree-grid/advanced-filtering.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], @@ -613,13 +649,13 @@ "exclude": ["Angular", "React"], "name": "列のタイプ", "href": "grids/tree-grid/column-types.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "条件付きスタイル設定", "href": "grids/tree-grid/conditional-cell-styling.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], @@ -630,13 +666,13 @@ "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "列の非表示", "href": "grids/tree-grid/column-hiding.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "列の移動", "href": "grids/tree-grid/column-moving.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], @@ -657,151 +693,151 @@ "exclude": ["Angular", "React"], "name": "表示密度", "href": "grids/tree-grid/display-density.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "編集", "href": "grids/tree-grid/editing.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Excel へエクスポート", "href": "grids/tree-grid/export-excel.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "Excel スタイル フィルタリング", "href": "grids/tree-grid/excel-style-filtering.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "フィルタリング", "href": "grids/tree-grid/filtering.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "キーボード ナビゲーション", "href": "grids/tree-grid/keyboard-navigation.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "複数列ヘッダー", "href": "grids/tree-grid/multi-column-headers.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "複数行レイアウト", "href": "grids/tree-grid/multi-row-layout.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "ページング", "href": "grids/tree-grid/paging.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "リモート データ操作", "href": "grids/tree-grid/remote-data-operations.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "行の操作", "href": "grids/tree-grid/row-actions.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "行の追加", "href": "grids/tree-grid/row-adding.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "行のドラッグ", "href": "grids/tree-grid/row-drag.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "行の編集", "href": "grids/tree-grid/row-editing.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "行のピン固定", "href": "grids/tree-grid/row-pinning.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "行の選択", "href": "grids/tree-grid/row-selection.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "検索", "href": "grids/tree-grid/search.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "選択", "href": "grids/tree-grid/selection.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "サイズ設定", "href": "grids/tree-grid/sizing.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "ソート", "href": "grids/tree-grid/sorting.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "状態の保持", "href": "grids/tree-grid/state-persistence.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "集計", "href": "grids/tree-grid/summaries.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], "name": "仮想化とパフォーマンス", "href": "grids/tree-grid/virtualization.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React", "Blazor"], "name": "ロードオンデマンド", "href": "grids/tree-grid/load-on-demand.md", - "status": "NEW" + "status": "" }, { "exclude": ["Angular", "React"], "name": "Live Data / Real-Time", "href": "grids/tree-grid/live-data.md", - "status": "NEW" + "status": "" } ] }, @@ -813,7 +849,8 @@ { "exclude": ["Angular"], "name": "ツリー", - "href": "grids/tree.md" + "href": "grids/tree.md", + "status": "UPDATED" }, { "exclude": ["Angular", "Blazor", "WebComponents", "React"], @@ -1211,16 +1248,18 @@ }, { "name": "チャートのデータ凡例", - "href": "charts/features/chart-data-legend.md" + "href": "charts/features/chart-data-legend.md", + "status": "UPDATED" }, { "name": "チャートのデータ ツールチップ", - "href": "charts/features/chart-data-tooltip.md" + "href": "charts/features/chart-data-tooltip.md", + "status": "UPDATED" }, { "name": "チャートの強調表示フィルター", "href": "charts/features/chart-highlight-filter.md", - "status": "NEW" + "status": "UPDATED" }, { "name": "チャート強調表示", @@ -1239,7 +1278,7 @@ { "name": "チャート オーバーレイ", "href": "charts/features/chart-overlays.md", - "status": "UPDATED" + "status": "" }, { "name": "チャート パフォーマンス", @@ -1260,7 +1299,7 @@ { "name": "チャート トレンドライン", "href": "charts/features/chart-trendlines.md", - "status": "UPDATED" + "status": "" } ] }, @@ -1423,7 +1462,7 @@ "header": true }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "アコーディオン", "href": "layouts/accordion.md", "status": "" @@ -1476,7 +1515,7 @@ "status": "" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "ステッパー", "href": "layouts/stepper.md", "status": "" @@ -1570,7 +1609,7 @@ { "name": "ラジアル ゲージ", "href": "radial-gauge.md", - "status": "" + "status": "UPDATED" }, { "exclude": ["Angular"], @@ -1633,7 +1672,7 @@ ] }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "ドロップダウン", "href": "inputs/dropdown.md" }, @@ -1664,7 +1703,7 @@ "href": "inputs/input.md" }, { - "exclude": ["Angular", "React", "Blazor"], + "exclude": ["Angular", "Blazor"], "name": "マスク入力", "href": "inputs/mask-input.md" }, @@ -1679,12 +1718,12 @@ "href": "inputs/radio.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "選択", "href": "inputs/select.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "評価", "href": "inputs/rating.md" }, @@ -1729,7 +1768,7 @@ "href": "notifications/toast.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "ダイアログ", "href": "notifications/dialog.md" }, diff --git a/docfx/kr/components/toc.json b/docfx/kr/components/toc.json index aec9e6e93..6298875ab 100644 --- a/docfx/kr/components/toc.json +++ b/docfx/kr/components/toc.json @@ -832,7 +832,7 @@ { "name": "Radial Gauge", "href": "radial-gauge.md", - "status": "" + "status": "UPDATED" }, { "exclude": ["Blazor"], diff --git a/gulpfile.js b/gulpfile.js index 4e5331f6c..94af7b83b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1513,8 +1513,8 @@ function logSampleLinks(cb, platform, server) { var components = [ "grids/grid", "grids/tree-grid", + "grids/hierarchical-grid" // "grids/pivot-grid", - // "grids/hierarchical-grid" ]; gulp.src([ diff --git a/stats/docStats-Angular.json b/stats/docStats-Angular.json index c04c1f15e..a31d656ec 100644 --- a/stats/docStats-Angular.json +++ b/stats/docStats-Angular.json @@ -607,6 +607,7 @@ "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-heat-imagery" ], "https://staging.infragistics.com/angular-demos-dv/samples/samples/maps/geo-map/display-osm-imagery": [ + "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started", "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-osm-imagery" ], "https://staging.infragistics.com/angular-demos-dv/samples/samples/maps/geo-map/navigation": [ @@ -934,6 +935,9 @@ "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-working-with-sparklines": [ "https://staging.infragistics.com/angular-demos-dv/samples/samples/excel/excel-library/working-with-sparklines" ], + "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started": [ + "https://staging.infragistics.com/angular-demos-dv/samples/samples/maps/geo-map/display-osm-imagery" + ], "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/geo-map": [ "https://staging.infragistics.com/angular-demos-dv/samples/samples/maps/geo-map/type-scatter-bubble-series" ], diff --git a/stats/docStats-Blazor.json b/stats/docStats-Blazor.json index 411863639..e568d4cd5 100644 --- a/stats/docStats-Blazor.json +++ b/stats/docStats-Blazor.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in Blazor documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "Blazor", - "samplesCount": 617, + "samplesCount": 613, "samplesHost": "https://staging.infragistics.com/blazor-client/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -1627,6 +1627,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/empty": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating" ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/single-selection": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating" + ], "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating" ], @@ -1726,33 +1729,18 @@ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/card/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/card" ], - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/contained-in-boundaries": [ - "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-customization" - ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/customize-buttons": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager" ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/embedding-frames": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-embedding-frames" ], - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/focus-panes": [ - "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-customization" - ], - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/hide-pane-headers": [ - "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-customization" - ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/overview": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager" ], - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/proximity-dock": [ - "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-customization" - ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager" ], - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/toggle-inner-dock": [ - "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-customization" - ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/updating-panes": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-updating-panes" ], @@ -1920,7 +1908,7 @@ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" ] }, - "topicsCount": 273, + "topicsCount": 272, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -2956,6 +2944,7 @@ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/basic", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/custom", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/empty", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/single-selection", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/rating/styling" ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/ripple": [ @@ -3009,13 +2998,6 @@ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/overview", "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/styling" ], - "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-customization": [ - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/contained-in-boundaries", - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/focus-panes", - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/hide-pane-headers", - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/proximity-dock", - "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/toggle-inner-dock" - ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager-embedding-frames": [ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/embedding-frames" ], diff --git a/stats/docStats-React.json b/stats/docStats-React.json index ff088569a..93b61ae08 100644 --- a/stats/docStats-React.json +++ b/stats/docStats-React.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in React documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "React", - "samplesCount": 579, + "samplesCount": 602, "samplesHost": "https://staging.infragistics.com/react-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -1532,6 +1532,27 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/chip/variants": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/chip" ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/group": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/header": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/item": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/overview": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/position": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/styling": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/target": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown" + ], "https://staging.infragistics.com/react-demos/samples/samples/inputs/form/overview": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/form" ], @@ -1559,6 +1580,15 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/input/styling": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/input" ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/applying-mask": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/overview": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/value-modes": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input" + ], "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/alignment": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/radio" ], @@ -1577,12 +1607,42 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/styling": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/radio" ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/basic": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/rating" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/custom": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/rating" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/empty": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/rating" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/single-selection": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/rating" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/styling": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/rating" + ], "https://staging.infragistics.com/react-demos/samples/samples/inputs/ripple/button": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/ripple" ], "https://staging.infragistics.com/react-demos/samples/samples/inputs/ripple/color": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/ripple" ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/group": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/select" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/header": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/select" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/item": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/select" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/overview": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/select" + ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/styling": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/select" + ], "https://staging.infragistics.com/react-demos/samples/samples/inputs/slider/constraints": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/slider" ], @@ -1625,6 +1685,15 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/switches/overview": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/switch" ], + "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/customization": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion" + ], + "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/nested-scenario": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion" + ], + "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/overview": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion" + ], "https://staging.infragistics.com/react-demos/samples/samples/layouts/avatar/icon": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/avatar" ], @@ -1713,6 +1782,7 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/geo-map-display-heat-imagery" ], "https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/display-osm-imagery": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/general-getting-started", "https://staging.infragistics.com/products/ignite-ui-react/react/components/geo-map-display-osm-imagery" ], "https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/navigation": [ @@ -1804,7 +1874,7 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar" ] }, - "topicsCount": 270, + "topicsCount": 276, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-react/react/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -2110,6 +2180,9 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/excel-library-working-with-sparklines": [ "https://staging.infragistics.com/react-demos/samples/samples/excel/excel-library/working-with-sparklines" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/general-getting-started": [ + "https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/display-osm-imagery" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/geo-map": [ "https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/type-scatter-bubble-series" ], @@ -2779,6 +2852,15 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/chip/styling", "https://staging.infragistics.com/react-demos/samples/samples/inputs/chip/variants" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown": [ + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/group", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/header", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/item", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/overview", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/position", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/styling", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/dropdown/target" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/form": [ "https://staging.infragistics.com/react-demos/samples/samples/inputs/form/overview" ], @@ -2794,6 +2876,11 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/input/size", "https://staging.infragistics.com/react-demos/samples/samples/inputs/input/styling" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input": [ + "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/applying-mask", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/overview", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/value-modes" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/radio": [ "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/alignment", "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/disabled", @@ -2802,10 +2889,24 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/label", "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/styling" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/rating": [ + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/basic", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/custom", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/empty", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/single-selection", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/rating/styling" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/ripple": [ "https://staging.infragistics.com/react-demos/samples/samples/inputs/ripple/button", "https://staging.infragistics.com/react-demos/samples/samples/inputs/ripple/color" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/select": [ + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/group", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/header", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/item", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/overview", + "https://staging.infragistics.com/react-demos/samples/samples/inputs/select/styling" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/slider": [ "https://staging.infragistics.com/react-demos/samples/samples/inputs/slider/constraints", "https://staging.infragistics.com/react-demos/samples/samples/inputs/slider/disabled", @@ -2824,6 +2925,11 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/switches/label", "https://staging.infragistics.com/react-demos/samples/samples/inputs/switches/overview" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion": [ + "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/customization", + "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/nested-scenario", + "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/overview" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/avatar": [ "https://staging.infragistics.com/react-demos/samples/samples/layouts/avatar/icon", "https://staging.infragistics.com/react-demos/samples/samples/layouts/avatar/image", diff --git a/stats/docStats-WC.json b/stats/docStats-WC.json index 3316988cf..c3010346b 100644 --- a/stats/docStats-WC.json +++ b/stats/docStats-WC.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in WebComponents documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "WebComponents", - "samplesCount": 677, + "samplesCount": 678, "samplesHost": "https://staging.infragistics.com/webcomponents-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -1772,6 +1772,9 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/empty": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating" ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/single-selection": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating" + ], "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/styling": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating" ], @@ -3202,6 +3205,7 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/basic", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/custom", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/empty", + "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/single-selection", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/rating/styling" ], "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple": [