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?
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;
},
A number of Kendo components could do with better support for screen readers, including:
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.
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'; },
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
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 }">
</template>