toolbar: configuration

[Brandon]

Right now I am using:

$("#gridEmailAddress").kendoGrid({

.

.

toolbar: ["create", "save", "cancel"]

});

I like the current toolbar buttons, but I would like to add a custom button.

How can I add a custom button and specify what function it calls?

[Brandon]

Not sure if this is the best way to do things, but I just made a second 'create' button and then changed it's class:

$("#gridEmailAddress").kendoGrid({

    .

    .

    toolbar: ["create", "create", "save", "cancel"]

});

 

$(".k-grid-add")[1].lastChild.replaceWholeText("Custom Text");

$(".k-grid-add:eq(1)").addClass('k-grid-custom');

$(".k-grid-add:eq(1)").toggleClass('k-grid-add');

 

[Rosen]

Hello Brandon,

You may define custom command similar to the following:

toolbar: [{
    text: "Custom Text",
    className: "k-grid-custom",
    imageClass: "k-add"
}, "create", "save", "cancel"]

Regards,
Rosen
the Telerik team

[Motahera]

Hi,
I am trying to use the Toolbar template and the commands in the same toolbar, which means the filter dropdown in the following demo-

http://demos.kendoui.com/web/grid/toolbar-template.html
and
toolbar: ["save", "cancel"]

How to configure the toolbar to use both command buttons and filter dropdown?

[Rosen]

Hello Motahera,

You may achieve this by using custom toolbar command template as shown in the following jsFiddler sample:

Regards,
Rosen
the Telerik team

[Motahera]

Thank you.

[jc mag]

In this example:

toolbar: [{
    text: "Custom Text",
    className: "k-grid-custom",
    imageClass: "k-add"
}, "create", "save", "cancel"]

how do you manage the click on the new button?

(is it possible to do the same as that:

new kendo.data.DataSource({

               transport: {

                update: // can we specify our custom command here ?
                        { url :

....

?)

[Rosen]

Hello,

I'm afraid that transport is not directly related to the Grid's commands, thus adding additional method will not map to the custom commands. In order to run some code when custom command button is click you should attached a click handler to the button itself. For example:

$(".k-grid-custom").click(function() {
 // do some stuff here
});

Regards,
Rosen
the Telerik team

[David Jensen]

Hi,
Can I put a one of your roll out menu inside the toolbar.

Something like the following -
 toolbar: [{
                                    text: "New Activity",
                                    className: "k-grid-custom",
                                    imageClass: "k-add"
                                },{
                                template: '<ul id="viewMenu">
                                                   <li> <img src="images/ViewAdd.png">
                                                          <ul>
                                                                  <li><a>New Template View</a></li>
                                                                  <li><a>New Activity View</a></li>
                                                                  <li><a>New File View</a></li>
                                                                  <li><a>New Review View</a></li>
                                                         </ul>
                                                   </li>    
                                               </ul>'
                            }],


then in script -


                $(document).ready(function() {
                        $("#viewMenu").kendoMenu({orientation:"vertical", direction:"bottom left", animation: {
                          open: { effects: "fadeIn" },
                          hoverDelay: 0
                         }});

[Rosen]

Hello Niels,

Indeed, you could place a Menu in the Grid's toolbar similar to the way you have described.

All the best,
Rosen
the Telerik team

[Vikas]

Hello,

Can I see this demo of Toolbar Template in batch editing mode in MVC HTML helpers mode. In my case when I add a dropdownlist in toolbar.template, the other buttons (i.e. Add new Item, Save Changes, Cancel Changes) doesn't appear in the grid header.
Can you please help.

Here is my code:
@(Html.Kendo().Grid<LSI.GEN2.DWC.Models.ConversionRowResult>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ConversionID).Visible(false);
        columns.Bound(p => p.Customer).EditorTemplateName("CustomerDropDownList");
        columns.Bound(p => p.Customer_Group).Title("Customer Group");
        columns.Bound(p => p.Group);
        columns.Bound(p => p.OptyID);
        columns.Bound(p => p.Primary_AE).Title("Primary Action Team");
        columns.Bound(p => p.Regional_VP).Title("Regional VP");
        columns.Bound(p => p.DW_Qtr);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
        toolbar.Template(
            @<text>
            <div class="toolbar">
                @(Html.Kendo().DropDownList()
                    .Name("Customer")
                    .OptionLabel("ALL")
                    .DataValueField("Customer")
                    .DataTextField("Customer")
                    .BindTo((System.Collections.IEnumerable)ViewData["Customers"])
                    .Events(e =>
                    {
                        e.Change("change");
                    })
            )
            </div>
            </text>
        );
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(p => { p.Refresh(true); p.PageSizes(true); })
    .Sortable()
    .Groupable()
    .Filterable()
    .ColumnMenu()
    .Navigatable()
    .Scrollable(scrollable => scrollable.Virtual(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(true)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ConversionID))
        .Create(create => create.Action("Conversion_CreateAJAX", "DWC"))
        .Read(read => read.Action("Conversion_ReadAJAX", "DWC"))
        .Update(update => update.Action("Conversion_UpdateAJAX", "DWC"))
        .Destroy(destroy => destroy.Action("Conversion_DeleteAJAX", "DWC"))
    )
)