JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Blazor Grid, Custom command handling example

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 14, 2023 at 2:06 pm #108680
    oliver.aldrian
    Participant

    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

    September 15, 2023 at 7:33 am #108685
    oliver.aldrian
    Participant

    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?

    September 15, 2023 at 9:33 am #108687
    svetoslav_borislavov
    Participant

    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/

    September 15, 2023 at 10:53 am #108688
    oliver.aldrian
    Participant

    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?

    September 15, 2023 at 11:18 am #108689
    ivanpeevski
    Participant

    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.
    September 15, 2023 at 11:36 am #108692
    oliver.aldrian
    Participant

    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

    September 15, 2023 at 11:56 am #108693
    ivanpeevski
    Participant

    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/

    September 15, 2023 at 12:11 pm #108694
    oliver.aldrian
    Participant

    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?

    September 15, 2023 at 12:30 pm #108695
    ivanpeevski
    Participant

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.