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

1 Answer 76 Views
Grid Menu
Medhanth
Top achievements
Rank 1
Veteran
Medhanth asked on 25 Feb 2022, 07:11 PM
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.

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 02 Mar 2022, 10:52 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Medhanth
Top achievements
Rank 1
Veteran
commented on 02 Mar 2022, 11:40 AM

How can i link navigation url for create and data-ng-click for refresh and clear referecens
Medhanth
Top achievements
Rank 1
Veteran
commented on 02 Mar 2022, 12:11 PM

.k-toolbar k-grid-toolbar{

 float: right;
        color: #f47b29 !important

}

above is not working. just am aligning icon to right

Medhanth
Top achievements
Rank 1
Veteran
commented on 02 Mar 2022, 06:59 PM

Is this can be acheived using bootstarp , so that i can be responsive?
Neli
Telerik team
commented on 07 Mar 2022, 09:49 AM

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

 

Tags
Grid Menu
Asked by
Medhanth
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Share this question
or