Place command toolbar at bottom of the grid

[Jark Monster]

Is this a standard piece of functionality?

If so, how do you do it with a standard grid?

If it's not, are there currently any plans for it in future releases?

Thanks!

[Jark Monster]

For anybody else who finds this.  I posted this up on Stack Overflow and got a working reply.

http://stackoverflow.com/questions/12501427/kendo-ui-place-command-toolbar-at-bottom-of-grid/12514024#12514024

[Gal]

how can this be done using  

[Alexander Popov]

Hello,

Here is an example that uses the kendoWidgetCreated event to move the toolbar at the bottom, I hope it helps.

Regards,
Alexander Popov
Telerik

 

 

[Gal]

10X works like a

[Pham]

How can I place toolbar Add button) in the header column of Update, Delete button

[Gal]

Hi Pham 

 You can use the Columns Header Template to achieve the required behaviour.

 

Regards,

Gal Pasternak Shamlikashvili 

OOONA 

[Pham]

Hi Gal 

I use  and I add to . But I don't know how to add command Create new record to grid header. This is my grid 

@model IEnumerable<dynamic>
@(
 Html.Kendo().Grid(Model).Name("Grid")
                .DataSource(ds => ds.Ajax()
                                .Model(m =>
                                {
                                    m.Id("Id");

                                    m.Field("Name", typeof(string));
                                    m.Field("Price", typeof(decimal));
                                    m.Field("Quantity", typeof(decimal));
                                    m.Field("ExpiredDate", typeof(DateTime));
                                })
                        .Read(r => r.Action("Read", "Home"))
                        .Update(u => u.Action("Update", "Home"))
                        .Destroy(u => u.Action("Destroy", "Home"))
                        .Create(u => u.Action("Create", "Home"))
                )
                .ToolBar(toolBar => toolBar.Create())
                .Columns(columns =>
                {

                    columns.Bound("Name");
                    columns.Bound("Price").Format("{0:c}");
                    columns.Bound("Quantity");
                    columns.Bound("ExpiredDate").Format("{0:dd/MM/yyyy}");
                    columns.Command(command =>
                    {
                        command.Edit();
                        command.Destroy();
                    });
                })
                .Editable(editable => editable.TemplateName("ProductItem").Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                )

                .Sortable()
                .Filterable()
)

Can you help me.

[Gal]

Hi

 I'm not using MVC I'm using AngularJs but this jQuery works ok. 

Header Template Dojo

 

Regards,

Gal Pasternak Shamlikashvili 

OOONA 

[Karol]

[quote]Alexander Popov said:Hello,

Here is an example that uses the kendoWidgetCreated event to move the toolbar at the bottom, I hope it helps.

Regards,
Alexander Popov
[/quote]

Hi Alexander - unfortunately it doesn't work once scrollable is set to false :(
Can you help please?

[Karol]

I've actually managed to solve that problem amending following line:

$scope.myGrid.element.find(".k-grid-toolbar").insertAfter($scope.myGrid.element.find(".k-grid-content"));

to:

$scope.myGrid.element.find(".k-grid-toolbar").insertAfter($scope.myGrid.element.find("table[role=grid]"));

- not sure if it's the right way to solve it.

[Antony]

Here is my simple jQuery solution for an MVC grid named ValuesGrid. I tweaked the toolbar style so that my Save and Cancel buttons look like stand alone buttons at the bottom right of the grid :

.k-grid-toolbar {
   float: right;
   background-color: white;
}

 

$("#ValuesGrid").find(".k-grid-toolbar").insertAfter($("#ValuesGrid table"));

[Gregor]

I did it with an older version like this:

   $scope.mainGridOptions = {
        toolbar: '<a download="MyOrders.xlsx" class="k-button" ng-click="excel()" id="export">Excel</a>',

.....

}

[Gregor]

I did this with an older version like this:

   $scope.mainGridOptions = {
        toolbar: '<a download="MyOrders.xlsx" class="k-button" ng-click="excel()" id="export">Excel</a>',

...}