GridBlazor configuration

November 28, 2023 ยท View on GitHub

Blazor server-side

GridBlazor configuration

Index

You can configure the settings of the grid with the parameters and methods of the GridComponent, GridClient and GridCoreServer objects. Remember that they must have compatible settings.

GridComponent parameters

ParameterTypeDescriptionExample
TType (mandatory)type of the model items<GridComponent T="Order" Grid="@_grid" />
GridICGrid (mandatory)grid object that has to be created in the OnParametersSetAsync method of the Blazor page<GridComponent T="Order" Grid="@_grid" />
OnRowClickedAction<object> (optional)to be executed when selecting a row on "selectable" grids<GridComponent T="Order" Grid="@_grid" OnRowClicked="@OrderDetails" />
CustomFiltersIQueryDictionary<Type> (optional)Dictionary containing all types of custom filter widgets used on the grid<GridComponent T="Order" Grid="@_grid" CustomFilters="@_customFilters" />
GridMvcCssClassstring (optional)Html classes used by the parent grid element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridMvcCssClass="grid-mvc-alt" />
GridWrapCssClassstring (optional)Html classes used by the wrap element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridWrapCssClass ="grid-wrap-alt" />
GridFooterCssClassstring (optional)Html classes used by the footer element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridFooterCssClass="grid-footer-alt" />
GridItemsCountCssClassstring (optional)Html classes used by the items count element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridItemsCountCssClass="grid-items-count-alt" />
TableCssClassstring (optional)Html classes used by the table element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" TableCssClass="grid-table-alt" />
TableWrapCssClassstring (optional)Html classes used by the parent div of the table element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" TableWrapCssClass="table-wrap-alt" />
GridHeaderCssClassstring (optional)Html classes used by the table header element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridHeaderCssClass="grid-header-alt" />
GridCellCssClassstring (optional)Html classes used by the cell elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridCellCssClass="grid-cell-alt" />
GridButtonCellCssClassstring (optional)Html classes used by the button elements of CRUD grids (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridButtonCellCssClass="grid-button-cell-alt" />
GridSubGridCssClassstring (optional)Html classes used by the subgrid elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridSubGridCssClass="grid-subgrid-alt" />
GridEmptyTextCssClassstring (optional)Html classes used by the empty cell elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridEmptyTextCssClass="grid-empty-text-alt" />
GridErrorCssClassstring (optional)Html classes used by the error message element (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridErrorCssClass="grid-error-alt" />
GridSumCssClassstring (optional)Html classes used by the sum row elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridSumCssClass="grid-sum-cell" />
GridAverageCssClassstring (optional)Html classes used by the average row elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridAverageCssClass="grid-sum-cell" />
GridMaxCssClassstring (optional)Html classes used by the max row elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridMaxCssClass="grid-sum-cell" />
GridMinCssClassstring (optional)Html classes used by the min row elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridMinCssClass="grid-sum-cell" />
GridCalculationCssClassstring (optional)Html classes used by the calcultation row elements (it overrides default parameter)<GridComponent T="Order" Grid="@_grid" GridCalculationCssClass="grid-sum-cell" />

GridClient parameters

ParameterDescriptionExample
dataServicelamba expresion of the service method returning rowsq => orderService.GetOrdersGridRows(columns, q)
querydictionary containing grid parameters as the initial pagequery.Add("grid-page", "2");
renderOnlyRowsboolean to configure if only rows are renderend by the server or all the grid objectMust be false for Blazor solutions
gridNamestring containing the grid client nameordersGrid
columnslambda expression to define the columns included in the grid (Optional)c => { c.Add(o => o.OrderID); c.Add(o => o.Customer.CompanyName); };
cultureInfoCultureInfo class to define the language of the grid (Optional)new CultureInfo("de-DE");

GridClient methods

Method nameDescriptionExample
AutoGenerateColumnsGenerates columns for all properties of the model using data annotationsGridClient(...).AutoGenerateColumns();
SortableEnable or disable sorting for all columns of the gridGridClient(...).Sortable(true);
SearchableEnable or disable searching on the gridGridClient(...).Searchable(true, true);
FilterableEnable or disable filtering for all columns of the gridGridClient(...).Filterable(true);
WithMultipleFiltersAllow grid to use multiple filtersGridClient(...).WithMultipleFilters();
SyncButtonEnable or disable the Sync button to refresh the gridGridClient(...).SyncButton(true);
ClearFiltersButtonEnable or disable the ClearFilters buttonGridClient(...).ClearFiltersButton(true);
SelectableEnable or disable the client grid items selectable featureGridClient(...).Selectable(true, true);
SetStripedEnable or disable the grid as a striped oneGridClient(...).SetStriped(true);
SetKeyboardEnable or disable the keyboard navigationGridClient(...).SetKeyboard(true);
SetModifierKeyConfigure the modifier key for keyboard navigationGridClient(...).SetModifierKey(ModifierKey.ShiftKey);
EmptyTextSetup the text displayed for all empty items in the gridGridClient(...).EmptyText(' - ');
WithGridItemsCountAllows the grid to show items countGridClient(...).WithGridItemsCount();
SetRowCssClassesSetup specific row css classesGridClient(...).SetRowCssClasses(item => item.Customer.IsVip ? "success" : string.Empty);
AddToOnAfterRenderAdd a Func<GridComponent, bool, Task> to be executed at the end of the OnAfterRenderAsync method of the grid componentGridClient(...).AddToOnAfterRender(OnAfterDepartmentRender);
SetDirectionAllows the grid to be show in right to left directionGridClient(...).SetDirection(GridDirection.RTL);
HandleServerErrorsAllows errors from the server to be handled by grid clientGridClient(...).HandleServerErrors(true, false);
SetTableLayoutConfigure fixed dimensions for the gridGridClient(...).SetTableLayout(TableLayout.Fixed, "1200px", "400px");

GridCoreServer parameters

ParameterDescriptionExample
itemsIEnumerable object containing all the grid rowsrepository.GetAll()
queryIQueryCollection containing all grid parametersMust be the Request.Query of the controller
renderOnlyRowsboolean to configure if only rows are renderend by the server or all the grid objectMust be true for Blazor solutions
gridNamestring containing the grid client nameordersGrid
columnslambda expression to define the columns included in the grid (Optional)Columns lamba expression defined in the razor page of the example
pageSizeinteger to define the number of rows returned by the web service (Optional)10

GridCoreServer methods

Method nameDescriptionExample
AutoGenerateColumnsGenerates columns for all properties of the model using data annotationsGridCoreServer(...).AutoGenerateColumns();
SortableEnable or disable sorting for all columns of the gridGridCoreServer(...).Sortable(true);
SearchableEnable or disable searching on the gridGridCoreServer(...).Searchable(true, true);
FilterableEnable or disable filtering for all columns of the gridGridCoreServer(...).Filterable(true);
WithMultipleFiltersAllow grid to use multiple filtersGridCoreServer(...).WithMultipleFilters();
WithGridItemsCountAllows the grid to show items countGridCoreServer(...).WithGridItemsCount();

<- Quick start | Keyboard navigation ->