toolbar with custom button

11 posts, 0 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 12 Mar 2013 Link to this post

    Hello,
    1.I saw for toolbar a .custom() method.this is not a command?how can i put a custom command,that does something when i click on it?
    2.When adding a create command to the toolbar what is the condition to appear in the edited line the update or cancel buttons?

    Regads,
    Daniel
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 14 Mar 2013 Link to this post

    Hi Daniel,


    1. The Custom method indeed defines a custom command. You could specify an Action to be invoked using the Acton method.
      E.g.
      .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Custom().Text("Click me").Action("myAction", "myController");
        })


    2. The update and cancel buttons will appear in the edited line if there is an edit command defined in some Grid column.
      E.g.
      columns.Command(command => command.Edit());

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 14 Mar 2013 Link to this post

    Hello,
    1. i noticed that i have an .Action method that is good,but i would like to have that click event,just like a custom command in the grid,here there is no .Click() method,so i would like to have some event handler if i click on that command on toolbar.or is not possible?only by creating a template on toolbar and use that element's events?

    2.in this case how can i make to appear those two buttons save/cancel?

    P.S:the whole ideea was to put some images instead text, on Add/Edit/Delete commands,and i found out for another post, that  is not possible,only if i create a custom template for each action.

    Regards,
    Daniel
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 14 Mar 2013 Link to this post

    Hello Daniel,

    1. Yes, you could create a toolbar template. You could also add an Id attribute to the button and handle it's click event.
      E.g.
      toolbar.Custom().Text("Click me").HtmlAttributes(new { id = "customCommand" });

      <script>
        $("#customCommand").click(function (e) {
            e.preventDefault();
            //put custom logic here
        });
      </script>
    2. As stated in my previous answer, if you have an Edit command defined in some column, the Update and Cancel buttons will appear automatically for newly added or edited rows as shown in this Demo.

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 15 Mar 2013 Link to this post

    The ideea is that i do not have edit button in the grid's row,because i want to use a template,as a partial view,under the grid,and when i press add,open that view for insert.
    But anyway,i did not know that custom() can have a click event on client-side or with jquery i can bind an click event to any html element?

    Thanks again for the ideea.
    Daniel
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 15 Mar 2013 Link to this post

    Hello Daniel,


    You could add any html attributes via the HtmlAttributes method. Adding an Id to the custom toolbar button is just a sample solution for the current scenario. Regarding your second question, yes you could bind a click event to any html element using jQuery.

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 18 Mar 2013 Link to this post

    Ok,thank you,i will try out your ideea.
  9. Mohan
    Mohan avatar
    15 posts
    Member since:
    Apr 2011

    Posted 31 May 2013 Link to this post

    Hello,
    How would you do this with a Kendo UI Grid built in Javascript. Can you point me to some examples...?
  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 04 Jun 2013 Link to this post

    Hi Mohan,


    To achieve this in a Grid for Kendo UI Web, you should add the custom command to the list of toolbar commands.
    E.g.
    $("#grid").kendoGrid({
        ....
        toolbar: ["create", "save", "cancel", { text: "Custom"}],
    });

    and attach the event handler manually.
    E.g.
    $("#grid").on("click", ".k-grid-Custom", function(){
        //custom actions
    });

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. hans
    hans avatar
    1 posts
    Member since:
    Aug 2010

    Posted 06 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

    The custom action works find, but how can I pass parameter to the action?
    Like: The id of the current selected item of the grid


    Hans
  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 09 Feb 2015 Link to this post

    Hello Hans,

    You could retrieve the currently selected item and it's id in the click event handler.
    E.g.

    $("#grid").on("click", ".k-grid-Custom", function(){
        var grid = $("#grid").data("kendoGrid");
        var selected = grid.dataItem(grid.select());
        var id = selected.ProductID;
        //custom actions
    });

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready