Questions on Kendo UI for Vue Forum

1 answer

20 views

Hi!

I have a question.

I would like to mark Saturday in blue and Sunday in red.
The only information I have is the 'k-weekend' class that doesn't seem to distinguish Saturday from Sunday.

Is there a simple way to distinguish it?

I don't want to mess with props if possible.

Thanks for reply

Calendar

DatePicker

answered on 07 Mar 2024

1 answer

127 views

Vue wrapper components

Hi all,
I would like to try Kendo Vue SpreadSheet wrapper component.

Because there is no native Vue SpreadSheet component at the moment.

I have tried somethings but I cannot run my example programs.

I have installed kendo-ui and spreadsheet wrapper (or any other wrappers).

When I run the program with npm run dev I got error below.
(I tried it on Windows 10 and Linux Ubuntu 22)

EDIT: I found this https://github.com/telerik/kendo-ui-core/issues/7238, but there is no solution addressed.

=========================================================================

VITE v4.2.1 ready in 391 ms

Local: http://localhost:5173/
Network: use --host to expose
press h to show help
✘ [ERROR] Unterminated string literal

node_modules/@progress/kendo-ui/umd/kendo.all.min.js.map:1:6045463:
1 │ ...x3e8);}return _0x135b10[_0x3505('0x4')]=_0x31765a,_0x135b10[_0x3505('0x28')]=_0x4b9d63,Object[_0x3505('0x4d')](_0x135b10,_0x3505('0x4f'),{'value':!![]}),_0x135b10;}({});
╵ ^

The source map "node_modules/@progress/kendo-ui/umd/kendo.all.min.js.map" was referenced by the
file "node_modules/@progress/kendo-ui/umd/kendo.all.min.js" here:

node_modules/@progress/kendo-ui/umd/kendo.all.min.js:3:21:

Spreadsheet wrapper

answered on 07 Apr 2023

1 answer

154 views

Kendo vue UI Grid column with Vue bootstrap Form Datepicker calender is not showing completly inside the grid column cell

We have a Kendo vue UI Grid column with Vue bootstrap Datepicker as a custom column.

When we click the calender icon it is partially showing inside the cell. I want it to be show as an popup outside the cell.

Below is the code snippet from the custom cell component

right now it show like the attached screenshot:

Please suggest a solution for achieving the same.

Thank You

Grid

answered on 10 Jun 2020

6 answers

593 views

native grid grouping not working

Hi,

I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.

I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.

It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.

Other gird features are working fine.

<template>

<v-card shaped>

<v-card-title>

<h3>

Product

</h3>

</v-card-title>

<v-card-text>

<Grid

:style="{height: '800px'}"

:data-items="gridDataResult"

:filterable="true"

:filter="filter"

:groupable="true"

:group="group"

:pageable="pageable"

:reorderable="true"

:resizable="true"

:sortable="true"

:sort="sort"

:skip="skip"

:take="take"

:total="total"

:expand-field="'expanded'"

:columns="columns"

:column-menu="columnMenu"

@pagechange="pageChangeHandler"

@filterchange="filterChange"

@sortchange="sortChangeHandler"

@dataStateChange="dataStateChange"

@expandchange="expandChange"

@columnreorder="columnReorder"

>

<!-- <grid-toolbar>

<button

title="Add new"

class="k-button k-primary"

@click="insert"

>

Add new

</button>

<button

v-if="hasItemsInEdit"

title="Cancel current changes"

class="k-button"

@click="cancelChanges"

>

Cancel current changes

</button>

</grid-toolbar> -->

<grid-no-records>

<div class="k-loading-mask customPosition">

<span class="k-loading-text" />

<div class="k-loading-image" />

<div class="k-loading-color" />

</div>

</grid-no-records>

</Grid>

</v-card-text>

</v-card>

</template>

<script>

import { process } from '@progress/kendo-data-query';

// import { mapGetters } from 'vuex';

// import { mapGetters, mapActions } from 'vuex';

export default {

name: 'Product',

components: {},

data() {

return {

columnMenu: false,

expandedItems: [],

gridPageable: { pageSizes: true },

skip: 0,

take: 10,

pageSize: 10,

pageable: {

buttonCount: 10,

info: true,

type: 'numeric',

pageSizes: true,

previousNext: true,

},

filter: {

logic: '',

filters: [

// { field: 'UnitPrice', operator: 'neq', value: 18 },

// { field: 'calendarMonth', operator: 'gte', value: new Date('1996-10-10') },

],

},

group: [],

sort: [{ field: 'id', dir: 'asc' }],

// sort: [

// { field: 'id', dir: 'asc' },

// ],

columns: [

{

field: 'id',

title: 'ID',

// width: '70px',

},

{

field: 'currency',

title: 'Currency',

// width: '100px',

},

{

field: 'salesOrigin',

title: 'Sales Origin',

// width: '100px',

// filter: 'numeric',

// groupable: true,

},

{

field: 'plant',

title: 'Plant',

// width: '100px',

// filter: 'numeric',

// groupable: true,

},

{

field: 'sku',

title: 'SKU',

// width: '100px',

// groupable: true,

},

{

field: 'materialGroupDescription',

title: 'Material Group Description',

// width: '100px',

},

{

field: 'materialDescription',

title: 'Material Description',

// width: '100px',

},

{

field: 'swatchDisplayColourDescription',

title: 'Colour',

// width: '100px',

},

{

field: 'calendarMonth',

filter: 'date',

title: 'Calendar Month',

// width: '100px',

// groupable: true,

},

{

field: 'discontinued',

title: 'Discontinued',

// filter: 'boolean',

// groupable: true,

},

// {

// command: [

// {

// name: 'edit',

// text: ' ',

// width: 10,

// },

// {

// name: 'destroy',

// text: ' ',

// width: 10,

// },

// ],

// title: 'Actions',

// // width: '150px',

// },

],

};

},

computed: {

gridDataResult: {

get() {

// const data = process(this.$store.getters.aggregatedBoDataList,

// {

// sort: this.sort,

// take: this.take,

// skip: this.skip,

// filter: this.filter,

// group: this.group,

// });

// console.log(data);

return process(this.$store.getters.aggregatedBoDataList,

{

take: this.take,

skip: this.skip,

sort: this.sort,

filter: this.filter,

group: this.group,

});

},

set(data) {

return process(data,

{

take: this.take,

skip: this.skip,

sort: this.sort,

filter: this.filter,

group: this.group,

});

},

total() {

return this.$store.getters.aggregatedBoDataList

? this.$store.getters.aggregatedBoDataList.length : 0;

},

created() {

this.$store.dispatch({

type: 'fetchAggregatedBoData',

count: 200,

});

},

methods: {

createAppState(dataState) {

console.log(`dataState ${dataState}`);

this.group = dataState.group;

this.take = dataState.take;

this.skip = dataState.skip;

this.girdDataResult(dataState.data);

// this.getData();

},

groupChange(event) {

console.log(event);

},

dataStateChange(event) {

console.log(`data state ${event}`);

this.createAppState(event.data);

},

expandChange(event) {

console.log(`expand state ${event.target.$props.expandField}`);

this.$set(event.dataItem, event.target.$props.expandField, event.value);

},

pageChangeHandler(event) {

this.skip = event.page.skip;

this.take = event.page.take;

},

sortChangeHandler(e) {

this.sort = e.sort;

},

filterChange(ev) {

this.filter = ev.filter;

},

columnReorder(options) {

this.columns = options.columns;

},

};

</script>

<style>

.customPosition { margin-top:100px}

</style>

Grid

answered on 24 Apr 2020

0 answers

50 views

How to change the default Business/WorkDay Hours

I am developing a software in which I integrate the scheduler component for VUE. By default the hours associated with business /workday are set from 8 AM to 4 PM. My question is how can I change these same hours to, for example, from 9 AM to 6 PM?

This is my code

<template>
<div v-if="this.userRole === 'Admin' || this.userRole === 'Admin Client'">
<Scheduler :data-items="sampleData" :default-date="displayDate" :views="views" :view="view" :editable="editable" :timezone="'Europe/Lisbon'" @datachange="handleDataChange" :form="'formRender'" :allDayEditor="'customAllDayEditor'">
<template v-slot:formRender="{ props }">
<customEditForm :task="props.dataItem" @selectedNormChange="handleSelectedNormChange" @responsiblesChange="handleResponsiblesChange" @cancel="props.onCancel" />
</template>
</Scheduler>
</div>
<div v-else>
<Scheduler :data-items="sampleData" :default-date="displayDate" :views="views" :view="view" :editable="editable" :timezone="'Europe/Lisbon'" @datachange="handleDataChange" :form="'formRender'" :allDayEditor="'customAllDayEditor'">
<template v-slot:formRender="{ props }">
<customEditForm :task="props.dataItem" @selectedNormChange="handleSelectedNormChange" @responsiblesChange="handleResponsiblesChange" @cancel="props.onCancel" />
</template>
</Scheduler>
</div>
</template>
<script>
import '@progress/kendo-date-math/tz/Europe/Lisbon';
import {
Scheduler
} from '@progress/kendo-vue-scheduler';
import EditorForm from './FormEditor.vue';
import {
postCreateTask,
putCreateTask,
deleteTask,
getTasksByAudit
} from "../Services/tasksService";
export default {
name: 'Calendar',
components: {
Scheduler,
customEditForm: EditorForm,
},
props: {
selectedNorm: {
type: String,
default: null,
},
isNormObligatory: {
type: Boolean,
default: false,
},
userRole: {
type: String,
required: true,
},
},
created() {
let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
if (urlParams.has('task')) {
this.audit_id = urlParams.get('task');
this.status = "Scheduler";
this.place = "Scheduler";
this.getData()
} else {
//ERRO mostar mensagem de erro generico.
}
this.displayDate = new Date(); // Update displayDate to current date
},
data() {
return {
view: 'day',
valueProgressBar: 0,
success: false,
editable: {
add: true,
remove: true,
edit: true,
},
views: [{
name: 'day',
title: 'Day View'
}, {
name: 'workweek',
title: 'Week View'
}, {
name: 'month',
title: 'Month View'
}, {
name: 'agenda',
title: 'Agenda View'
}, ],
sampleData: [],
displayDate: new Date(),
formMode: '', // Propriedade para controlar o modo do formulário
selectedNormValue: null, // Nova propriedade para armazenar o valor da norma selecionada
isNormObligatoryValue: false,
selectedResponsiblesValue: null,
};
},
methods: {
.... // defined methods
}
< script >

General Discussions

Scheduler

asked on 02 Aug 2023

4 answers

593 views

DatePicker Custom Validation Styling

I have a native DatePicker that I am using in an application with many components that use the Kendo wrapper validation widget. I am trying to get the behavior and appearance of the DatePicker to match that of the existing components. Validation should occur when a field loses focus and an invalid field should have a red outline and red error message below it. I tried to use the native DatePicker validation functionality, but I was unable to make validation consistent with all of the other components.

I am able to use the Kendo wrapper validation widget to perform validation when a field loses focus and display an error message, but I have been unable to get a red outline on an DatePicker in the invalid state. How can I accomplish this?

See https://stackblitz.com/edit/esiptm for an example.

DatePicker