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>
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?
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 !
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.
Hi,
I have over 20 columns in the native grid and seeking a possible implementation to achieve freeze panes similar to what excel offers.
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
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