Place command toolbar at bottom of the grid

11 posts, 0 answers
  1. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 10 Sep 2012 Link to this post

    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!
  2. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 21 Sep 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 17 Nov 2014 in reply to Jark Monster Link to this post

    how can this be done using angular ? 
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 02 Dec 2014 in reply to Alexander Popov Link to this post

    10X works like a charm !
  7. Pham
    Pham avatar
    12 posts
    Member since:
    Jun 2015

    Posted 05 Jun 2015 Link to this post

    How can I place toolbar ( Add button) in the header column of Update, Delete button ?
  8. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 05 Jun 2015 in reply to Pham Link to this post

    Hi Pham 

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

     

    Regards,

    Gal Pasternak Shamlikashvili 

    OOONA 

  9. Pham
    Pham avatar
    12 posts
    Member since:
    Jun 2015

    Posted 05 Jun 2015 in reply to Gal Link to this post

    Hi Gal 

    I use Columns Header Template and I add normal html control to column header. 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.

    THank

  10. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 06 Jun 2015 in reply to Pham Link to this post

    Hi

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

    Header Template Dojo

     

    Regards,

    Gal Pasternak Shamlikashvili 

    OOONA 

  11. Karol
    Karol avatar
    2 posts
    Member since:
    Oct 2015

    Posted 24 Nov 2015 in reply to Alexander Popov Link to this post

    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

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

  12. Karol
    Karol avatar
    2 posts
    Member since:
    Oct 2015

    Posted 24 Nov 2015 in reply to Karol Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready