Hey guys, I'm venkat and this is part 29 of web development with Blazor video series. In this
video we'll discuss some of the commonly used advanced data grid column features
like column chooser, reordering columns, column resizing and column menu.
We use column chooser to show or hide data grid columns dynamically at runtime. To
enable it we need to do two things. First, set ShowColumnChooser boolean property to true and
initialize Toolbar property to a new string array. Now, if you recollect from our previous videos in
this series, in the toolbar if we want to display buttons for database CRUD operations like create,
read, update, delete etc, we include the respective strings like Add, Edit, Update, Delete,
Cancel etc. Right now, we want to display column chooser so we include the string "ColumnChooser".
Notice, now in the toolbar we have this columns drop down which we can use to dynamically show
and hide data grid columns. For now, let's only display these three columns first name,
last name and department name, click ok, there we go, only the selected three columns are displayed,
we even have search functionality, for example if we are displaying a lot of columns in the
data grid we can use this search functionality to search for the column that we are looking for,
at the moment in this data grid we have got six and by default all these
grid columns are included in the column chooser, notice when we drop the column chooser down we see
all those six columns here, now, what if I want to exclude a specific column? Let's say for example
we don't want to display department name in the column chooser, and that's easy to do, all we need
to do is on the respective set this boolean property ShowInColumnChooser to false.
Now, in the column chooser notice we don't have department name column, but it is displayed in
the data grid, so if we hide a column in the column chooser then the end user will not have
the ability to dynamically show or hide that specific column, it will always be displayed in
the data grid. At the moment in the data grid toolbar we have a button for column chooser
and when we click it, the column chooser opens. We can also do exactly the same thing on a click of
an external button. Let's actually do that. First, let's bring in Syncfusion buttons namespace,
and then include a element here, set padding bottom, include a button,
wire up on click even handler, let's name it OpenColumnChooser.
The content on the button is also Open Column Chooser,
our obvious next step is to include this even handler,
let's do that in the code block right here, private async Task, the name of the even handler,
in the interest of time I've already created this property EmployeeGrid,
notice it's type SfGrid, so we're going to use this property to reference the data grid,
so on the data grid itself, let's include @ref and the value for this is our EmployeeGrid property,
and then in the event handler here, on the grid, that is on EmployeeGrid property
we have OpenColumnChooser() async method, this is an async method, so let's await its execution,
now when we click the button, we have the column chooser open, click on it again, it disappears,
at the moment we have column chooser right here, just below this columns drop down button
in the toolbar, what if we want to render this at a different location on the screen? Well, for that
we can use x and y coordinates that are passed as parameters to this OpenColumnChooserAasync(),
now the important point to keep in mind is, these x and y coordinates are relative
to the data grid itself, for example let's say we want this column chooser
to appear just below this button, exactly at the position where this data grid starts, so basically
we want the column chooser to align with the left and top edge of the data grid, for that we pass
0 as a value for both x and y coordinates, so let's actually do that, 0 for x and 0 for y,
now the column chooser pops up on the left hand side, we can also reorder these grid columns at
runtime by simply dragging and dropping them, and to enable column reordering
all we need to do is, on the data grid set this boolean property - AllowReordering to true,
notice now we are able to click on a column header and drag it to the desired position in the grid,
we also have a visual clue notice, at the moment we have a visual clue
between first and last name columns, so if I drop the Date of Birth column now,
it is placed between first and last name columns, by default we're able to reorder
every column in the data grid, what if we don't want to allow a specific column to be reordered,
for example let's say we don't want to allow department name column to be reordered,
well for that on the respective grid column simply set AllowReordering boolean property to false.
Now, notice you're not able to drag and drop department name column,
its position in the data grid is fixed, at the moment to reorder columns we drag and drop,
can we do the same in code? Yes, we can, let's actually reorder first name and last name columns,
so on this button let's change the content to Reorder First Name and Last Name Columns,
let's also change the event handler name to keep it meaningful, let's call it ReorderColumns,
scroll down and change the name of the even handler here as well, and on the data grid
notice we have ReorderColumnAsync() method, and then we specify our columns that we
want to reorder, in our case we want to reorder FirstName and LastName columns.
Notice, every time we click this button, first and last name columns are reordered, now, notice the
name of this method ReorderColumnAsync(), the word column is singular, basically
we are reordering first name to last name and last name to first name, one to one column reordering,
we also can reorder multiple columns, basically we can reorder first and last name columns to
the position of gender column, and gender column to the position of first name column,
and to be able to do that we actually have ReorderColumnsAsync(), the word Columns is plural,
and when I hover the mouse over, take a look at the two parameters, fromFieldNames parameter,
it's actually a List which means we can specify multiple columns,
let's actually do that, we can either pass an array or a list, let's actually pass an array,
so in from fields we have first and last name columns, and in the to field let's specify gender.
Notice, now when we click this button, these two columns first name and last name
are reordered to the position where we have this gender column
and this gender column is reordered to the position where we have this first name column,
let's actually click the button, notice the columns are reordered as expected.
Syncfusion data grid also allows column width to be resized dynamically at runtime,
again same idea, to enable column resizing simply set AllowResizing boolean property to true,
notice when I move the mouse pointer onto the right edge of any column, the pointer changes
and now I'm able to increase or decrease the width of a column, at the moment we are able to resize
every column in the grid, and that's because I've set this boolean property
AllowResizing to true at the data grid level, this property is also available at the
level, so this means if I want to exclude this specific column in this case Department Name from
being resized, we simply set AllowResizing on this specific to false
Auto resizing is also supported, let me actually explain what I mean, we resize a column by
dragging the right edge of that column, at the moment first name column is resized, now when we
move the mouse pointer again to the right edge of the column, the pointer changes and at this point
instead of dragging the column, if I simply double click, notice what happens, the column resizes,
auto resizing automatically resizes the column width to the widest cell content,
on a given we can also include minimum and maximum width,
and then when we actually resize that column we are restricted to that defined minimum
and maximum width, let's actually look at this in action, let's specify
minimum width to 200 pixels and maximum width to 300 pixels on this FirstName column.
At the moment, the minimum width of this first name column is 200 pixels
and maximum is 300 pixels, notice what happens when I try to resize this column, I'm restricted
by those values, I'm not able to resize this column beyond those defined min and max values,
finally column menu, it has options to integrate data grid features like sorting, grouping,
filtering, column chooser etc, to enable column menu set ShowColumnMenu boolean property to true,
now next to every datagrid column we have these three vertical dots, and when we click on it,
we see this menu here, and this is called column menu, at the moment we have these two features
autofit and column chooser, in addition we also want to be able to group columns,
ungroup and filter, for that, in the code block let me introduce a property,
all these strings that is Autofit, AutofitAll etc are the features that we want in the column menu,
our next step is to tie this property to the data grid and for that,
on the data grid we use ColumnMenuItems property, and then specify this property as the value
Notice, now we have grouping and filtering options in the column menu, but grouping and ungrouping
is disabled, why is that? Well, that's because we did not enable grouping on the data grid,
so let's AllowGrouping and let's also AllowFiltering,
finally let's also specify filtering and grouping settings, basically we want to show
grouped column in the data grid and we want to use a checkbox type filter, if you're new
to grouping and filtering we discussed them in detail in parts 13 and 14 of this video series,
now, when we click on the three dots, we can group data by this gender column,
and the data is grouped by gender, and when we click on the same three dots again, ungroup is
now enabled and when I click this, the data is ungrouped, similarly we can filter data as well,
we have checkbox like filter, here is the complete list of strings that you can use to
customize menu items in the datagrid column menu. That's it in this video. Thank you for listening.