Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
193 views

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

  1. Show Active navs [showing the active url]
  2. Make this NavMenu work in both web and mobile versions.

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:

  • Color Scheme: Light Mode
  • Navigation Position: SideNav
  • SideNav Sizing: Icons
  • Navigation Color: Default

Sample Vue Project: https://github.com/iamAdarshh/Kendo-Menu-Responsive

 

Petar
Telerik team
 answered on 21 Apr 2022
0 answers
50 views

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 }">

                        <NbGenericCheckboxesColumnFilter
                            v-if="gridDataReady"
                            :column="props.column"
                            :filterable="props.filterable"
                            :filter="props.filter"
                            :data-items="dataItems"
                            @filterChange="(e) => props.onFilterchange(e)"
                            @closeMenu="(e) => props.onClosemenu(e)"
                            @contentFocus="(e) => props.onContentfocus(e)"
                        ></NbGenericCheckboxesColumnFilter>
                   

</template>

Daniel
Top achievements
Rank 2
Iron
Iron
 asked on 03 Feb 2023
1 answer
57 views

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

 

Petar
Telerik team
 answered on 22 Dec 2020
3 answers
99 views

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

Plamen
Telerik team
 answered on 29 Jan 2019
1 answer
175 views

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?

Petar
Telerik team
 answered on 14 Mar 2022
1 answer
252 views

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

 

Ivan Danchev
Telerik team
 answered on 17 Sep 2018
1 answer
55 views

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

Petar
Telerik team
 answered on 20 Aug 2019
1 answer
272 views

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?

Petar
Telerik team
 answered on 15 Apr 2022
1 answer
200 views

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!

Petar
Telerik team
 answered on 06 Apr 2022
1 answer
57 views

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

Petar
Telerik team
 answered on 30 Jun 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
Spreadsheet wrapper
DatePicker
Editor wrapper
Input
DataSource wrappers (package)
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Editor
Upload
DropDownList wrapper
Localization
Window
Tooltip
Calendar
Chart wrappers (package)
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TreeView wrapper
Error
FloatingLabel
Form
TextArea
Scheduler
Splitter
PanelBar
TreeView
Notification
Menu
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
TabStrip
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
Stepper
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
TreeList
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Raju
Top achievements
Rank 1
Iron
özer
Top achievements
Rank 2
Veteran
Iron
Blazor
Top achievements
Rank 1
Iron
FranckSix
Top achievements
Rank 2
Veteran
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Raju
Top achievements
Rank 1
Iron
özer
Top achievements
Rank 2
Veteran
Iron
Blazor
Top achievements
Rank 1
Iron
FranckSix
Top achievements
Rank 2
Veteran
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?