Questions on Kendo UI for Vue Forum

1 answer

118 views

Kendo UI Grid View implementation using vue | pagination issue

I have implemented client side grid that is successfully fetching my data. When the grid loads, the data is present but pagination is not displaying any data (page number , total items count, page size) for the first load. If I do any action like sorting, filtering or resizing on my table then grid is getting refresh and pagination is working as expected.

How to resolve this ?

Grid

Pager

answered on 29 Aug 2022

1 answer

99 views

Change Editor Per Row

Hi,

I am working with a grid that uses two columns (Settings & Value). I currently have the Value column editable, but I would like to add a specific editor to each value depending on the type of setting I have. So far it looks like you can only set one type of editor for the entire column. I am curious if there is a workaround I am missing to be able to change the editor type per row.

Thank you

Editor

Grid

updated answer on 12 Aug 2022

1 answer

236 views

Kendo UI Grid View implementation using vue | pageable functionality issue

I'm trying to implement a Kendo grid for my Vue project and I was trying to show the pagination with items per page option with a custom message like "Rows per page"

we have a pageable option to show the custom message for these labels, but even after adding the custom text, I don't see the change in the UI.

Here is my code :

<Grid
      :id="tableId"
      :data-items="items"
      :resizable="resizable"
      :columns="displayedColumns"
      :pageable="pageable"
>
<Grid>

 computed: {
    pageable() {
      return {
        buttonCount: 5,
        info: true,
        type: 'numeric',
        pageSizes: [5, 10, 25, 50],
        previousNext: true,
        pageSizeValue: this.pageSizeValue,
        messages:{
          itemsPerPage: 'rows per page',
        }
      };
    },
 }

Am I missing something? Can someone please help?

Thanks.

Grid

answered on 05 Aug 2022

2 answers

103 views

Selecto all doesnt work - Native Grid

Hi everyone,

I'm having some problems with pageable configuration in kendo native grid. In pageSize I have this array [ 10, 15, 20, "all" ] but when I click on "all" it doesn't work and says "No records available". Do you have an example of this kind of implementation? I've tested in 2.1.2 and 3.4.4 versions.

Thanks a lot.

Grid

answered on 02 Aug 2022

1 answer

127 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.

answered on 02 Aug 2022

1 answer

174 views

Kendo UI for Vue

Hey all. I’ve done some work with Vue recently and trying to display tabular data in Teleriks Kendo Grid component. Have no problem getting data in but looking to see how I can get the selected rows. I tried referencing the Angular and JQuery documentation but haven’t had much luck. Anyone know how to do this?

I’ll post code reference later if it would help. Posting this from my phone.

Thanks!

General Discussions

updated question on 01 Aug 2022

1 answer

76 views

Vue with Kendo UI Grid Selection

Hey all. I’ve done some work with Vue recently and trying to display tabular data in Teleriks Kendo Grid component. Have no problem getting data in but looking to see how I can get the selected rows. I tried referencing the Angular and JQuery documentation but haven’t had much luck. Anyone know how to do this?

I’ll post code reference later if it would help. Posting this from my phone.

Thanks!

General Discussions

answered on 01 Aug 2022

2 answers

1.8K+ views

Uncaught (in promise) ReferenceError: kendo is not defined

Hello,

I am receiving the following error when I try to implement ListView in my current project, "Uncaught (in promise) ReferenceError: kendo is not defined". I have seen similar issues posted but none of those solutions seem to apply to my situation.

In my current project I have implemented Kendo Grid and Dropdown. You can see below that the error is originating from the KendoListViewMixin.js file. I have installed the latest version of both "@progress/kendo-listview-vue-wrapper" & "@progress/kendo-ui", which should be all I need for what I am doing. Any insight into what I might be missing?

ListView wrapper

answered on 28 Jul 2022

1 answer

139 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

1 answer

158 views

CDN Redirect Pending

Hello,
I have been using kendo for Vue for a while now. The site has be up and running for over a year. Yesterday people starting complaining that the page was not loading. When I look at the network traffic it shows that the CDN file are in a pending state. Can you tell me why this is happening?

Here is a screen shot of the network traffic. If you scroll to the right you will see they are all in the state of pending.

AutoComplete wrapper

Grid wrapper

answered on 12 Jul 2022