@syncfusion/ej2-react-treegrid

{ "name": "TreeGrid", "description": "TreeGrid Components", "blazorType": "native", "keywords": { "common": ["ej2", "syncfusion", "JavaScript", "TypeScript", "treelist", "tree-table", "tree-data", "treegrid", "table", "tree-grid-component", "tree-table-control", "hierarchy-table", "nested-grid", "treeview-grid", "hierarchical-grid", "nested-table", "parent-child-table", "collapsible-table", "multi-level-table"], "angular": ["angular", "angular-treegrid", "angular-treelist", "treelist", "tree-table", "tree-data", "treegrid", "table", "tree-grid-component", "tree-table-control", "hierarchy-table", "nested-grid", "treeview-grid", "hierarchical-grid", "nested-table", "parent-child-table", "collapsible-table", "multi-level-table"], "react": ["react", "reactjs", "react-treegrid", "JavaScript", "react-treelist", "treelist", "tree-table", "tree-data", "treegrid", "table", "tree-grid-component", "tree-table-control", "hierarchy-table", "nested-grid", "treeview-grid", "hierarchical-grid", "nested-table", "parent-child-table", "collapsible-table", "multi-level-table"], "vue": ["vue", "vuejs", "vue-treegrid", "vue-treelist", "treelist", "tree-table", "tree-data", "treegrid", "table", "tree-grid-component", "tree-table-control", "hierarchy-table", "nested-grid", "treeview-grid", "hierarchical-grid", "nested-table", "parent-child-table", "collapsible-table", "multi-level-table"] }, "repository": { "type": "git", "url": "https://github.com/syncfusion/ej2-treegrids" }, "eventInterfaces": ["RowExpandedEventArgs", "RowExpandingEventArgs", "RowCollapsedEventArgs", "RowCollapsingEventArgs"], "components": [{ "baseClass": "TreeGrid", "directoryName": "treegrid", "type": "simple", "defaultTag": "<treegrid id='sample'></treegrid>", "twoWays": [ "dataSource" ], "blazorType": "native", "blazorDependency": [ "ej2-base", "ej2-data", "ej2-popups", "ej2-grids/blazor", "ej2-navigations/blazor/Toolbar", "ej2-navigations/blazor/ContextMenu", "ej2-inputs/blazor/NumericTextBox", "ej2-inputs/blazor/TextBox", "ej2-calendars/blazor/DatePicker", "ej2-calendars/DateTimePicker", "ej2-dropdowns/DropDownList", "ej2-dropdowns/AutoComplete", "ej2-popups/blazor/Dialog", "ej2-popups/blazor/Tooltip", "ej2-splitbuttons/blazor/DropDownButton" ], "isGenericClass": true, "dynamicModules": [ "Filter", "Page", "Sort", "Reorder", "Toolbar", "Aggregate", "Resize", "ColumnMenu", "ExcelExport", "PdfExport", "CommandColumn", "ContextMenu", "Edit", "Selection", "VirtualScroll", "DetailRow", "RowDD", "Freeze", "ColumnChooser", "Logger", "InfiniteScroll" ], "diModuleFiles": [ { "fileName": "Filter" }, { "fileName": "Page" }, { "fileName": "Selection" }, { "fileName": "Sort" }, { "fileName": "Reorder" }, { "fileName": "toolbar" }, { "fileName": "summary" }, { "fileName": "resize" }, { "fileName": "column-menu" }, { "fileName": "excel-export" }, { "fileName": "pdf-export" }, { "fileName": "Command-Column" }, { "fileName": "Context-Menu" }, { "fileName": "edit" }, { "fileName": "virtual-scroll" }, { "fileName" : "detail-row"}, { "fileName" : "rowdragdrop"}, { "fileName": "freeze-column"}, { "fileName": "column-chooser"}, { "fileName": "logger"}, { "fileName": "infinite-scroll"} ], "comment": [ "/**", " * `ejs-treegrid` represents the Angular TreeTreeGrid Component.", " * ```html", " * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-treegrid>", " * ```", " */" ], "reactComment": [ "/**", " * `TreeTreeGridComponent` represents the react TreeTreeGrid.", " * ```tsx", " * <TreeTreeGridComponent dataSource={data} allowPaging={true} allowSorting={true}/>", " * ```", " */" ], "vueComment": [ "/**", " * `ejs-treegrid` represents the VueJS TreeGrid Component.", " * ```vue", " * <ejs-treegrid :dataSource='data' allowPaging='true' allowSorting='true'></ejs-treegrid>", " * ```", " */" ], "complexDirective": [{ "propertyName": "filterSettings", "baseClass": "FilterSettings", "migratedTagDirective": [{ "arrayDirectiveClassName": "filterColumns", "directiveClassName": "filterColumn", "propertyName": "columns", "directoryName": "treegrid", "baseClass": "Predicate" }] }, { "propertyName": "sortSettings", "baseClass": "SortSettings", "migratedTagDirective": [{ "arrayDirectiveClassName": "sortColumns", "directiveClassName": "sortColumn", "propertyName": "columns", "directoryName": "treegrid", "baseClass": "SortDescriptor" }] }, { "propertyName": "pageSettings", "baseClass": "PageSettings" }, { "propertyName": "searchSettings", "baseClass": "SearchSettings" }, { "propertyName": "rowDropSettings", "baseClass": "RowDropSettings" }, { "propertyName": "selectionSettings", "baseClass": "SelectionSettings" }, { "propertyName": "textWrapSettings", "baseClass": "TextWrapSettings" }, { "propertyName": "editSettings", "baseClass": "EditSettings", "isPartialClass": true }, { "propertyName": "infiniteScrollSettings", "baseClass": "InfiniteScrollSettings" }, { "propertyName": "loadingIndicator", "baseClass": "LoadingIndicator", "migratedTagDirective": [{ "propertyName": "indicatorType", "directoryName": "treegrid", "baseClass": "IndicatorType" }] } ], "tagDirective": [{ "arrayDirectiveClassName": "columns", "directiveClassName": "column", "propertyName": "columns", "isPartialClass": true, "arrayDirectiveSelector": "ejs-treegrid>e-columns", "directiveSelector": "ejs-treegrid>e-columns>e-column", "directoryName": "treegrid", "baseClass": "TreeGridColumn", "comment": [ "/**", " * `e-column` directive represent a column of the Angular TreeGrid. ", " * It must be contained in a TreeGrid component(`ejs-treegrid`). ", " * ```html", " * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='100'></e-column>", " * <e-column field='name' headerText='Name' width='100'></e-column>", " * </e-columns>", " * </ejs-treegrid>", " * ```", " */" ], "reactComment": [ "/**", " * `ColumnDirective` represent a column of the react TreeGrid. ", " * It must be contained in a TreeGrid component(`TreeGridComponent`). ", " * ```tsx", " * <TreeGridComponent dataSource={data} allowPaging={true} allowSorting={true}> ", " * <ColumnsDirective>", " * <ColumnDirective field='ID' width='100'></ColumnDirective>", " * <ColumnDirective field='name' headerText='Name' width='100'></ColumnDirective>", " * <ColumnsDirective>", " * </TreeGridComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-column` directive represent a column of the VueJS TreeGrid. ", " * It must be contained in a TreeGrid component(`ejs-treegrid`). ", " * ```vue", " * <ejs-treegrid :dataSource='data' allowPaging='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='100'/>", " * <e-column field='name' headerText='Name' width='100'/>", " * </e-columns>", " * </ejs-treegrid>", " * ```", " */" ], "templateProperties": [ "template", "headerTemplate", "filter.itemTemplate", "filterTemplate", "commandsTemplate", "editTemplate" ], "tagDirective": [ { "arrayDirectiveClassName": "StackedColumns", "directiveClassName": "StackedColumn", "propertyName": "columns", "arrayDirectiveSelector": "ejs-treegrid>e-columns>e-column>e-stacked-columns", "directiveSelector": "ejs-treegrid>e-columns>e-column>e-stacked-columns>e-stacked-column", "directoryName": "treegrid", "baseClass": "StackedColumn", "fileName": "stacked-column", "comment": [ "/**", " * `e-stacked-column` directive represent the stacked column of the Angular TreeGrid.", " * It must be contained in a StackedColumns component(`e-stacked-columns`). ", " * ```html", " * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='100'></e-column>", " * <e-column headerText='Details' width='100'>", " * <e-stacked-columns>", " * <e-stacked-column field='Name' width='140'></e-stacked-column>", " * </e-stacked-columns>", " * </e-column>", " * </e-columns>", " * </ejs-treegrid>", " * ```", " */" ], "templateProperties": [ "template", "headerTemplate", "filter.itemTemplate", "filterTemplate", "commandsTemplate", "editTemplate" ] } ] }, { "arrayDirectiveClassName": "aggregates", "directiveClassName": "aggregate", "arrayDirectiveSelector": "ejs-treegrid>e-aggregates", "directiveSelector": "ejs-treegrid>e-aggregates>e-aggregate", "directoryName": "treegrid", "propertyName": "aggregates", "baseClass": "AggregateRow", "comment": [ "/**", " * `e-aggregate` directive represent a aggregate row of the Angular TreeGrid. ", " * It must be contained in a TreeGrid component(`ejs-treegrid`). ", " * ```html", " * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='100'></e-column>", " * <e-column field='name' headerText='Name' width='100'></e-column>", " * </e-columns>", " * <e-aggregates>", " * <e-aggregate>", " * <e-columns>", " * <e-column field='ID' type='Min'></e-column>", " * </e-columns>", " * </e-aggregate>", " * </e-aggregates>", " * </ejs-treegrid>", " * ```", " */" ], "reactComment": [ "/**", " * `AggregateDirective` represent a aggregate row of the react TreeGrid. ", " * It must be contained in a TreeGrid component(`TreeGridComponent`). ", " * ```tsx", " * <TreeGridComponent dataSource={data} allowPaging={true} allowSorting={true}> ", " * <ColumnsDirective>", " * <ColumnDirective field='ID' width='100'></ColumnDirective>", " * <ColumnDirective field='name' headerText='Name' width='100'></ColumnDirective>", " * </ColumnsDirective>", " * <AggregatesDirective>", " * <AggregateDirective>", " * <AggregateColumnsDirective>", " * <AggregateColumnDirective field='ID' type='Min'></AggregateColumnsDirective>", " * </<AggregateColumnsDirective>", "* </AggregateDirective>", " * </AggregatesDirective>", " * </TreeGridComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-aggregate` directive represent a aggregate row of the VueJS TreeGrid. ", " * It must be contained in a TreeGrid component(`ejs-treegrid`). ", " * ```vue", " * <ejs-treegrid :dataSource]='data' allowPaging='true' allowSorting='true'>", " * <e-columns>", " * <e-column field='ID' width='100'/>", " * <e-column field='name' headerText='Name' width='100'/>", " * </e-columns>", " * <e-aggregates>", " * <e-aggregate>", " * <e-columns>", " * <e-column field='ID' type='Min'/>", " * </e-columns>", " * </e-aggregate>", " * </e-aggregates>", " * </ejs-treegrid>", " * ```", " */" ], "tagDirective": [{ "arrayDirectiveClassName": "AggregateColumns", "directiveClassName": "AggregateColumn", "arrayDirectiveSelector": "ejs-treegrid>e-aggregates>e-aggregate>e-columns", "directiveSelector": "ejs-treegrid>e-aggregates>e-aggregate>e-columns>e-column", "directoryName": "treegrid", "fileName": "aggregate-columns", "propertyName": "columns", "baseClass": "AggregateColumn", "aspDirectiveSelector": "e-treegrid-aggregate-column", "aspArrayDirectiveSelector": "e-treegrid-aggregate-columns", "templateProperties": [ "footerTemplate" ], "comment": [ "/**", " * `e-aggregate->e-column` directive represent a aggregate column of the Angular TreeGrid. ", " * ```html", " * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='100'></e-column>", " * <e-column field='name' headerText='Name' width='100'></e-column>", " * </e-columns>", " * <e-aggregates>", " * <e-aggregate>", " * <e-columns>", " * <e-column field='ID' type='Min'></e-column>", " * </e-columns>", " * </e-aggregate>", " * </e-aggregates>", " * </ejs-treegrid>", " * ```", " */" ], "reactComment": [ "/**", " * `AggregateColumnDirective represent a aggregate column of the react TreeGrid. ", " * ```tsx", " * <TreeGridComponent dataSource={data} allowPaging={true} allowSorting={true}> ", " * <ColumnsDirective>", " * <ColumnDirective field='ID' width='100'></ColumnDirective>", " * <ColumnDirective field='name' headerText='Name' width='100'></ColumnDirective>", " * </ColumnsDirective>", " * <AggregatesDirective>", " * <AggregateDirective>", " * <AggregateColumnsDirective>", " * <AggregateColumnDirective field='ID' type='Min'></AggregateColumnsDirective>", " * </AggregateColumnsDirective>", " * </AggregateDirective>", " * </AggregatesDirective>", " * </TreeGridComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-aggregate->e-column` directive represent a aggregate column of the VueJS TreeGrid. ", " * ```vue", " * <ejs-treegrid :dataSource='data' allowPaging='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='100'/>", " * <e-column field='name' headerText='Name' width='100'/>", " * </e-columns>", " * <e-aggregates>", " * <e-aggregate>", " * <e-columns>", " * <e-column field='ID' type='Min'/>", " * </e-columns>", " * </e-aggregate>", " * </e-aggregates>", " * </ejs-treegrid>", " * ```", " */" ] }] } ], "templateProperties": [ "toolbarTemplate", "pagerTemplate", "rowTemplate", "detailTemplate", "editSettings.template" ] } ] }