{
"name": "Grids",
"description": "Grid Components",
"blazorType": "native",
"keywords": {
"common": ["ej2", "ej2-grids", "syncfusion", "web-components", "data-grid", "data-table", "grid", "pager", "data", "table", "Typescript"],
"angular": ["angular", "ng-grids", "ej2-angular-grids", "ej2-ng-grids"],
"react": ["react", "reactjs", "react-grids", "ej2-react-grids"],
"vue": ["vue", "vuejs", "vue-grids", "ej2-vue-grids" ]
},
"repository": {
"type": "git",
"url": "https://github.com/syncfusion/ej2-grids"
},
"eventInterfaces": ["ActionEventArgs", "AddEventArgs", "CellDeselectEventArgs", "CellSelectEventArgs", "CellSelectingEventArgs",
"ColumnChooserEventArgs", "ColumnDragEventArgs", "ColumnMenuClickEventArgs", "ColumnMenuOpenEventArgs", "ContextMenuClickEventArgs",
"ContextMenuOpenEventArgs", "DataSourceChangedEventArgs", "DataStateChangeEventArgs", "DeleteEventArgs", "DetailDataBoundEventArgs",
"DialogEditEventArgs", "EditEventArgs", "ExcelHeaderQueryCellInfoEventArgs", "ExcelQueryCellInfoEventArgs", "ExportDetailDataBoundEventArgs",
"FailureEventArgs", "FilterEventArgs", "FilterSearchBeginEventArgs", "GroupEventArgs", "HeaderCellInfoEventArgs",
"PageEventArgs", "PdfHeaderQueryCellInfoEventArgs", "PdfQueryCellInfoEventArgs", "PrintEventArgs", "QueryCellInfoEventArgs",
"RecordDoubleClickEventArgs", "RowDataBoundEventArgs", "RowDeselectEventArgs", "RowDragEventArgs", "RowDropEventArgs",
"RowSelectEventArgs", "RowSelectingEventArgs", "SaveEventArgs", "SearchEventArgs", "SortEventArgs"],
"components": [{
"baseClass": "Grid",
"directoryName": "grid",
"type": "simple",
"isTModel":true,
"isGenericClass": true,
"blazorPlaceholder": "datagrid",
"defaultTag": "",
"blazorType": "native",
"templateProps": [
"template",
"headerTemplate",
"commandsTemplate",
"filter.itemTemplate",
"editTemplate",
"filterTemplate",
"columnChooserSettings.headerTemplate",
"columnChooserSettings.template",
"columnChooserSettings.footerTemplate"
],
"blazorDependency": [
"ej2-base",
"ej2-data",
"ej2-popups",
"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"
],
"twoWays": [
"dataSource"
],
"dynamicModules": [
"Filter",
"Page",
"Selection",
"Sort",
"Group",
"Reorder",
"RowDD",
"DetailRow",
"Toolbar",
"Aggregate",
"Search",
"VirtualScroll",
"Edit",
"Resize",
"ExcelExport",
"PdfExport",
"CommandColumn",
"ContextMenu",
"Freeze",
"ColumnMenu",
"ColumnChooser",
"ForeignKey",
"InfiniteScroll",
"LazyLoadGroup"
],
"diModuleFiles": [
{ "fileName": "Filter" },
{ "fileName": "Page" },
{ "fileName": "Selection" },
{ "fileName": "Sort" },
{ "fileName": "Group" },
{ "fileName": "Reorder" },
{ "fileName": "row-reorder" },
{ "fileName": "detail-row" },
{ "fileName": "toolbar" },
{ "fileName": "aggregate" },
{ "fileName": "virtual-scroll" },
{ "fileName": "edit" },
{ "fileName": "resize" },
{ "fileName": "Excel-Export" },
{ "fileName": "Pdf-Export" },
{ "fileName": "Command-Column" },
{ "fileName": "Context-Menu" },
{ "fileName": "Freeze" },
{ "fileName": "Column-Menu" },
{ "fileName": "column-chooser" },
{ "fileName": "Foreign-Key" },
{ "fileName": "infinite-scroll"},
{ "fileName": "lazy-load-group"}
],
"comment": [
"/**",
" * `ejs-grid` represents the Angular Grid Component.",
" * ```html",
" * ",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `GridComponent` represents the react Grid.",
" * ```tsx",
" * ",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `ejs-grid` represents the VueJS Grid Component.",
" * ```vue",
" * ",
" * ```",
" */"
],
"complexDirective": [{
"propertyName": "filterSettings",
"baseClass": "FilterSettings",
"migratedTagDirective": [{
"arrayDirectiveClassName": "filterColumns",
"directiveClassName": "filterColumn",
"propertyName": "columns",
"directoryName": "grid",
"baseClass": "Predicate"
}]
},
{
"propertyName": "sortSettings",
"baseClass": "SortSettings",
"migratedTagDirective": [{
"arrayDirectiveClassName": "sortColumns",
"directiveClassName": "sortColumn",
"propertyName": "columns",
"directoryName": "grid",
"baseClass": "SortDescriptor"
}]
},
{
"propertyName": "groupSettings",
"baseClass": "GroupSettings",
"blazorTemplates":["captionTemplate"],
"blazorTemplateModels": {
"captionTemplate": "CaptionTemplateContext"
}
},
{
"propertyName": "editSettings",
"baseClass": "EditSettings",
"isPartialClass": true,
"blazorTemplates":["template",
"headerTemplate",
"footerTemplate"
]
},
{
"propertyName": "pageSettings",
"baseClass": "PageSettings",
"blazorTemplates":["template"],
"blazorTemplateModels": {
"template": "PagerTemplateContext"
}
},
{
"propertyName": "rowDropSettings",
"baseClass": "RowDropSettings"
},
{
"propertyName": "searchSettings",
"baseClass": "SearchSettings"
},
{
"propertyName": "selectionSettings",
"baseClass": "SelectionSettings"
},
{
"propertyName": "textWrapSettings",
"baseClass": "TextWrapSettings"
},
{
"propertyName": "columnChooserSettings",
"baseClass": "ColumnChooserSettings"
},
{
"propertyName": "resizeSettings",
"baseClass": "ResizeSettings"
},
{
"propertyName": "infiniteScrollSettings",
"baseClass": "InfiniteScrollSettings"
},
{
"propertyName": "loadingIndicator",
"baseClass": "LoadingIndicator",
"migratedTagDirective": [{
"propertyName": "indicatorType",
"directoryName": "grid",
"baseClass": "IndicatorType"
}]
}
],
"tagDirective": [{
"arrayDirectiveClassName": "columns",
"directiveClassName": "column",
"isTModel":true,
"propertyName": "columns",
"isPartialClass": true,
"arrayDirectiveSelector": "ejs-grid>e-columns",
"directiveSelector": "ejs-grid>e-columns>e-column",
"directoryName": "grid",
"baseClass": "GridColumn",
"isCircularBlazorComponent": true,
"comment": [
"/**",
" * `e-column` directive represent a column of the Angular Grid. ",
" * It must be contained in a Grid component(`ejs-grid`). ",
" * ```html",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `ColumnDirective` represent a column of the react Grid. ",
" * It must be contained in a Grid component(`GridComponent`). ",
" * ```tsx",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-column` directive represent a column of the VueJS Grid. ",
" * It must be contained in a Grid component(`ejs-grid`). ",
" * ```vue",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"templateProperties": [
"template",
"headerTemplate",
"commandsTemplate",
"filter.itemTemplate",
"editTemplate",
"filterTemplate"
],
"blazorTemplates":[
"template",
"headerTemplate",
"editTemplate",
"filterTemplate"
],
"blazorTemplateModels":{
"filterTemplate": "PredicateModel"
},
"customProperties": [{
"name": "customFormat",
"type": "object",
"defaultValue": null,
"comments": "Gets the format from the user which can be standard or custom"
}],
"migratedTagDirective": [{
"arrayDirectiveClassName": "CommandColumns",
"directiveClassName": "CommandColumn",
"directoryName": "grid",
"propertyName": "commands",
"baseClass": "CommandColumnModel",
"isPartialClass": true
}],
"tagDirective": [
{
"arrayDirectiveClassName": "StackedColumns",
"directiveClassName": "StackedColumn",
"propertyName": "columns",
"arrayDirectiveSelector": "ejs-grid>e-columns>e-column>e-stacked-columns",
"directiveSelector": "ejs-grid>e-columns>e-column>e-stacked-columns>e-stacked-column",
"directoryName": "grid",
"baseClass": "StackedColumn",
"fileName": "stacked-column",
"comment": [
"/**",
" * `e-stacked-column` directive represent the stacked column of the Angular Grid.",
" * It must be contained in a StackedColumns component(`e-stacked-columns`). ",
" * ```html",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"templateProperties": [
"template",
"headerTemplate",
"commandsTemplate",
"filter.itemTemplate",
"editTemplate",
"filterTemplate"
],
"customProperties": [
{
"name": "customFormat",
"type": "object",
"defaultValue": null,
"comments": "Gets the format from the user which can be standard or custom"
}
],
"migratedTagDirective": [
{
"arrayDirectiveClassName": "CommandColumns",
"directiveClassName": "CommandColumn",
"directoryName": "grid",
"propertyName": "commands",
"baseClass": "CommandColumnModel",
"isPartialClass": true
}
]
}
]
},
{
"arrayDirectiveClassName": "aggregates",
"directiveClassName": "aggregate",
"arrayDirectiveSelector": "ejs-grid>e-aggregates",
"directiveSelector": "ejs-grid>e-aggregates>e-aggregate",
"directoryName": "grid",
"propertyName": "aggregates",
"baseClass": "AggregateRow",
"comment": [
"/**",
" * `e-aggregate` directive represent a aggregate row of the Angular Grid. ",
" * It must be contained in a Grid component(`ejs-grid`). ",
" * ```html",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `AggregateDirective` represent a aggregate row of the react Grid. ",
" * It must be contained in a Grid component(`GridComponent`). ",
" * ```tsx",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
"* ",
" * ",
" * ",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-aggregate` directive represent a aggregate row of the VueJS Grid. ",
" * It must be contained in a Grid component(`ejs-grid`). ",
" * ```vue",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"tagDirective": [{
"arrayDirectiveClassName": "AggregateColumns",
"directiveClassName": "AggregateColumn",
"arrayDirectiveSelector": "ejs-grid>e-aggregates>e-aggregate>e-columns",
"directiveSelector": "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column",
"directoryName": "grid",
"fileName": "aggregate-columns",
"propertyName": "columns",
"baseClass": "AggregateColumn",
"aspDirectiveSelector": "e-aggregate-column",
"aspArrayDirectiveSelector": "e-aggregate-columns",
"templateProperties": [
"footerTemplate",
"groupFooterTemplate",
"groupCaptionTemplate"
],
"blazorTemplates":[
"footerTemplate",
"groupFooterTemplate",
"groupCaptionTemplate"
],
"blazorTemplateModels": {
"footerTemplate" : "AggregateTemplateContext",
"groupFooterTemplate" : "AggregateTemplateContext",
"groupCaptionTemplate" : "AggregateTemplateContext"
},
"comment": [
"/**",
" * `e-aggregate->e-column` directive represent a aggregate column of the Angular Grid. ",
" * ```html",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `AggregateColumnDirective represent a aggregate column of the react Grid. ",
" * ```tsx",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-aggregate->e-column` directive represent a aggregate column of the VueJS Grid. ",
" * ```vue",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ",
" * ```",
" */"
]
}]
}
],
"templateProperties": [
"rowTemplate",
"emptyRecordTemplate",
"detailTemplate",
"toolbarTemplate",
"pagerTemplate",
"editSettings.template",
"groupSettings.captionTemplate",
"columnChooserSettings.headerTemplate",
"columnChooserSettings.template",
"columnChooserSettings.footerTemplate"
],
"blazorTemplates":[
"rowTemplate",
"detailTemplate",
"toolbarTemplate"
],
"interfaces": [
{
"InterfaceName": "IFilter",
"PropertyName": [
"itemTemplate"
]
}
]
},
{
"baseClass": "Pager",
"directoryName": "pager",
"type": "simple",
"twoWays": ["currentPage", "pageSize", "pageCount", "pageSizes"],
"comment": [
"/**",
" * `ejs-pager` represents the Angular Pager Component.",
" * ```html",
" * ",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `PagerComponent` represents the react Pager.",
" * ```tsx",
" * ",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `ejs-pager` represents the VueJS Pager Component.",
" * ```vue",
" * ",
" * ```",
" */"
],
"templateProperties": [
"template"
]
}
]
}