Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
305 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
463 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
105 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
161 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
1 answer
613 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
3 answers
224 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
54 views
Suppose i add columns =
[{
                field: "Status",
                title: "Status",

                cell: "badgeTemplate",columnMenu: "filterTextBoxTemplate", filter: "text", headerClassName: "customMenu",

            }],

 

So column menu not work in the grid

Vessy
Telerik team
 answered on 18 Aug 2023
1 answer
403 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
357 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
47 views

We use data-testids (an attribute) for our test automation.  It looks like on an internal component like buttons in popup boxes and rows in a grid that we can no longer add these.  Is there some way in KendoUI that we can add these tags for our automation testing.  KendoMenu items  is an example where we like to add them for each menu item that it seems like we can't

Thank You,
Anthony Rizzolo

 

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