Approved
Last Updated: 03 Oct 2019 10:44 by ADMIN
Bridge24
Created on: 29 Sep 2019 14:12
Category: Grid
Type: Feature Request
3
Grid toolbar should be a Kendo UI ToolBar

Hi, we use the grid "toolbar" property.  But, we found that the documentation of the kendoToolBar "standalone" offers more possibilities, like adding a type "separator", groups, toggle, ...

My question is:
When I create my grid, is it possible to get a reference to its containing kendoToolBar (if it's a complete kendoToolBar ?), that allow to add more complex items.

Something like: 

var kgrid = $('#grid1').kendoGrid({toolbar: [...]}).data("kendoGrid").

var kToolbar = $('#grid1 .k-grid-toolbar').data("kendoToolBar") // or kgrid._secret_property?

kToolbar.add({type: "separator"})

I tried that, but the kToolbar is undefined.

 

4 comments
ADMIN
Alex Hajigeorgieva
Posted on: 03 Oct 2019 10:44

Hello, Daniel,

Thank you for sharing all the advantages of replacing the Kendo UI Grid toolbar with the ToolBar widget. I have transferred the thread to the Feedback portal and you can find it here:

https://feedback.telerik.com/kendo-jquery-ui/1432164-grid-toolbar-should-be-a-kendo-ui-toolbar

I have added an additional vote to the bug report on your behalf in order to increase its priority. You will receive email notifications about future status changes.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Bridge24
Posted on: 01 Oct 2019 14:03

Yes, it would be nice if we can use exactly the same property that we can use in the kendoToolbar, when configuring the grid toolbar.

You can share the suggestion and my demo with your team.

The most trivial is "click: function...", that I can't believe we can't easily handle.

I understand that some "custom hard coded" items, like "pdf", "xls", need some implementation, but I am sure your team can handle them and add them in the real toolbar, as I did in our application.

About the "search" box, it's something we already implemented, and we want it on the toolbar directly, and your new feature is not exactly what we need.  I think that, if you re-write the grid toolbar property of the grid, you can add a special type "search", that can be used like "pdf", "xls" ...
So, the grid config can look like this: 

$('#grid1').kendoGrid({
...
toolbar: [
{name: "xls"}, // keep name attribute for "custom hard coded" grid features.  They will be replaced by the type button.
{name: "pdf"},
{type: "separator"}
{type: "button", text: "custom", click: myfunc},
{type: "spacer"},
{template: myTemplateForRightSideOfTheBar},
{name: "search"}, <-- suggestion!
]
})

p.s. another difference I had to handle: the icons are set using spriteCssClass in the toolbar, and the span get a k-sprite class. 
I had to remove it to use your icons lilke "k-icon k-i-copy", that I was able to use directly from iconClass property of the grid toolbar.
I think you can offer both, for those who want a sprite, and others who prefer icon.

Thank you

ADMIN
Alex Hajigeorgieva
Posted on: 01 Oct 2019 13:41

Hello, Daniel,

Thank you very much for sharing the answer to your question.

If you were looking for a way to add the new search panel functionality to your toolbar, you can use a toolbar template which features an element with .k-grid-search class and a child input. I have demonstrated this in the following forum topic:

https://www.telerik.com/forums/search-panel-and-toolbar-template#0ijru8paOkCBDfAt0n8YIg

Finally, to answer your question - why the Kendo UI Grid toolbar is not a Kendo UI ToolBar widget - the answer is that the Kendo UI Grid toolbar was around long before we made the ToolBar widget. If you feel that having a toolbar widget instead would benefit you and others, I can move this thread to our Feedback portal and that would allow people to vote for it. 

Let me know if you would like that along with the use case demonstrating the benefits of such implementation.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Bridge24
Posted on: 29 Sep 2019 22:09

I think I found a solution... what do you think?
1. create the grid with an empty toolbar, just to render the toolbar zone.
kgrid = $('#grid1').kendoGrid({..., toolbar: [], ...}).data("kendoGrid")
2. Convert the grid toolbar zone to a "real" kendoToolBar
var kbar = kgrid.wrapper.find(".k-grid-toolbar").kendoToolBar({}).data("kendoToolBar")
then use it with all the toolbar features that we can't, use in the grid toolbar, like groups, togglable, template, click,  ...
kbar.add({type: "button", text: "some text", click: fctDoJob});
kbar.add({type: "separator"});
...

example:

https://dojo.telerik.com/@foxontherock/iJufIfAx

If it's that easy, the question is: Why didn't you use a real kendotoolbar in the grid??

Thank you.