How to add menu item with 3 dots as show in image

[Medhanth]

A 3 dots icon will be used as indicated on the top on kendo grid and when the icon is clicked, a context menu will pop up with the following options:

Create New - When clicked, it will navigate the user to the Create New Item page

Clear Preferences - When clicked, it will clear the grid preferences,

Show All Columns - When clicked, all columns will show on the grid

Refresh - When clicked, reload the grid with the latest data

Export to Excel - When clicked, an excel will be generated of the current grid data

When the context menu is shown, clicking the 3 dots icon or outside the context menu area will hide the context menu.

[Martin]

Hello, Medhanth,

Here you will find a small Dojo example with a ContextMenu in the Grid Toolbar. You can use the Grid API to achieve the functionalities for the items of the menu.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

[Medhanth]

How can i link navigation url for create and data-ng-click for refresh and clear referecens

[Medhanth]

.k-toolbar k-grid-toolbar{

 float: right;
        color: #f47b29 !important

}

above is not working. just am aligning icon to right

[Medhanth]

Is this can be acheived using bootstarp , so that i can be responsive?

[Neli]

Hi Medhanth,

I would suggest you to change the style selector as follows: .k-toolbar.k-grid-toolbar{...}

Here is a Dojo where this is demonstrated.

To achieve a responsive toolbar in the Grid you could try to use the Grid toolbar template and change the appearance using media queries.

- https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Or another option is to initialize a  Kendo Toolbar and set the items.overflow property to 'auto'. Here is a Dojo example where this is demonstrated. 

Regards,

Neli