Custom Command Button in Toolbars

[Jessie]

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

[Vladimir Iliev]

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

[Sucre]

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.

[Vladimir Iliev]

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

[Narasimha]

How we write the same for Kendo UI grid with callback.

[Vladimir Iliev]

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:

• Kendo UI Grid: toolbar.template option

Regards,
Vladimir Iliev
Telerik

 

 

[John]

The Dojo example at "Kendo UI Grid: toolbar.template option" doesn't seem to work.

[Alex Hajigeorgieva]

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

[Thomas]

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#);" });
})

 

[Alex Hajigeorgieva]

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

[Vijaya Raju Manda]

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.
        })
    })

 

[Alex Hajigeorgieva]

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

[Sanket]

.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()" });
                              
                                })

[Thomas]

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);
    }