Telerik Forums
Kendo UI for Vue Forum
15 questions
Sort by
1 answer
33 views
Is it possible to render a dialog with a component as its content? If not, is it possible with a Window?
Veselin Tsvetanov
Telerik team
 answered on 22 Mar 2018
1 answer
39 views

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.

Petar
Telerik team
 answered on 02 Aug 2022
6 answers
231 views

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

 

Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
 answered on 13 Feb 2020
1 answer
124 views

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?

 

Petar
Telerik team
 answered on 03 Mar 2022
0 answers
31 views

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.

Don
Top achievements
Rank 1
 asked on 22 Feb 2023
1 answer
45 views
  <!-- :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>
Petar
Telerik team
 answered on 15 Jul 2022
2 answers
427 views

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

Ivan Zhekov
Telerik team
 answered on 03 Feb 2023
0 answers
108 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
2 answers
92 views

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

Ed
Top achievements
Rank 1
 answered on 13 Mar 2020
0 answers
39 views

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

 
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 02 Feb 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Editor wrapper
Input
NumericTextBox
Editor
DataSource wrappers (package)
DateInput
MultiSelect
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Upload
Scheduler
Calendar
DropDownList wrapper
Localization
Window
Tooltip
Chart wrappers (package)
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TreeView wrapper
TabStrip
Error
FloatingLabel
Form
TextArea
Stepper
Splitter
PanelBar
TreeView
Notification
Menu
TreeList
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?