Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
136 views

Hi all

I use a kendo grid to display some datas (with VUE JS 3 ) . This one is pageable.

I use the event "page" called when I change the page. I try to call test function from this event but I have the error "this.test" is not a function"...

And in the event "this" is the kendoGrid... How can I access to the function test ?

thanks you !

Petar
Telerik team
 answered on 08 Jul 2021
1 answer
21 views

Hello, is there any chances to disable or do not display the validation dialog upon using the Input component. Based on this example, I want to use the Error component for displaying the validation as Text and I will no longer use the validation dialog.

Btw, I'm using Kendo UI for Vue

Konstantin Dikov
Telerik team
 answered on 26 Apr 2024
3 answers
163 views

I had this working and have tried to identify what change caused this but since yesterday, when I try to render a vue with kedopanelbar I get the following in Firefox debugger:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. found in ---> <KendoPanelbar> <LeftNav> at src\views\LeftNav.vue <App> at src\App.vue <Root>

The kendopanelbar is still being accessed but the error seems to be more to do with webpack etc.

Can anyone suggest where I can look please?

Brian

Ianko
Telerik team
 answered on 19 Dec 2018
1 answer
139 views
I'm trying to implement a grouped grid with checkboxes like this angular example.

I've tried to make it work by modifying this official example, here's my code.

Unfortunately when I try to select a single row it throws the following error (both in stackblitz as well as local dev environment)

Error in /turbo_modules/@progress/kendo-vue-grid@3.2.9/dist/npm/utils/index.js (401:23)
Cannot read properties of undefined (reading 'items')

Is there a way to make grouped rows + checkboxes work in Kendo Native Grid?

Thanks in advance

Plamen
Telerik team
 answered on 06 May 2022
3 answers
336 views

Hi All,

            I am trying to export data to excel using kendo grid and vue js .   I am following https://www.telerik.com/kendo-vue-ui/components/grid-native/excel-export/ link

But i am getting below error  

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function"

found in

---> <Export> at src/components/Excel/export.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
    at VueComponent.exportExcel (export.vue?31a1:29)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)

 

Below giving my code. and let me know where i am doing wrong?

 

 

<template>
<div>
<button @click="exportExcel" class="k-button">Export Excel</button>
<kendo-grid :height="550" :data-source="info" >
<kendo-grid-column field="Name" title="Name" ></kendo-grid-column>
<kendo-grid-column field="Code" title=Code :width="120" :format="'{0:c}'"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name:'export',
data () {
return {
visible: true,
Information : 'absd',
info: null
}
},
mounted () {
axios
.get('https://localhost:44311/api/Module/')
.then(response => (this.info = response.data.lstModuleDetails))
},
methods: {
exportExcel: function () {
saveExcel({
data: this.items,
fileName: "myFile",
columns: [
{ field: 'Code'},
{ field: 'Name', title: 'Name' }
]
});
}
}
}
import saveExcel from '@progress/kendo-vue-excel-export';
import axios from 'axios'
</script>

Petar
Telerik team
 answered on 10 Jan 2020
5 answers
173 views

Is it possible to use Kendo Vue with the ESM runtime-only library (i.e. vue.runtime.esm.js)?

 

I get the following error when trying to use the grid:

vue.runtime.esm.js:588 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <KendoGrid>
       <Root>

 

I've read the thread "kendopanelbar causing You are using the runtime-only build of Vue " (https://www.telerik.com/forums/kendopanelbar-causing-you-are-using-the-runtime-only-build-of-vue). But, the solution suggested is to use vue.js (the full library).

Dimitar
Telerik team
 answered on 09 Aug 2018
1 answer
71 views

I have been able to successfully bind a Vue ref array to the first listbox control's data-source property successfully.  I am also able to use the toolbar controls to move items back and forth between two listbox controls.  I am not able to bind a Vue ref array for selected items on the second listbox control.  I am also unable to get the "add" and "remove events to invoke my handler functions.  Please advise on how to get the selected values that are present in the second listbox control.  In the example below, how do I get "Name 2" out of the second listbox control?

 

Thank you for your help

Petar
Telerik team
 answered on 28 Sep 2022
1 answer
89 views

I'm trying to customize the ForeColor tool (replacing existing colors to custom ones). Based on the documention, I've began with this code:

Kcyx96 (forked) - StackBlitz

However, it's not working. I get this error: "Cannot read properties of undefined (reading 'title').

Petar
Telerik team
 answered on 01 Feb 2022
0 answers
145 views
Como puedo exportar un informe que realicé en telerik a excel, estoy ocupando la extensión xls, sin embargo me lo entrega pero con el formato del informe, y yo pretendo pasarlo sin formato solo que respete las filas y las columnas.

private string creaReporteHomecito(ReporteHome listModel)
        {
            //CREAMOS EL REPORTE
            ReportHome home = new ReportHome();
            home.table1.DataSource = listModel.Ppi;
            home.table2.DataSource = listModel.IsrRS;
            home.table3.DataSource = listModel.IsrRA;
            home.table4.DataSource = listModel.IsrRSO;
            home.table5.DataSource = listModel.IsrRH;
            home.table6.DataSource = listModel.IsrRAR;
            home.table7.DataSource = listModel.PdI;
            home.table8.DataSource = listModel.IrE;
            home.table9.DataSource = listModel.IrR;
            home.table10.DataSource = listModel.IepsE;
            home.table11.DataSource = listModel.IepsR;


            //EXPORTAMOS EL EXCEL ReportProcessor reportProcessor
            = new ReportProcessor();
            Telerik.Reporting.InstanceReportSource instanciaReportSource = new Telerik.Reporting.InstanceReportSource();
            instanciaReportSource.ReportDocument = inicio;
            RenderingResult renderingResult = reportProcessor.RenderReport("CSV", instanceReportSource, null);
            


            //EXPORTAMOS EL EXCEL A MEMORYSTREAM
            MemoryStream ms = nuevo MemoryStream();
            ms.Write(renderingResult.DocumentBytes, 0, renderingResult.DocumentBytes.Length);
            ms.Flush();
            System.Web.Mvc.FileContentResult resultado = nuevo System.Web.Mvc.FileContentResult(ms.GetBuffer(), renderingResult.MimeType);
            result.FileDownloadName = "ReporteGeneral.CSV";

            byte[] excelBytes = ReadToEnd(ms);
            cadena excelBase = Convert.ToBase64String(excelBytes);

            volver excelBase;
        }
Daniel
Top achievements
Rank 1
 asked on 24 Jan 2022
13 answers
301 views

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

<kendo-scheduler id="scheduler"
      :data-source="localDataSource"
      :event-template="eventTemplate"
      :editable="{template:editTemplate}"
    >

 

The code of the method editTemplate()

methods: {
    editTemplate: function(){
      return {
         template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
      
    }
},

 

The code of the component that contains the custom template

<template>
    <div class="k-edit-form-container">
        <p> Titre <input type="text" /> </p>
        <p>
            <span >Start <input data-role="datetimepicker" name="start" /> </span>
            <span >End <input data-role="datetimepicker" name="end" /> </span>
        </p>
    </div>
</template>
 
<script>
export default {
    name:"CustomEditTemplate",
}
</script>

 

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

 

Thanks.

 

 

 

Petar
Telerik team
 answered on 12 Apr 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
Error
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
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
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
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?