Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
0 answers
400 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
443 views
I am working with the wrapping grid and I saw the need to add html elements in the header of my grid, in this case I would like to add a button and a drop-down to select the columns to be displayed, I know that the grid has the option of add edit buttons, add etc. although I need to add a button for a different task. I would like to know if it is possible to do this, I leave an example of what I want to do. THANKS
Ivan Danchev
Telerik team
 answered on 07 Jan 2020
1 answer
116 views

I'm trying to make a grid with custom rows by passing a custom vue row component to the :row-render prop like so:


Lsjacl (forked) - StackBlitz

 

However there's a problem when I'm inserting new rows at the top. It seems the row that's newly created re-uses the row data from the row below it instead of the completely blank data a new row starts out with. When I insert a row at the bottom of the list this problem doesn't occur and the values are all completely blank. 


You can reproduce this issue with the following steps:

1: open the stackblitz.

2: click on 'add row to end'.

3: see that there's a newly created row at the bottom of the list. 

4: in the field meta it says the initalValue is null

5: now add a row to the beginning of the list with the 'add row to beginning' button

6: The field meta says it's initialValue is 'Lemon' the same value as the row below it. 


I'm figuring this has something to do with the loop that's generating all rows using generic indexes instead of unique ID's as described in this video:

https://youtu.be/-6fO2qUmf7I?t=412 


Is there a way to fix this so I can insert the row at the beginning of the list and have it start out as a completely fresh vue component?

Petar
Telerik team
 answered on 23 May 2022
1 answer
208 views

Hi, i'm new to kendo and i'm trying to create a filterable grid with a grid native component. Everything works well BUT i'm stuck with the full list of operators (contains, begins, is not null,...).

Is there an easy way to customize the list of operators ? I will probably only need "begins" and "is equal to".

I saw that with the grid-wrapper I could define a list with the property "filtterable" but it doesn't seem to work with grid native. I got an error saying that Filterable could'nt be assigned with an object.

Thanks a lot !

Petar
Telerik team
 answered on 20 Oct 2020
0 answers
108 views

I'm trying to get a tooltip to show when hovering a cell when the characters inside the cell are more than 12 characters.

    <template v-slot:reservationNameTemplate="{ props }">
        <td :style="truncateDescriptionText(props.dataItem)">
          {{ props.dataItem[props.field] }}
        </td>
    </template>

This is working fine to truncate the text inside the cell, however when I try to warp it with the Tooltip like this the truncate stops working and I get no tooltip on hover

      <template v-slot:reservationNameTemplate="{ props }">
        <Tooltip :anchor-element="'target'" :position="'bottom'">
          <td>
            {{ props.dataItem[props.field] }}
          </td>
        </Tooltip>
        <td :style="truncateDescriptionText(props.dataItem)">
          {{ props.dataItem[props.field] }}
        </td>
      </template>

Thank you.

Vincent
Top achievements
Rank 1
Iron
 asked on 17 Feb 2023
2 answers
78 views

Hi,

I have over 20 columns in the native grid and seeking a possible implementation to achieve freeze panes similar to what excel offers.

 

dodoro
Top achievements
Rank 1
 answered on 15 Oct 2020
1 answer
33 views
In the treeList, as long as you define a name in the columns cell, then bind it in the template, it will work. However, using the same method for grid does not work.
Konstantin Dikov
Telerik team
 answered on 14 Nov 2023
2 answers
1.1K+ views
Hello,

I am receiving the following error when I try to implement ListView in my current project, "Uncaught (in promise) ReferenceError: kendo is not defined". I have seen similar issues posted but none of those solutions seem to apply to my situation.

In my current project I have implemented Kendo Grid and Dropdown. You can see below that the error is originating from the KendoListViewMixin.js file. I have installed the latest version of both "@progress/kendo-listview-vue-wrapper" & "@progress/kendo-ui", which should be all I need for what I am doing. Any insight into what I might be missing?

Ken
Top achievements
Rank 1
Iron
 answered on 28 Jul 2022
3 answers
326 views

Hi,
I am having two grid's in my page and I want to scroll to a particular row when the page gets loaded.

Each rows are having unique years and I want to scroll to the current year row once the page is loaded, with the class selector and the year value inside <td> i can identify the row into which I have to scroll.

I have done the similar functionality in another project but there we are using kendo UI for jquery version and https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-selected-row link I had followed to achieve the same. As my current requirement is for Kendo UI Grid for Vue , I am looking forward to the correct solution or an approach for achieving the same..

Thank you for your help in advance.
Best regards
Jaydeep

Petar
Telerik team
 answered on 19 Jan 2021
1 answer
166 views

Hello. I am using a vue class component to create a Vue Grid in Vue 2.6.10 as per the project requirement. It uses typescript. 

My issue is with the "Edit" button in the slot that updates dataItem.inEdit.

The emit is happening from the slot to the parent component.  But the child component i.e the slot is not dynamically updating the "Edit" button to show Update/Cancel based on the changed dataItem.inEdit = true value. When i checked in vue dev tool, the slot inEdit value gets updated only when i click on the parent component and click back on the child component.

Basically it's not reloading the slot section based on the updated value of inEdit. This is only happening in Vue 2. I tried the same in vue3 and it works fine with class component and typescript libraries. Can you please help. I attached my code to the link below. It's not compilable since the stackblitz is not set up for my requirements but you can see the code.

https://stackblitz.com/edit/vue-r9u8vg?file=src/components/HelloWorld.vue

 

 

Plamen
Telerik team
 answered on 29 Sep 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
Chart wrappers (package)
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
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
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
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?