Custom Command Button in Toolbars

14 posts, 0 answers
  1. Jessie
    Jessie avatar
    4 posts
    Member since:
    Feb 2012

    Posted 28 Nov 2012 Link to this post

    Hi Guys,

    Has any one attempted to add custom command button in the toolbar? Like the one seen in the inline editing, also how to wire up those command button to custom events.

    Thanks,
    Jessie
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 30 Nov 2012 Link to this post

    Hi Jessie,

     
    Basically you can add link with class "k-button" in the Toolbar template and use the click event for example to call custom function. Please check the example below:

    .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Cutom Command</a>"))

    function customCommand() {
        //execute your custom logic
    }

    Also please note that the Grid uses the jQuery Delegate to wire up the standard Grid commands to any link that contains the following classes:

    • for add record: k-grid-add
    • for delete: k-grid-delete
    • for update: k-grid-update
    • for edit: k-grid-edit
    • for cancel: k-grid-cancel
    • for batch editing cancel: k-grid-cancel-changes
    • for batch editing save: k-grid-save-changes

    For example the following template will add new record to the Grid and also execute your custom command:

    .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' href='#' onlick='customCommand()'>Add new record</a>"))


    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sucre
    Sucre avatar
    1 posts
    Member since:
    Jan 2013

    Posted 10 Jan 2013 Link to this post

    Hi Vladimir Iliev
       How to do this by js.
       My toobar code :toolbar: [{ name: "create", text: "Add" },{ name: "edit", text: "Edit" }].But how to add custom events?
       Thanks,
       sucre.
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 14 Jan 2013 Link to this post

    Hi Jessie,

     
    Basically you should define Toolbar template and follow the guides from my previous post. For more information how to define Toolbar template you can check this demo.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Sanket
    Sanket avatar
    11 posts
    Member since:
    Apr 2013

    Posted 08 Apr 2013 Link to this post

    .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Cutom Command</a>"))


    doesnt fire the  customCommand() event  try with 


    .ToolBar(toolBar =>
                                    {
                                  
                                         toolBar.Custom().Name("DeleteI").Text("Delete").Url("#").HtmlAttributes(new { onclick = "onDelete()" });
                                  
                                    })
  6. Narasimha
    Narasimha avatar
    1 posts
    Member since:
    Jan 2016

    Posted 09 Mar 2016 in reply to Vladimir Iliev Link to this post

    How we write the same for Kendo UI grid with callback.
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 10 Mar 2016 Link to this post

    Hello Jessie,

    Please note that the same option is available for the Kendo UI Grid and the same template can be used inside it - for more information you can check the Grid API:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. John
    John avatar
    1 posts
    Member since:
    Aug 2014

    Posted 31 May 2017 in reply to Vladimir Iliev Link to this post

    The Dojo example at "Kendo UI Grid: toolbar.template option" doesn't seem to work.
  9. Thomas
    Thomas avatar
    3 posts
    Member since:
    Sep 2015

    Posted 01 Jun 2017 Link to this post

    Redefining the href property of the link seems to work.

    toolbar.Custom().Text("Import").HtmlAttributes(new { href = "javascript:onImport(#=Id#);" });

    function onImport(e)
        {
            alert(e);
        }

  10. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 02 Jun 2017 Link to this post

    Hi John,

    Thank you for letting us know. I suppose it might have been a glitch with the Dojo as we recently made some changes. Now it seems to be up and running:


    Thomas, alternatively, you may add a click handler or use the same approach as shown in the JavaScript API here:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-toolbar.template

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Thomas
    Thomas avatar
    3 posts
    Member since:
    Sep 2015

    Posted 06 Jun 2017 in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    I saw in the documentation the part where you redefine the entire template but the goal here was to keep the default method for creating a new entity in the toolbar and add a custom command.

    .ToolBar(toolbar => {
                toolbar.Create().Text("Add option").HtmlAttributes(new { @style = "font-weight:normal" });
                toolbar.Custom().Text("Import").HtmlAttributes(new { href = "javascript:onImport(#=Id#);" });
    })

     

  12. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 07 Jun 2017 Link to this post

    Hi Thomas,

    In this case, you may use the below alternative to attach a click handler:

    .ToolBar(toolbar =>
    {
      toolbar.Custom().Text("Import").Name("import").Url("#");
    })
     
    <script>
    $(function () {
     $("#grid").find(".k-grid-toolbar").on("click", ".k-grid-import", function (e) {
       e.preventDefault();
       console.log("import clicked!");      
     });
    });
    </script>

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Vijaya Raju Manda
    Vijaya Raju Manda avatar
    1 posts
    Member since:
    May 2018

    Posted 17 Oct 2018 in reply to Alex Hajigeorgieva Link to this post

    Hi  Alex Hajigeorgieva,

    onclicking of this import button i need to render  cshtml template popup which can do create, updates please help on this?

    <script>
    $(function () {
     $("#grid").find(".k-grid-toolbar").on("click", ".k-grid-import", function (e) {
       e.preventDefault();
       //console.log("import clicked!");  

    // here want to call template that is custom add multiple records button. 
     });
    });
    </script>

    below is my code

     .ToolBar(toolbar =>
                    {
                        toolbar.Create();
                        toolbar.Custom().Name("multipleRecords").Text("Add multiple records");
                        toolbar.Custom().Name("expandAll").Text("Expand All");
                        toolbar.Custom().Name("collapseAll").Text("Collapse All");
                    })
                    .ClientDetailTemplateId("orderPhrase-template")
                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderPhraseSet").AdditionalViewData(new { OrderPhraseSetId = "#=OrderPhraseSetId#" }).DisplayDeleteConfirmation(false))
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                    {
                        model.Id(c => c.OrderPhraseSetId);
                    })
                    .Read(read => read.Action("ReadPhraseSets", "OrderPhrase").Data("filterOrderId"))
                    .Create(create => create.Action("CreatePhraseSet", "OrderPhrase").Data("filterOrderId"))
                    .Update(update => update.Action("UpdatePhraseSet", "OrderPhrase"))
                    .Destroy(destroy => destroy.Action("DestroyOrderPhraseSet", "OrderPhrase"))
                    .Events(e => e
                    .Error("errorHandler")
                    .RequestEnd("onRequestEndPhraseSet"))
                    .Sort(s =>
                    {
                        s.Add("SortOrder");
                    })
                    )
                    .Events(e => e

    =========================

     $(function () {
            $('.k-grid-multipleRecords').click(function (e) {
               //here need to render 'OrderPhraseSet.cshtml' separate (this is not a action just template ) template.
            })
        })

     

  14. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 19 Oct 2018 Link to this post

    Hello, Vijaya,

    You may use the Kendo UI Window to load content with ajax:

    https://demos.telerik.com/aspnet-mvc/window/ajax

    IYou would need to add the window widget on the page and when the custom toolbar button is  clicked, you can use the client-side open() method to show it in a modal:

    var wnd = $("#customPopup").data("kendoWindow");
    wnd.center().open();

    Let me know in case you had something else in mind.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top