Telerik Forums
Kendo UI for Vue Forum
8 questions
Sort by
4 answers
973 views

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
            :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
            :transport-read-data-type="'jsonp'"
            :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
            :transport-update-data-type="'jsonp'"
            :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
            :transport-destroy-data-type="'jsonp'"
            :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
            :transport-create-data-type="'jsonp'"
            :transport-parameter-map="parameterMap"
            :server-paging="true"
            :page-size='5'>
    </kendo-datasource>
 
    <kendo-grid :height="600"
            :data-source-ref="'datasource1'"
            :pageable='true'
            :editable="'inline'"
            :page-size='5'
            :toolbar="['create']">
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>
        <kendo-grid-column :command="['edit', 'destroy']" title=" " width="170px"></kendo-grid-column>
    </kendo-grid>
</div>

 

And here's my JS (using webpack):

Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);
 
new Vue({
    el: '#vueapp',
    data: {
        schemaModelFields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
            Discontinued: { type: 'boolean' },
            UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
        }
    },
    methods: {
        customBoolEditor: function(container, options) {
            kendo.jQuery('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)
            kendo.jQuery('<label class="k-checkbox-label"></label>').appendTo(container)
        },
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        }
    }
})

 

Am I doing something wrong, or is this functionality not supported yet?

Veselin Tsvetanov
Telerik team
 answered on 04 Jun 2018
1 answer
152 views
I'm trying to implement a Kendo grid for my project and I was trying to add 'all' options in the pagination and used pageChange  event to set the take value but getting event value as undefined. 

pageable() { return { buttonCount: 5, info: true, type: 'numeric', pageSizes: [10, 15, 20, 'all'], previousNext: true, }; }

pageChangeHandler: function (event) {
  this.skip = event.page.skip;
  this.take = event.event.value === 'all' ? 1000 : event.page.take;
},

 

Petar
Telerik team
 answered on 06 Sep 2022
1 answer
49 views
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 ? 
Petar
Telerik team
 answered on 29 Aug 2022
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
1 answer
67 views
HI, 

I'm working with the Project using Kendo Vue Grid Wrapper, and my client want to make the pagination always on the bottom,
Can we customize the Kendo Grid Wrapper pagination,to make it fixed on the bottom section?


Best Regards
Thank you
Martin
Telerik team
 answered on 18 Mar 2020
1 answer
100 views

We trying to implement a Kendo grid for my project and I was trying to add 'All' option in the pagination and used dataStateChange event to set the take value but getting event value as undefined.

Whenever we select "All" option from the dropdown, In dataStateChange method , I am getting selected value as "totalItemCount" instead of "All", but I can see both "totalItemCount" and "All" options in dropdown.

Example:

we have 1000 records as "totalItemCount" in a table, provided image below. So I am able to see all the records in the table but in dropdown we can see both 1000 and "All" option. We only need to see "All" not 1000.

We should not see "totalItemCount" in the dropdown(as well as selected option) and see only "All" as a selected option(as well as dropdown) when we select "All" option from dropdown.

Can someone help to solve this issue, please?

 


pageable() { return { buttonCount: 5, info: true, type: 'numeric', pageSizes: [10, 15, 20, 'All'], previousNext: true, pageSizeValue: this.pageSizeValue, }; }, dataStateChange: function (event) { this.loader = false; this.skip = event.data.skip; this.take = event.event.value === 'All' ? 1000 : event.page.take; this.pageSizeValue = 'All'; },



Petar
Telerik team
 answered on 09 Dec 2022
3 answers
293 views

Hallo,

I am trying to include a custom toolbar into the vue template.

<template>
  <div class="page">
    <h1>Author</h1>
    <client-only>
      <kendo-datasource ref="ds"
          :schema-model-id="'id'"
          :schema-model-fields="model"
          :schema-data="schema"

          :transport-create-beforeSend="onBeforeSend"
          :transport-create-url="'http://192.168.1.11:8000/graphql'"
          :transport-create-content-type="'application/json'"
          :transport-create-type="'POST'"
          :transport-create-data="additionalParamsOnCreate"

          :transport-read-beforeSend="onBeforeSend"
          :transport-read-url="'http://192.168.1.11:8000/graphql'"
          :transport-read-content-type="'application/json'"
          :transport-read-type="'POST'"
          :transport-read-data="additionalParamsOnRead"

          :transport-update-beforeSend="onBeforeSend"
          :transport-update-url="'http://192.168.1.11:8000/graphql'"
          :transport-update-content-type="'application/json'"
          :transport-update-type="'POST'"
          :transport-update-data="additionalParamsOnUpdate"

          :transport-destroy-beforeSend="onBeforeSend"
          :transport-destroy-url="'http://192.168.1.11:8000/graphql'"
          :transport-destroy-content-type="'application/json'"
          :transport-destroy-type="'POST'"
          :transport-destroy-data="additionalParamsOnDestroy"

          :page-size="20"
          :transport-parameter-map="parameterMap">
      </kendo-datasource>
      <kendo-grid ref ="mainGrid"
                  :data-source-ref="'ds'"
                  :edit-field="'inEdit'"
                  :navigatable="true"
                  :pageable="true"
                  :editable="true">
          <!-- first try -->
          <!--
          :toolbar="["create"]"
          -->
          <!-- second try -->
          <!--   
          <GridToolbar class="k-header k-grid-toolbar">
            <button href="#" title="Add new" class="k-button k-button-icontext k-grid-add" @click="insert">
              Add new
            </button>
          </GridToolbar>
          -->
          <!-- third try -->
          <div class="k-header k-grid-toolbar">
            <a role="button" class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-i-plus" @click="testClick"></span> Command</a>
          </div>

          <kendo-grid-column :field="'id'"
                             :title="'ID'"
                             :width="80">
          </kendo-grid-column>
          <kendo-grid-column :field="'firstName'"
                             :title="'firstName'"
                             :width="80">
          </kendo-grid-column>
          <kendo-grid-column :field="'lastName'"
                             :title="'lastName'"
                             :width="80">
          </kendo-grid-column>
      </kendo-grid>
    </client-only>
    <kendo-notification ref="popupNotification"
        @show="onShow"
        @hide="onHide">
    </kendo-notification>

  </div>
</template>
<script>
import { Button } from '@progress/kendo-buttons-vue-wrapper';
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper';
import { KendoDataSource } from '@progress/kendo-datasource-vue-wrapper';
import { Notification } from '@progress/kendo-popups-vue-wrapper';
import { READ_AUTHORS_QUERY, ADD_AUTHOR_QUERY, UPDATE_AUTHOR_QUERY,DELETE_AUTHOR_QUERY } from '../graphql/author'
export default { 
  name: 'App',
  components: {
    'k-button': Button,
    'kendo-grid': Grid,
    'kendo-grid-column': GridColumn,
    'kendo-notification': Notification,
  },
  created: function() {
    console.log('created');

  },
  mounted: function() {
    console.log('mounted');
    this.popupNotificationWidget = this.$refs.popupNotification.kendoWidget();
    console.log('mounted2');
  },
  methods: {
    insert: function() {
      this.popupNotificationWidget.show('insert');
    },
    onClick: function (ev) {
        console.log("Button clicked!");
    },
    testClick: function (ev) {
        this.popupNotificationWidget.show('testClick');
        console.log("test clicked!");
    },
    onShow: function (e) {
      console.log("Show")
    },
    onHide: function (e) {
      console.log("Hide")
    },
    onBeforeSend: function(req) {
      let component = this;
      // req.setRequestHeader("Authorization", "bearer ...tokenstring...");
    },
    additionalParamsOnCreate: function(model) {
      return {
        query: ADD_AUTHOR_QUERY,
        variables: {author: model } 
      };
    },
    additionalParamsOnRead: function(model){
      console.log('additionalParamsOnRead')

      return {
        query: READ_AUTHORS_QUERY,
      };
    },
    additionalParamsOnUpdate: function(model){
        return {
        query: UPDATE_AUTHOR_QUERY,
        variables: {author: model }
      };    
    },
    additionalParamsOnDestroy: function(model){
      return {
        query: DELETE_AUTHOR_QUERY,
        variables: {author: model } 
      };
    },
    parameterMap: function(options, operation) {
      return  kendo.stringify({
        query: options.query,
        variables: options.variables
      });
    },
    schema: function (response) {
      var data = response.data;
      if (data.authors) {
        return data.authors;
      } else if (data.AddAuthor) {
        return data.AddAuthor;
      } else if (data.UpdateAuthor) {
        return data.UpdateAuthor;
      } else if (data.DeleteAuthor) {
        return data.DeleteAuthor;
      }
    },
  },

  data: function() {
    return {
      model: {
        id: "id",
        fields: {
          id: { editable: false, nullable: true },
          firstName: { type: "string" },
          lastName: { type: "string" }
        }
      }
    }
  }
}
</script>
<style>
</style>
The fist try with built-in function works: a new empty record ist displayed in first lineof the grid.

The second and third try call the methods, but no new empty record is generated.

I cannot get this to work - is this possible?

Regards,

Michael

Petar
Telerik team
 answered on 18 Nov 2020
0 answers
202 views

Hello,

 

In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.

I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?

Thanks

//This adds a custom template to my column menu

column.columnMenu = "CheckboxColumnFilterRender";

//This adds a custom icon and a custom color to my column header

headerClassName:"generic-filter-icon c-gray-600",

 

<templatev-slot:CheckboxColumnFilterRender="{ props }">

                        <NbGenericCheckboxesColumnFilter
                            v-if="gridDataReady"
                            :column="props.column"
                            :filterable="props.filterable"
                            :filter="props.filter"
                            :data-items="dataItems"
                            @filterChange="(e) => props.onFilterchange(e)"
                            @closeMenu="(e) => props.onClosemenu(e)"
                            @contentFocus="(e) => props.onContentfocus(e)"
                        ></NbGenericCheckboxesColumnFilter>
                   

</template>

Daniel
Top achievements
Rank 2
Iron
Iron
 asked on 03 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?