This is a migrated thread and some comments may be shown as answers.

toolbar: configuration

10 Answers 1197 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brandon
Top achievements
Rank 1
Brandon asked on 15 Dec 2011, 08:43 PM
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?

10 Answers, 1 is accepted

Sort by
0
Brandon
Top achievements
Rank 1
answered on 15 Dec 2011, 09:24 PM
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');
 

0
Accepted
Rosen
Telerik team
answered on 16 Dec 2011, 09:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Motahera
Top achievements
Rank 1
answered on 09 Feb 2012, 07:15 AM
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?



0
Rosen
Telerik team
answered on 09 Feb 2012, 12:22 PM
Hello Motahera,

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

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Motahera
Top achievements
Rank 1
answered on 09 Feb 2012, 03:14 PM
Thank you.
0
jc mag
Top achievements
Rank 1
answered on 16 Feb 2012, 08:01 PM
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 :
....
?)
0
Rosen
Telerik team
answered on 17 Feb 2012, 05:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David Jensen
Top achievements
Rank 1
answered on 22 Feb 2012, 11:09 AM
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
                         }});
0
Rosen
Telerik team
answered on 23 Feb 2012, 09:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vikas
Top achievements
Rank 1
answered on 07 Aug 2012, 02:29 PM
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"))
    )
)
Tags
Grid
Asked by
Brandon
Top achievements
Rank 1
Answers by
Brandon
Top achievements
Rank 1
Rosen
Telerik team
Motahera
Top achievements
Rank 1
jc mag
Top achievements
Rank 1
David Jensen
Top achievements
Rank 1
Vikas
Top achievements
Rank 1
Share this question
or