Questions on Kendo UI for Vue Forum

1 answer

33 views

Dialog Content as Component

Is it possible to render a dialog with a component as its content? If not, is it possible with a Window?

answered on 22 Mar 2018

1 answer

39 views

Screen reader support

A number of Kendo components could do with better support for screen readers, including:

Pagination (eg in a grid): page links should read something like "Go to page 1", not just "1".
Dialog's labelled by and close button less confusing - it currently reads the whole header row, several times in a row.
Upload / external drop target: Upload hints are running through without a gap.
Grid: the header is confusing noise, it reads out "table with zero rows and zero columns" (depending on grid scrolling settings)
Date / date range inputs: reads "day/month/year" but not the field label, it's very hard to navigate the date picker.

No doubt there are more than the above.

Effective screen reader accessibility is as much about what you skip as what you add. Where possible, audio prompts should be short and clear, and not produce excess noise.

Accessibility

Dialog

Grid

Pager

answered on 02 Aug 2022

6 answers

231 views

Native DropDownList issues

I have started using the new Vue Native DropDownList and found a few issues when it is used inside a popup (bootstrap-vue modal).

The dropdown list will not display. I can make it display by adding:

.k-animation-container {
z-index: 100000;
}

Now it displays but clicking out side the dropped down list will not close it.

Wayne

General Discussions

answered on 13 Feb 2020

1 answer

124 views

DropDownTree Height does not work in Vuetify v-dialog

We have a Vuejs and Vuetify application.

We are using the DropDownTree control to display a hierarchy. In some cases, the list can be very long and scrolls off the page.

I tried using the "Height" property. This works for the DropDownTree controls that are NOT in a v-dialog.

But one of our DropDownTree controls displays in a v-dialog. The "Height" property has no effect here.

How can I make the "Height" property work for the DropDownTree in a v-dialog?

Or how can I specify a height for the DropDownTree or add scroll bars when the DropDownTree appears in a v-dialog?

DropDownTree wrapper

answered on 03 Mar 2022

0 answers

31 views

Native Editor - Customize Hyperlink Tool

Is there an example of how to override the user experience in the Hyperlink tool? I would like to be able to set the cursor on an existing hyperlink, click the Hyperlink tool and change the display text on the hyperlink. This change would also include adding a "Display Text" form field on the hyperlink tool dialog view.

Thank you for your help.

Editor

asked on 22 Feb 2023

1 answer

45 views

filter is not working, which I did incorrectly

  <!-- :data-items="result" uwaga to jest do filtru potrzebne -->
<template>
<div class="example-wrapper">
  <Grid
    ref="grid"
    :style="{ height: '860px' }"
    :data-items="result"   
    :selected-field="selectedField"
    :sortable="true"
    :sort="sort"
    :pageable="pageable"
    :take="take"
    :skip="skip"
    :total="total"
    :filterable="true"
    :filter="filter"
     :loader="loader"
    @filterchange="filterChangeHandler"
    @itemchange="itemChange"
    @datastatechange="dataStateChange"
    :columns="columns"
    @selectionchange="onSelectionChange"
    @headerselectionchange="onHeaderSelectionChange"
    @rowclick="onRowClick"
  >
    <template v-slot:myTemplate="{props}">
      <custom  :data-item="props.dataItem"
        @edit="edit"
        @save="save"
        @remove="remove"
        @cancel="cancel"
      />
      
    </template>
    <grid-toolbar >
       
      <kbutton title="Add new" :theme-color="'primary'" @click="insert">
       Dodaj rekord
   
      </kbutton>  <br>
      <kbutton title="Add new" :theme-color="'primary'" @click="insert">
       Zaznacz zrobione
   
      </kbutton>  
  <div class="demo">
     <span class="wrapper">
        <checkbox   :id="'chb1'" :label="'Przeglądy maszyn '" @click="testowyfiltr"/>
        <checkbox   :id="'chb2'" :label="'Przeglądy wytwarzanie '"  />
        <checkbox   :id="'chb3'"  :label="'Przeglądy infrastryktrua '"  />
        </span>
    </div>
      <kbutton
        v-if="hasItemsInEdit"
        title="Cancel current changes"
        @click="cancelChanges"
      >
        Cancel current changes
      </kbutton>
       <div class="demo2">
         <span class="wrapper">
          <h3 :style="{ color: 'black' }" > W tym tygodniu do wykonania </h3> <h2  :style="{ color: 'red' }"> 5 </h2> <h3 :style="{ color: 'black' }">przeglądów</h3>
      </span>
      </div>
    </grid-toolbar>
 
    
    <grid-norecords> poczekaj.....</grid-norecords>
  </Grid>
   <dialog-container  
        v-if="productInEdit"   
        :data-item="productInEdit" 
        @save="save" 
        @cancel="cancel"
         :products-list="products">
        
        </dialog-container>
        </div>
</template>
<script>
import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
import { Button } from '@progress/kendo-vue-buttons';
import { process, toODataString } from '@progress/kendo-data-query';
import CommandCell from './CommandCell';
import DialogContainer from './DialogContainer';
import { Checkbox } from "@progress/kendo-vue-inputs";
// const allData = [{text: 'do zrobienia'},{text: 'zrobione'}];
export default {
  components: {
    Grid: Grid,
    'grid-toolbar': GridToolbar,
    'grid-norecords': GridNoRecords,
    custom: CommandCell,
    kbutton: Button,
    'dialog-container': DialogContainer,
      checkbox: Checkbox
  },
  data: function () {
    return {
      
      //  products: allData,
       selectedField: 'selected',
    //   gridData: gridData.map(item => { return {...item, selected: false} }),
      productInEdit: undefined,
      baseUrl: 'http://156.4.10.182:42471/test/products',
      init: { method: 'GET', accept: 'application/json', headers: {} },
      filter: null,
      sort: null,
      pageable: true,
      skip: 0,
      take: 10,
      total: 0,
      // expand: "Supplier",
      updatedData: [],
      editID: null,
      staticColumns: [
        { field: 'Id', filterable:false, editable: false, width: 50, title: 'id' },
       
        // { field: 'LP',filterable:false ,width: 40},
        { field: 'Nazwa_maszyny' ,filterable:false ,width: 200 ,title: 'Nazwa Maszyny'},
        { field: 'Urzadzenie' , filterable:false ,width: 250 ,title: 'Urządzenie'},
         { field: 'Czynnosc' , filterable:false ,width: 200 ,title: 'Czynnosc'},
        { field: 'Grupa' , filterable:false ,width: 70 ,title: 'Grupa'},
      
        // { field: 'Priorytet',filterable:false ,width: 100 ,title: 'Priorytet'},
        { field: 'Lokalizacja' , filterable:false ,width: 120 ,title: 'Lokalizacja'},
        { field: 'Wykonawca' , filterable:false ,width: 60 ,title: 'Wykonawca'},
        { field: 'Tydzien' , filterable:true ,width: 100 ,title: 'Tydzien'},
         { field: 'Link' , filterable:true ,width: 100 ,title: 'Link'},
           { field: 'Foto',filterable:false,width: 100 ,title: 'Foto' , cell: this.cellFunction},
       { field: 'Status', filterable:false ,width: 100 },
        // { field: 'Data', filterable:false ,title: 'Data', editor: 'numeric', width: 80 },
        { field: 'Dod_info',filterable:false,width: 100 ,title: 'Dod_info'},
      //   { field: 'Login' ,width: 100 ,title: 'Login'},
      
        { cell: 'myTemplate', filterable: false, width: '110px' },
      ],
      gridData: [],
       loader: true,
    };
  },
  computed: {
    areAllSelected () {
            return this.gridData.findIndex(item => item.selected === false) === -1;
        },
        columns () {
            return [
                { field: 'selected',filterable:false, width: '50px', headerSelectionValue: this.areAllSelected },
                ...this.staticColumns
            ]
        },
    hasItemsInEdit() {
      return this.gridData.filter((p) => p.inEdit).length > 0;
    },
    dataState() {
      return {
        sort: this.sort,
        skip: this.skip,
        take: this.take,
    
      };
    },
    result: {
      get: function () {
        // console.log(this.gridData)
        return process(this.gridData, {
           sort: this.sort,
           filter: this.filter,
           take: this.take,
           skip: this.skip,
        });
      },
    },
 
  },
  
  created: function () {
    this.getData();
  },
  methods: {
    cellFunction: function (h, tdElement , props, listeners ) {
            return h('td', {
                on: {
                    click: function(e){
                        listeners.custom(e);
                    }
                }
            }, [<img src="https://en.pimg.jp/047/504/268/1/47504268.jpg"/>]);
        },
    
filterChangeHandler(event) {
    this.filter = event.filter;
  },
    onHeaderSelectionChange (event) {
            let checked = event.event.target.checked;
            this.gridData = this.gridData.map((item) => { return {...item, selected: checked} });
        },
        onSelectionChange (event) {
            event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
        },
        onRowClick (event) {
            event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
        },
        createRandomData(count) {
            return
        },
    
    updateService(action = '', item) {
      const that = this;
      const idIfNeeded =
        action === 'DELETE' || action === 'PUT' ? `(${item.Id})` : '';
      const url = this.baseUrl + idIfNeeded;
     
      const body =
        action === 'POST' || action === 'PUT'
          ? JSON.stringify({
              Id: item.Id,
              Status: item.Status,
              Data : item.Data,
              LP : item.LP,
              Nazwa_maszyny: item.Nazwa_maszyny,
              Urzadzenie: item.Urzadzenie,
              Grupa: item.Grupa,
              Foto: item.Foto,
              Priorytet: item.Priorytet,
              Lokalizacja: item.Lokalizacja,
              Wykonawca: item.Wykonawca,
              Tydzien: item.Tydzien,
              Druk: item.Druk,
              Dod_info: item.Dod_info,
              Login: item.Login
            })
           :{};
            console.log(body);
         fetch(url, {
        method: action,
        accept: 'application/json',
        headers: {
          'Content-type': 'application/json',
        },
        body: body,
      }).then((response) => {
        if (response.ok) {
          that.getData();
        } else {
          alert('request failed');
        }
      });
    },
    itemChange: function (e) {
      if (e.dataItem.Id) {
        let index = this.gridData.findIndex(
          (p) => p.Id === e.dataItem.Id
        );
        let updated = Object.assign({}, this.gridData[index], {
          [e.field]: e.value,
        });
        this.gridData.splice(index, 1, updated);
      } else {
        e.dataItem[e.field] = e.value;
      }
    },
    insert() {
       this.productInEdit = { };
            
    },
    testowyfiltr(event){
      
      this.filter = event.filter;
    },
    edit(dataItem) {
      
      this.productInEdit = this.cloneProduct(dataItem);
     
    },
    save(e) {
      
    const dataItem = this.productInEdit;
    const item = this.gridData.slice();
    const isNewProduct = dataItem.Id === undefined;
   
      if(isNewProduct) {
            item.unshift(this.newProduct(dataItem));
           this.updateService(dataItem.Id ? 'PUT' : 'POST', dataItem);
        } else {
       const index = item.findIndex(p => p.Id === dataItem.Id);
       item.splice(index, 1, dataItem.Id);
       let items = this.gridData[index];
 
       this.updateService(items.Id ? 'PUT' : 'POST', dataItem) ; 
    item.unshift(this.newProduct(dataItem));
           this.updateService(dataItem.Id ? 'PUT' : 'POST', dataItem);
        }
       this.productInEdit= undefined;
    },
    cancel(e) {
      this.productInEdit= undefined;
    },
    remove(e) {
 
    this.updateService('DELETE', e);
       this.productInEdit= undefined;
    },
    cancelChanges() {
      this.getData();
    },
    getData: function (initial) {
      const myDataState = JSON.parse(JSON.stringify(this.dataState));
      const that = this;
      fetch(
        this.baseUrl + '?' + toODataString(myDataState) + '&$count=true',
            // this.baseUrl + '?' + toODataString(this.dataState) + '&$count=true' +'&$expand=Supplier',
        this.init
      )
        .then((response) => response.json())
        .then((json) => {
          const total = json['@odata.count'];
          const data = json['value'];
          that.total = total;
          that.updatedData = [...data];
          that.gridData = data;
        });
    },
    createAppState: function (dataState) {
      this.take = dataState.take;
      this.skip = dataState.skip;
      this.filter = "Luty";
      this.sort = dataState.sort;
   
   this.getData();
    },
    dataStateChange: function (event) {
      
      this.createAppState(event.data);
    },
    cloneProduct(product) {
          return Object.assign({}, product);
          
      },
    newProduct(source) {
      
          const id = this.gridData.reduce((acc, current) => Math.max(acc, current.Id || 0), 0) + 1;
     
          const newProduct = {
              Id: id,
              Status: "",
              Data : "",
              LP : "",
              Nazwa_maszyny: "",
              Urzadzenie: "",
              Grupa: "",
              Foto: "",
              Priorytet: "",
              Lokalizacja: "",
              Wykonawca: "",
              Tydzien: "",
              Druk: "",
              Dod_info: "",
              Login: ""
          };  
          return Object.assign(newProduct, source);
          
      }
  },
};
</script>
<style>
.custom-checkbox input {
  width: 30px;
  height: 30px;
}
.wrapper {
  padding: 20px;
  display: flex;
  flex-direction: row;
}
.demo {
  display: flex;
  flex-direction: row;
  justify-content: left;
}
.demo2 {
  display: flex;
  flex-direction: row;
  justify-content: left;
}
 .k-grid .k-toolbar {
        background-color: rgb(224, 225, 187);
    }
        
</style>

Grid

answered on 15 Jul 2022

2 answers

427 views

SASS Compile error when kendo scss files are imported in stylesheet

Hello,

I've an error regarding Kendo style when I import it into an SCSS file. Let's assume I want to customize Kendo theme, I have 4 scss files :

_tokens.scss which contains color palette definition
the kendo scss theme (kendo-theme-bootstrap in this case, but same issue with the default theme)
_overrides.scss which may contains overrides (typhography, margin/padding on some components, etc)
and a base.scss file containing basically the import of the 3 preceding files :

@import 'tokens';
@import '@progress/kendo-theme-bootstrap/dist/all';
@import 'overrides';

However, when I import my base.scss file into the Vue App (whether in the main.js or the App.vue), I've this error :

Plugin: vite:css
  File: /src/node_modules/@progress/kendo-theme-bootstrap/dist/all.scss:37542:173
  Error: expected ";".
        ╷
  37542 │             background-image: url('../../node_modules/@progress/kendo-theme-bootstrap/dist/k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img'));
        │                                                                                                                                                                             ^
        ╵
    node_modules/@progress/kendo-theme-bootstrap/dist/all.scss 37542:173  @import
    src/assets/kendo.scss 2:9                                             @import
    src/assets/base.scss 1:9                                              root stylesheet

If I import directly the kendo-theme-bootstrap scss file in the main.js or the App.vue, there is no error. Here is the StackBlitz reproducing the error:

https://stackblitz.com/edit/vitejs-vite-f63fqh

How can I resolve this ?

Best Regards,

Fabien / SYSCO

General Discussions

answered on 03 Feb 2023

0 answers

108 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

2 answers

92 views

Size of Kendo download

Plea for help: Our front end guy left, and I've inherited his work :( I like the JS stuff, but I'm no expert.

Our new app has about a 4 megabyte app.js download, even when minified. We've turned on gzip compression on the server, and that gets it down to a bit over a meg, but we had a $1000 bandwidth overage last month!

I've been tasked with seeing if we are including unused code.

So, my question: In the docs I see this:

// As an alternative, you could import only the scripts that are used by the utility:

// import '@progress/kendo-ui/js/kendo.data' // Imports only the DataSource script and its dependencies

import '@progress/kendo-theme-default/dist/all.css'

import { DataSource,

HierarchicalDataSource,

GanttDataSource,

GanttDependencyDataSource,

PivotDataSource,

SchedulerDataSource,

TreeListDataSource,

DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'

Vue.use(DataSourceInstaller)

new Vue({

el: '#app',

components: {

DataSource,

HierarchicalDataSource,

GanttDataSource,

GanttDependencyDataSource,

PivotDataSource,

SchedulerDataSource,

TreeListDataSource,

DatasourceInstaller

}

})

I've got about six of these: layout, dateinputs, inputs, dropdowns, dialog, etc.

If I can identify which of the features I need from each I need from each "wrapper", can I cut this down? For instance, I'm sure we don't use gantt charts or pivots above.

Thanks,

Ed Greenberg

General Discussions

answered on 13 Mar 2020

0 answers

39 views

editor tools css broken

Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :

<Editor
                  ref="editor"
                  :tools="tools"
                  @blur="saveResumePI('draft');setValueEditor()"
                  v-model="candData.mem_about_me"
              />

second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question

you can ask more detail if my question is confusing
thanks

Editor

Styling / Themes