Blazor Grid, Custom command handling example

[oliver.aldrian]

Hi,

 

there is a general description of custom grid command handling in the API docs, but there is no example.

 

Can you please provide an example of how to do a custom action instead of the predefined command (eg. replace the delete command with something else)

 

Much appreciated,

KR

Oliver

[oliver.aldrian]

one additional question:

can I make the visibility of a command column icon (eg. trashbox for delete) dependent on the item that is displayed in the row?

[svetoslav_borislavov]

Hi,

Could you please check this topic and see if it helps:
https://www.htmlelements.com/forums/topic/custom-gridcolumnmenu/

If you still face the problems, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[oliver.aldrian]

This is no solution for Blazor.

Calling a JS function is not useful if I want to actually do something in Blazor.

 

Can you provide an example how to use the CommandClicked of the Grid properly?

From the API docs I gathered that this event should give me the name, and a possiblity to cancel the default action? is this correct?

[ivanpeevski]

Hi Oliver,

Here is how you can use the OnCommand property to capture the command and the clicked row:

@using Newtonsoft.Json.Linq;

<Grid DataSource=”@Clients” Editing=”@editing” OnCommand=”OnCommand”>….</Grid>

@code{
….
private void OnCommand(object obj)
{
dynamic commandObject = JObject.Parse(obj.ToString());
string commandName = (commandObject[“name”]).ToObject();
int commandRowId = (commandObject[“id”]).ToObject();
}

}

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 1 year, 2 months ago by ivanpeevski.
• This reply was modified 1 year, 2 months ago by ivanpeevski.

[oliver.aldrian]

hi!

 

that almost solves it for me.

In the API docs is writing about being able to set handled to the event in order to not cause the default handler to run.

How would I do that? I don’t see a handled property in the object?

 

KR

[ivanpeevski]

Hi Oliver,

 

Blazor runs asynchronously from JavaScript, so the handled property is not available.

If you wish to change the default behavior of the Delete command, for example, you can change its “Command” name to a custom name. For example:

CommandColumnDelete = new GridCommand() { Visible = true, Command=”customDeleteCommand” },

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[oliver.aldrian]

ok that seems to work.

 

just weird that the handled parameter is specifically mentioned in the api docs.

 

copied from https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=features right upper hand “Quick Actions” – “API docs”
<table class=”table”>
<tbody>
<tr>
<td>OnCommand</td>
<td>Action<object></td>
<td>N/A</td>
<td>Callback function, which is called when a command is executed. The name argument is the command’s name. The command argument is the command’s function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command’s behavior.</td>
</tr>
</tbody>
</table>
 

 

I assume the documentation is not correct then?

[ivanpeevski]

Hi Oliver,

 

We share the same property descriptions for the JavaScript and Blazor API versions, since they are generally identical. The “handled” parameter is one of the few exceptions which are missing for the Blazor version.

We will consider updating the Blazor API to reflect that.

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts