Hi all,

could it be that the "Color Picker doesn't habe any translations?

Thank you for feedback

BR

Oliver

Kendo-Vue-grid vs Kendo-grid-Vue-Wrapper

What is the difference between the two as in what would be the scenarios in which one would be better than the other? I would like to understand in detail please.

Also prop 'GridColumn' is only available in the grid wrapper and not the native grid. What is the reason behind that?

Are there any components in Kendo UI for VUE that do not support Typescript?

Thanks for your time,
Hiba

Hi,

Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(

Hi,

I am using TypeScript and I am trying to display a grid in which three columns would be text and one column would be and image. How can insert a template for the fourth cell being and HTML image in each row? JSX is not enabled in my project so I need to come up with a solution using slots and props. I am using kendo-vue-grid and not the wrapper. My Grid.vue looks like this:

<template>
    <grid :data-items="imagesData.images"  :columns="columns"></grid>

</template>

<script setup lang="ts">

 import { ref } from 'vue';
import { Grid, type GridCellProps, type GridColumnProps } from '@progress/kendo-vue-grid';

    const customImageCell = (props: GridCellProps) => {
       return `<img src = "${props.dataItem}" alt="thumnailUrl" ></img>`       //if I log props.dataItem, its undefined
    } 

          const columns = ref([
                { field: 'name', title: 'Name' },
                { field: 'category', title: 'Category' },
                { field: 'artist', title: 'Artist' },
                { field: 'price', title: 'Price' },
                { title: 'Thumbnail', cell: (props: GridCellProps) =>  customImageCell(props) },
            ] as GridColumnProps[]);

</script>

My data looks like this

{
  "images": [
    {
      "id": 1,
      "name": "Multicolor Abstract",
      "category": "Abstract Art",
      "artist": "Artist 1",
      "price": 795.95,
      "numberSold": "567",
      "thumbnail": "/images/Abstract/AbstractArt1.jfif"

    },
    {
      "id": 2,
      "name": "Coral colors",
      "category": "Oil painting",
      "artist": "Artist 2",
      "price": 795.95,
      "numberSold": "567",
      "thumbnail": "/images/OilPaintings/AbstractOilPainting.jpeg"

    },
    {
      "id": 3,
      "name": "Forest",
      "category": "Landscape",
      "artist": "Artist 1",
      "price": 795.95,
      "numberSold": "567",
      "thumbnail": "/images/Landscape/ForestLandscape.jpg"

    }

}

Grid renders but the Thumbnail column just prints <img src = "undefined" alt="thumnailUrl" ></img>  as text.

I have verified that my data is available by printing it in console.log.

Help would be appreciated.

Thanks,

Hiba

Hi!

I have a question.

I would like to mark Saturday in blue and Sunday in red.
The only information I have is the 'k-weekend' class that doesn't seem to distinguish Saturday from Sunday.

Is there a simple way to distinguish it?

I don't want to mess with props if possible.

Thanks for reply

Hello,

I am using all of Date Inputs, Native Components, Knedo UI for Vue.

In My project, I want to set Sunday, Monday , Saturday like first day in week according to the variable. How can I do that?

Thanks for reply.

Using Vue Wrapper for the Dropdowns

I have a multiselect in a v-for, it's rendering 3 widgets.

                                <kendo-multiselect :data-source="t.Items"
                                                   class="w-100"
                                                   :data-text-field="'Value'"
                                                   :height="300"
                                                   :value-primitive="false"
                                                   v-model="t.Selected"
                                                   :filter="'contains'"
                                                   :change="onKendoChange('multiselect')"
                                                   :placeholder="'- Select -'">
                                </kendo-multiselect>

When the page loads, all 3 of these fire their change event twice, so if I console log, I get 6 events. Ideally I don't want anything to happen on mount\load... just once the selection changes.

But then in the onKendoChange function, if I change ONE of the multi-selects, it's firing 3 more events, not just the event once for that one widget.

Basically I need to re-call my "getdata" function anytime something is selected...

Running 2023.3.1010

Steve

Hello,


I'm trying to get the Kendo Vue Editor to be able to accept pasted content from a Google Doc. 
However when trying to copy paste from there the text in the clipboard is wrapped in a <b style="font-weight: normal"> tag.

This is a known issue for the ProseMirror devs and they have a fix for it. 
Simple Copy Paste from google docs yields bold text · Issue #459 · ProseMirror/prosemirror (github.com)

If you try the editor example on ProseMirror.com you can safely paste text from Google Doc and it won't be converted to <strong>:
ProseMirror basic example

It seems it's able to do so correctly because of this ProseMirror schema change:
Don't treat <b style=font-weight: normal> as strong · ProseMirror/prosemirror-schema-basic@cbbdc1a (github.com)

prosemirror-schema-basic/src/schema-basic.ts at master · ProseMirror/prosemirror-schema-basic (github.com)

However when I try to load this schema-basic schema it doesn't work as intended and Google Doc text is still converted to <strong> text

Here is my attempt so far:
Yrawzh (forked) - StackBlitz

What's the best way to fix this issue?