Hey guys, I am Venkat and this is part 21 of web development with Blazor video series. In
this video we'll discuss the standard as well as custom command buttons that we can use in a data
grid. To perform CRUD operations in a data grid we need these standard buttons - Add, Edit, Update,
Delete and Cancel. To include them in a data grid we set Toolbar property to a list of string,
and the individual strings in the list must be - Add, Edit, Update, Delete, Cancel. We discussed
these buttons and performing CRUD operations in detail in parts 18, 19 and 20 of this video
series. Now, in the interest of time here's what I have done already, in the "pages" folder I have
added a new component "DatagridButtons.razor" and notice the page directive here,
I have intentionally set it to a single forward slash, so when we run this project and navigate
to the root application URL this is the component that we see and here we have a Syncfusion data
grid and notice the toolbar property is set to a list of string with those standard strings add,
edit, update etc. So, at this point if we run the project and take a look at it in the browser,
notice as expected we have the data grid toolbar with those standard buttons - add,
edit, update etc. Now, here's what we want to do, we want to leave these two buttons
Add and Cancel in the toolbar right here, but then move these three buttons - Edit, Update and Delete
into a separate column in the data grid itself, so against every row in the data grid we want these
three buttons - edit, update and delete, basically here is what we want to be able to do, when the
data grid is initially rendered against every row we want to display these two buttons - Edit
and Delete, when we put one of these rows in edit mode then we want to hide these two buttons - Edit
and Delete, instead display Save and Cancel in that row that we are currently editing,
when we take the row out of the edit mode then the opposite should happen, hide these
two buttons Save and Cancel, and instead display Edit and Delete, this sounds like a lot of work
but actually very easy and straightforward with the Syncfusion data grid. In the data grid just
like these grid columns first name, last name, gender etc, we include another new ,
set the HeaderText to whatever you want, in our case let's just set it to actions,
and let's also set the width of this column to 110 pixels, here is the important bit,
inside this we want data grid buttons, in Blazor data grid terminology
these buttons are called , so we first include grid command columns component,
notice the name of this component, plural, inside this
component we want four edit and delete, update and cancel,
so inside this component we include another component which has got the same name,
the only difference here is it doesn't have an s at the end, so singular ,
next we specify the type of button we want - edit update delete etc, for that we set the type
attribute, and the value for this is CommandType dot we can see all the different button types,
in our case we want Edit, and then we specify some additional options for this button,
and we do that using ButtonOption property, when I hover the mouse over, we can see it is expecting
an object of type CommandButtonOptions, so we create a new instance of CommandButtonOptions,
notice when I press ctrl space, from the intellisense we can see all the properties
of this CommandButtonOptions class. Now, if we want text on the buttons like edit, delete etc,
we simply set this Content property, but in our case for these buttons that is edit, delete etc,
we want icons instead of text, so we set these two properties CssClass and IconCss,
so we set icon css to two css classes e-icons and we want edit icon so e-edit, and css class equals
e-flat. There are three button styles that we can use in addition to flat, we also have round
and outline, we'll see them in action in just a bit. Now, in addition to this edit button
we want three other buttons delete, cancel and update, so let me include the html here,
notice the html is very similar to this button html, the only difference is the type of button
we want, so we want to edit, save and cancel buttons, and here the css class is different,
so for delete button we are using e-delete, for update e-update etc, so let's save these changes
and take a look at the browser. As expected, in every row we have edit and delete buttons,
when we click the edit button, the row is in edit mode and both the buttons are replaced with
save and cancel, and when we click the cancel button, the row is out of edit mode, and I click
the edit button again, the row is in edit mode, let's change first and last name and then when
we click save, the data is saved, to confirm it is saved in the database, let's reload the web page,
we still have our changes, this means these are actually saved in the underlying Employees
database table, we discussed how to implement this in our previous videos in this series. Notice,
at the moment in the toolbar we still have these buttons - edit, update and delete,
to remove them from the toolbar, it's very simple, from the toolbar property in the list of strings
that we have, remove these three strings - edit, update and delete, there we go, the buttons are
gone from the toolbar, these buttons edit, update, delete and cancel are standard data grid buttons,
now, here's what we want to do, we want to include a new column in the data grid, and in this column
we want to include two custom buttons U for uppercase, L for lowercase, when we click the U
button, we want to convert all the letters in the first name column to uppercase, and when we click
L button, do the opposite, convert the letters to lowercase, even for custom buttons same idea,
we include a grid column and inside that we include these two components click command columns
and grid command column, actually in the interest of time let's make a copy of this html and
then change the bits that are required, first let's change the header text to more actions,
and on a custom button we don't need this type attribute, so let's remove that,
and with this button we don't need icons, we want letter U as the text on the button,
so instead of icon css property let's set content property, just like this U button we need another
button for lowercase, so let's actually copy this button html and then replace these three buttons,
and then change the content to L, now on both these buttons they're using the same css class
e-flat, in addition to this class, we also have e-round and e-outline, actually on this button
let's use e-round class, next we need to wire up click event handler for both these buttons,
and we do that using component, we already have this component on this grid,
and when any of our custom buttons are clicked it raises CommandClicked event, so let's handle that,
let's call the event handler OnCommandClicked, we don't have this even handler yet, we'll create
it in just a bit. Notice, when I hover the mouse over this event, we can see from the intellisense
the event handler receives a parameter of type CommandClickedEventArgs,
so the type of value is Employee because our grid is binding to employee objects,
so let's place this event handler OnCommandClicked in the code block
Now, here's the important bit to keep in mind, we have two buttons but the even handler is only one,
so when any of the buttons is clicked it is the same even handler that is called,
so inside this evenhandler method we need to determine which button is clicked,
for that we can use this incoming arguments parameter, so if args.CommandColumn.ButtonOptions
dot if you remember we have set the content on the U button to capital U
Now, using this content property to determine which button is clicked,
it's not the most elegant way, because when users change the content of the button
to something else other than U, then this even handler will not work as expected,
actually there's a feature request raised to include a property like Id or Name
on this ButtonOptions class so we can use that property to determine which button is clicked,
for now I'm afraid we have to rely on this content property, so in our example when this U button is
clicked what we want to do is convert the letters in first name column to uppercase, for that, again
we can use the incoming args parameter, on that we have RowData which will give us the employee row,
and on that we have FirstName column, so we want to convert first name to uppercase so we again use
args.RowData.FirstName.ToUpper(), after the data is changed let's not forget to refresh the grid
so we can see the changes, else we want to do the opposite convert the first name
to lower, and for that we use ToLower() method, save our changes and take a look at the browser,
there we go, we have our two custom buttons as expected, when we click the U button,
the first name is converted to uppercase, and when we click L, to lowercase
That's it in this video. Thank you for listening.