Questions on Kendo UI for Vue Forum

2 answers

181 views

I'm trying to export the html generated by the Kendo Vue Native Editor to a PDF document, using the Kendo Vue Native PDF Processing (I'm not using the Editor's embedded pdf export button, because I need to send this PDF to the backend).

I can't see any documentation about how to this. This is what I first tried:

const iframe = document.querySelector(".k-editor-content .k-iframe");
      const htmlElementContent = iframe.contentWindow.document.querySelector("html")

      savePDF(htmlElementContent, {
        paperSize: "A4"
      });

But then I got this error: "DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed."

To bypass this error, I tried to manipulate the Iframe content first:

const iFrameDocument = document.querySelector(".k-editor-content .k-iframe").contentWindow.document;
      const iFrameRootHtml = iFrameDocument.querySelector("html")
      const newSection = iFrameDocument.createElement('section');
      newSection.appendChild(iFrameRootHtml);
      iFrameDocument.appendChild(newSection);

      const newRoot = newSection.querySelector("html");

      savePDF(newRoot, {
        paperSize: "A4"
      });

With the above code I'm able to generate an PDF, but with no embedded fonts at all. Also, if I try to drag an image into the editor (the editor transforms it into a base64 string) and then generate the PDF, I got this error: "DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed."

Still regarding the fonts, I'm declaring them in the style section of the html that is inside the iframe content, using the onLoaded event of the Editor (https://www.telerik.com/kendo-vue-ui/components/editor/styling-content/). I'm also declaring them on the outer content (the main website). The fonts are hosted on my own website. Still, no embedded fonts on the generated PDF.

Also, to the Telerik forum admins, I just noted that there is no tag available neither for the Native Editor or the native PDF Processing, so I'm forced to tag this question with wrong/generic tags.

Any help will be appreciated, thanks in advance.

Editor wrapper

General Discussions

answered on 04 Feb 2022

2 answers

1.0K+ views

Best way to expand Kendo DropDownList to viewport height

I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>

I'm currently trying it with this approach but I'm wondering if there's a better way:

1seoqu (forked) - StackBlitz

The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered. In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.

DropDownList wrapper

answered on 04 Feb 2022

1 answer

119 views

Native Editor - Trying to Customize Built-In Tool

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').

Editor

answered on 01 Feb 2022

0 answers

213 views

Exportar un reporte a excel sin formato

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;
}

asked on 24 Jan 2022

0 answers

838 views

Vite + TS + @progress/kendo-vue-popup: type errors on prod build

Followed the below steps:

pnpm create vite
give name for project, select vue-ts template
pnpm install @progress/kendo-vue-popup @progress/kendo-licensing
Change App.vue as mentioned below
pnpm dev (works)
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>

Popup

asked on 04 Jan 2022

1 answer

204 views

Kendo Vue Editor in Classic Mode, add or remove tool without overriding the default tools.

Hello all,

I am using kendo 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 wrapper

answered on 27 Dec 2021

1 answer

141 views

Looking to start using VUE for a mobile project

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?)

Licensing

answered on 22 Dec 2021

2 answers

244 views

Kendo Vue Editor in Classic Mode get current Cursor position in editable area

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

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.

Editor wrapper