Telerik Forums
Kendo UI for Vue Forum
1 answer
124 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
226 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
0 answers
878 views

Followed the below steps:

  1. pnpm create vite
  2. give name for project, select vue-ts template
  3. pnpm install @progress/kendo-vue-popup @progress/kendo-licensing
  4. Change App.vue as mentioned below
  5. pnpm dev (works)
  6. pnpm build (fails with type errors)

I have also added a sample project on github

Am I missing something?

Type errors:

c:\temp\kendo-popup-with-vite>pnpm build

> kendo-popup-with-vite@0.0.0 build c:\temp\kendo-popup-with-vite
> vue-tsc --noEmit && vite build

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:2:57 - error TS2307: Cannot find module 'vue/types/options' or its corresponding type declarations.

2 import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
                                                          ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:63:72 - error TS2304: Cannot find name 'Vue'.

63 export interface PopupAll extends PopupMethods, PopupState, PopupData, Vue {
                                                                          ~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:68:37 - error TS2304: Cannot find name 'Vue'.

68 declare let Popup: ComponentOptions<Vue, DefaultData<PopupData>, DefaultMethods<PopupAll>, {}, RecordPropsDefinition<PopupProps>>;
                                       ~~~


Found 3 errors.

 ELIFECYCLE  Command failed with exit code 2.

App.vue

<script lang="ts">
import { defineComponent } from 'vue';
import { Popup } from '@progress/kendo-vue-popup';

export default defineComponent({
  components: {
    'k-popup': Popup,
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    onClick() {
      this.show = !this.show;
    }
  }
});

</script>

<template>
  <div>
    <button class="k-button" @click="onClick" ref="buttonWithPopup">Click Me</button>
    <k-popup :anchor="'buttonWithPopup'" :show="show">Popup content.</k-popup>
  </div>
</template>


Shashwat
Top achievements
Rank 1
Iron
Iron
 asked on 04 Jan 2022
1 answer
217 views

Hello all,

I am using kendo Editor.

<editor :resizable-content="true"
                    :resizable-toolbar="true"
                    v-model="footerBody"
                    style="height:280px;"
                    value=""
                    rows="10"
                    contenteditable="true"
                    cols="30"
                    ref="editor">
            </editor>

This one is going to have the default toolbar set.

What I want to do is to add one more tool to the default toolbar set.

What I have noticed is that when I set the tools like below, it is overwriting the default toolbar and putting there only the tools I put in the tools property. So, is there a way to add or remove a specific tool without altering and overwriting all the others from default?

<editor :resizable-content="true"
                    :resizable-toolbar="true"
                    v-model="footerBody"
                    style="height:280px;"
                    value=""
                    rows="10"
                    contenteditable="true"
                    cols="30"
                    ref="editor"
                    :tools="tools">
            </editor>
Plamen
Telerik team
 answered on 27 Dec 2021
1 answer
149 views

I see you have the hybrid library. Is that included with the JavaScript package (Jquery, Angular, VUE, React)?

If so, how does the library work with Ionic Capacitor? (does it work great and does the application function as expected?)

Petar
Telerik team
 answered on 22 Dec 2021
2 answers
279 views

Hello all, I am using Kendo Editor and have the below setup:

<editor :resizable-content="true"
                :resizable-toolbar="true"
                contenteditable="true"
                style="height:360px"
                rows="10"
                cols="30"
                v-model="editorBody"
                @input="setBodyOnChange"
                @keyup="setBodyOnKeyUp"
                @execute="setBodyOnExecute"
                @select="onSelect"
                ref="editor">
        </editor>

I would like to retrieve the cursor position when someone clicks in the editable area. Specifically I think I should use the select event. But I can't find a way to do so....

 

Any help would be appreciated.

Daniel
Top achievements
Rank 2
Iron
Iron
 answered on 20 Dec 2021
1 answer
151 views
  • How does the spreadsheet component get the coordinates of the currently selected cell

Petar
Telerik team
 answered on 08 Dec 2021
1 answer
168 views
Hello, I would like to ask if there is a corresponding method to support me to obtain the data of selected rows or columns when using the spreadsheet
Petar
Telerik team
 answered on 07 Dec 2021
1 answer
133 views

It's possible to generate toolbar item based on array of object as below sample? I try but I hit v-for & v-if not allowed to use together.

[
  {
    id: 0,
    type: "buttonGroup",
    text: "group1",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [
      {
        text: "G1button1",
        icon: "",
        title: "button1",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "G1button2",
        icon: "",
        title: "button2",
        enabled: "true",
        togglable: "true",
      },
    ],
  },
  {
    id: 1,
    type: "splitButton",
    text: "splitButton1",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [
      {
        text: "Insert above",
        icon: "insert-up",
        title: "Insert above",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "Insert between",
        icon: "insert-middle",
        title: "Insert between",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "Insert below",
        icon: "insert-down",
        title: "Insert below",
        enabled: "true",
        togglable: "true",
      },
    ],
  },
  {
    id: 2,
    type: "button",
    text: "Button1",
    icon: "",
    enabled: "true",
    togglable: "true",
    overflow: "auto",
    items: [],
  },
  {
    id: 3,
    type: "separator",
    text: "",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [],
  },
  {
    id: 4,
    type: "button",
    text: "Button2",
    icon: "",
    enabled: "false",
    togglable: "true",
    overflow: "always",
    items: [],
  },
]
Petar
Telerik team
 answered on 02 Dec 2021
1 answer
145 views

Hi,

I know the single Vue Grid can export to excel like this.
https://www.telerik.com/kendo-vue-ui/components/grid/excel-export/

And I also know Vue Grid can do master-detail template like this.

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

 

So I want to know Can I export Vue Grid to Excel with detail template?

Thanks!!

Petar
Telerik team
 answered on 26 Nov 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Button
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
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
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
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
SpeechToTextButton
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?