Questions on Kendo UI for Vue Forum

1 answer

162 views

DropDownTree Wrapper component, how to save value?

How do I save the value from this dropdowntree component onChange?:

https://www.telerik.com/kendo-vue-ui/components/dropdowntree-wrapper/

With the multiselect and dropdownlist components I can use

e.sender.dataItems();

and

e.sender.dataItem(e.sender.select());

respectively

But for the dropdowntree component there isnt't a dataItem attached to the event sender object.

DropDownTree wrapper

answered on 20 Oct 2021

1 answer

140 views

Is it possible to create a custom row expand button?

Currently I'm using the Kendo native grid component and I want to make use of the master-detail template functionality:

https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/hierarchy/

However when enabling this the expand buttons are always on the left column and I can't change the styling easily.

Is it possible to make a custom expand button via the use of a function or something that will also open each row's detail template?

Grid

answered on 08 Oct 2021

1 answer

104 views

Best way to style Native Kendo components when the project already uses kendo.common & kendo bootstrap CSS

I'm currently working in a project that works with Kendo UI Vue wrapper components which are styled by :

kendo.common-boostrap.css

kendo.bootstrap.css

Found here: https://docs.telerik.com/kendo-ui/intro/installation/hosting-kendoui

But now I want to add some Native Vue components, which as far as I can tell, are styled by the themebuilder: https://themebuilder.telerik.com/kendo-vue-ui

Am I supposed to use the themebuilder css file alongside kendo.common-bootstrap and kendo.bootstrap? Or does it replace one or both of them? I'm currently a bit confused and some clarification would be a great help

Thanks in advance

DateInput

answered on 08 Oct 2021

1 answer

120 views

Vue Page Sizing

Hi There!

I'm currently trying to implement custom page sizes for the native grid component in telerik vue.

However, when I change "items per page", nothing changes.

I also don't see anything with regards to custom page sizes within the documentation?

this is how I define my data.

      pageSize: 10,
      pageable: {
          buttonCount: 5,
          info: true,
          type: 'numeric',
          pageSizes: true,
          previousNext: true
      },

And this is how my component is called

          <Grid
            :style="{height: '82.5vh'}"
            :data-items="dataSet"
            :columns="columns"
            :skip= "skip"
            :take="limit"
            :total="count"
            :pageable="pageable"
            :page-size="pageSize"
            @pagechange="pageChangeHandler"
          >

Thank you so much to anyone taking the time to read my question!

Grid

answered on 07 Oct 2021

1 answer

302 views

DropDownList & ComboBox broken in Safari 15

Using Safari 15.0 visit the documentation page for the DropDownList (https://www.telerik.com/kendo-vue-ui/components/dropdowns/).

Try the examples and you will find that it's not possible to change items in the ComboBox (after the 1st selection). Also it is not possible to choose an item in the DropDownList.

Have confirmed this behaviour is consistent with behaviour we're experiencing in our application.

Impacts both mobile and desktop Safari versions.

DropDownList

answered on 30 Sep 2021

1 answer

232 views

Vue 2.6 Grid Component Editable

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

Grid

answered on 29 Sep 2021

1 answer

197 views

Excel export sheet name and second sheet

I use the `kendo-vue-excel-export` in VUE to generate an Excel export.
Now I have two questions:

1. How to change the sheet name?
2. How to create a second sheet with different data?

My method that I use currently looks like this:

    exportExcel () {
      saveExcel({
        data: this.items,
        fileName: "Geräte",
        columns: [
          { field: 'hostname', title: 'Hostname' },
          { field: 'guid', title: 'Guid' },
          { field: 'ipaddress', title: 'IP' },
          { field: 'domain', title: 'Domain' },
          { field: 'osversion', title: 'OS Version' },
          { field: 'ostype', title: 'OS Type' },
          { field: 'videoid', title: 'Grafikkarte' },
          { field: 'diskid', title: 'Festplatte' },
          { field: 'memory', title: 'Arbeitsspeicher' },
          { field: 'cpuid', title: 'CPU' },
          { field: 'username', title: 'Benutzer' },
          { field: 'location', title: 'Lokation' },
          { field: 'office', title: 'Büro' }
        ]
      });
    },

DataSource wrappers (package)

answered on 21 Sep 2021

1 answer

669 views

Export the excel file with Kendo Grid grouping aggregates

Hi,

I can show the grouping aggregates of kendo grid and I also can add exportExcel into my project.

But I have no idea how can I combine it?

I had the problem that my excel file doesn't have the groupfooter "aggregates".

Also, the columns misalign, when I add this into the exportExcel methods.

group: this.rentGroup,

Here is the code:

https://stackblitz.com/edit/wzp8rg?file=src%2Fmain.vue

Thank you in advance.

Grid

answered on 15 Sep 2021

1 answer

225 views

How to get modifiedByField object to update when I undo a change inside <Form>

I'm currently using this object provided by the kendoForm injected property:

https://www.telerik.com/kendo-vue-ui/components/form/api/KendoFormInjectedProperty/#toc-modifiedbyfield

When I change a field inside the <FormElement> it adds the field to this object, however once I undo this change (return back to initial value) the field remains inside the object.

Here's a stackblitz to illustrate the problem:
https://stackblitz.com/edit/t7gw96?file=src%2FFormContent.vue

How do I remove the fields from this object when they no longer differ from their initial value?

Input

answered on 14 Sep 2021

1 answer

180 views

MultiSelect inside Form throws error when entering text

I've added the Kendo MultiSelect component inside a Kendo Form. However once I start typing some text inside the MultiSelect it throws an error as soon as I click outside:
https://stackblitz.com/edit/bfuhyb?file=src%2FFormInput.vue (stackblitz example of the problem)

What's worse is that upon throwing this error it completely freezes the input until you remove the text (you can't see this on stackblitz since the error covers the screen).

Did I forget to add a certain property to the MultiSelect or is this a bug?

When the MultiSelect is outside of a Kendo Form it doesn't have this behavior:
https://stackblitz.com/edit/ys4zsu?file=src/main.vue (stackblitz as linked on https://www.telerik.com/kendo-vue-ui/components/dropdowns/multiselect/)

MultiSelect