Hi,
I am trying to create a nav menu using the kendo Menu Component. My requirement is to make this nav menu similar to the dashkit nav menu. There are two major problems that I am currently facing
Problem with Making Responsive: In the web version, if we hover on a nav item that has children in the nav menu, it opens a submenu on the right side of that nav item. In the Mobile version, if we click on a nav item that has children, it opens a submenu on the right side same as the web version, but the submenu is outside of the viewable frame.
Showing Active navs: I looked for this in the forum, but unfortunately, I didn't find any proper solution for making the kendo menu nav items active.
DashKit Theme Reference: https://dashkit.goodthemes.co/index.html
Customize Setting:
Sample Vue Project: https://github.com/iamAdarshh/Kendo-Menu-Responsive
Hello,
In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.
I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?
Thanks
//This adds a custom template to my column menu
column.columnMenu = "CheckboxColumnFilterRender";
//This adds a custom icon and a custom color to my column header
headerClassName:"generic-filter-icon c-gray-600",
<templatev-slot:CheckboxColumnFilterRender="{ props }">
</template>
When using a template as below then the child items do not display:
<
template
>
<
kendo-menu
>
<
kendo-menu-item
text
=
"Baseball"
>
<
kendo-menu-item
text
=
"Top News"
></
kendo-menu-item
>
<
kendo-menu-item
text
=
"Radio Records"
></
kendo-menu-item
>
</
kendo-menu-item
>
<
kendo-menu-item
text
=
"Swimming"
>
<
kendo-menu-item
text
=
"Top News"
></
kendo-menu-item
>
<
kendo-menu-item
text
=
"Radio Records"
></
kendo-menu-item
>
</
kendo-menu-item
>
</
kendo-menu
>
</
template
>
The same problem can be seen in your docs under 'Basic Usage':
https://www.telerik.com/kendo-vue-ui/components/layout/menu/
Using 'ul' instead of 'MenuItem' it seems to work fine
There is a an example of menu, but how can I add router-link to menu item?
<kendo-menu-item text="Baseball">
<kendo-menu-item text="Top News"></kendo-menu-item>
<kendo-menu-item text="Radio Records"></kendo-menu-item>
</kendo-menu-item>
Thank you in advance
By default, the grid column menu (https://www.telerik.com/kendo-vue-ui/components/grid/columns/column-menu/) displays a weird tootip on hover, containing the field name and a "Column Menu" text:
I'd like to either remove this tooltip or customize it (for instance, by changing it's text with the title - and not the name - of the field, plus removing the "Column Menu" text). Is there a way to to this?
The documentation contains a "GridColumnMenuItemProps" section, and I see a "title" prop that could be useful (https://www.telerik.com/kendo-vue-ui/components/grid/api/GridColumnMenuItemProps/#toc-title). But I haven't found a way to pass this prop (at least, I haven't found anything on the documentation about it).
Is this possible?
Is there a smart way of implementing the context menu on the Grid, so I can right click on a single row for more actions, like:
right click on a grid row and chose to go to the product page, or user page, or anything else related to the grid row data
Hi All,
We wish to start new project using Kendo UI and using Vue.Js. My requirement Listing Below
In my application i had above 10 menus. When i click each menu it will load grid with data. When i login application it will land in default page with grid and corresponding menu will be active. when i click second menu i want to minimize first grid data and load second grid data, when i click third menu again i want to minimize second grid data and load the third grid data. like that remaining menus. But when i click first or second or third minimized grid (not in menu) i want show that grid data . its will show only existing data(not going to data base and retrieve data). How will achieve this requirement using Kendo UI and vue.js? i don't use session state kind of state management methods
I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):
On this example, instead of the "ProductName Column Menu" tooltip text, I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?
Hi, I am just getting started with using the Kendo Vue components and am trying to implement a context menu. My application is using Vuejs 3 with typescript.
I have a version working with ContextMenu from the @progress/kendo-layout-vue-wrapper package. However, with this, I can't seem to access anything from an event handler argument. Example: function onMenuSelect(e) - I can't seem to access anything about e in my typescript/javascript.
In searching around for typescript types for this, I notice that there is a native kendo vue menu which requires Menu from @progress/kendo-vue-layout and Popup from @progress/kendo-vue-popup. Should I be using this instead? And with this, are there any examples for how to open the menu from rows in a table? I need my context menu to be dynamic based on which table row is triggering it.
I hope some of this question makes sense - I am totally new to using this. Thanks!
I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.
How can I have the equals operator remain selected or add a new operator?
If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.
Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue