How to add multiple command buttons in the same column?

7 posts, 1 answers
  1. Mohit
    Mohit avatar
    8 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2013 Link to this post

    I want to add multiple command buttons (let's say, for View, Edit and Print) in a single grid column so that I see them for each row.
    I was also able to add icon to custom command and I was able to easily add one command button in one column as explained in the custom command demo but I really want all three "buttons/icons" in the same column.

    Any suggestions?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Feb 2013 Link to this post

    Hello Mohit,

    You can add multiple commands in one column by defining columns.command property as array. As an example:
    columns: [
        { field: "foo", title: "Foo Field" },
        {
            command: [
                //define the commands here
                { name: "edit", text: "Edit" },
                { name: "destroy", text: "Delete"},
                { name: "custom1", text: "MyCustom-1" },
                { name: "custom2", text: "MyCustom-2" }
            ],
            title: "Commands"
        }
    ],

    I hope this will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mohit
    Mohit avatar
    8 posts
    Member since:
    Feb 2013

    Posted 28 Feb 2013 Link to this post

    Alexander, can this also be done via the grid html helper (for razor)?
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Mar 2013 Link to this post

    Hello Mohit,

    Yes it can be done.
    .Columns(columns => {
        columns.Bound(e => e.FirstName);
        columns.Bound(e => e.LastName);
        columns.Bound(e => e.Title);
        columns.Command(command => {
            command.Custom("viewDetails").Click("showDetails");
            command.Custom("AnotherCommand").Text("Another Command");
            command.Custom("Custom").Text("Custom Command");
        });
    })


    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mohit
    Mohit avatar
    8 posts
    Member since:
    Feb 2013

    Posted 30 May 2013 Link to this post

    Ah, works perfectly. Thanks Alexander!
  7. Andrew
    Andrew avatar
    1 posts
    Member since:
    Jul 2012

    Posted 17 Jun 2013 Link to this post

    Is there a way to do this at the grid level so you could have multiple "Add New Item" buttons for instance?
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Jun 2013 Link to this post

    Hello Andrew,

    Having "add new item" button on each row does not make much sense. Usually the edit/delete commands are rendered per row because they indicate row editing/deleting.

    Anyway, if you insist to have a multiple "add" buttons, you may define a custom command and on click to call the addRow method.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready