or
0 answers
347 views
I have an SpFx project using several kendo components and the default stylesheet. My package.json file is here:
{
"name": "project-name",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=16.13.0 <17.0.0"
},
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@fluentui/react": "^7.199.1",
"@microsoft/sp-component-base": "1.17.3",
"@microsoft/sp-core-library": "1.17.3",
"@microsoft/sp-lodash-subset": "1.17.3",
"@microsoft/sp-office-ui-fabric-core": "1.17.3",
"@microsoft/sp-property-pane": "1.17.3",
"@microsoft/sp-webpart-base": "1.17.3",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.5",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-react-animation": "^5.14.1",
"@progress/kendo-react-buttons": "^5.14.1",
"@progress/kendo-react-data-tools": "^5.14.1",
"@progress/kendo-react-dateinputs": "^5.14.1",
"@progress/kendo-react-dialogs": "^5.14.1",
"@progress/kendo-react-dropdowns": "^5.14.1",
"@progress/kendo-react-excel-export": "^5.14.1",
"@progress/kendo-react-grid": "^5.14.1",
"@progress/kendo-react-inputs": "^5.14.1",
"@progress/kendo-react-intl": "^5.14.1",
"@progress/kendo-react-layout": "^5.14.1",
"@progress/kendo-react-popup": "^5.14.1",
"@progress/kendo-react-progressbars": "^5.14.1",
"@progress/kendo-react-treeview": "^5.14.1",
"@progress/kendo-svg-icons": "^1.5.0",
"@progress/kendo-theme-default": "^6.6.0",
"moment": "^2.29.4",
"office-ui-fabric-react": "^7.199.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.17.3",
"@microsoft/eslint-plugin-spfx": "1.17.3",
"@microsoft/rush-stack-compiler-4.5": "0.5.0",
"@microsoft/sp-build-web": "1.17.3",
"@microsoft/sp-module-interfaces": "1.17.3",
"@rushstack/eslint-config": "2.5.1",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"eslint": "8.7.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.5.5"
}
}
I'm including the default style in my scss file like so:
@import '~@fluentui/react/dist/sass/References.scss';
@import "~@progress/kendo-theme-default/dist/all.scss";
.projectName {
.container {
max-width: 900px;
margin: 0px auto;
}
.header {
border-bottom: 1px dotted;
font-size: 24px;
font-weight: bold;
width: 100%;
}
.rowLight {
@include ms-Grid-row;
padding: 10px;
border-radius: 10px;
}
.row {
@include ms-Grid-row;
background-color: $ms-color-neutralLight;
padding: 10px;
border-radius: 10px;
}
.column1 {
@include ms-Grid-col;
@include ms-sm1;
@include ms-md1;
@include ms-lg1;
}
.column2 {
@include ms-Grid-col;
@include ms-sm2;
@include ms-md2;
@include ms-lg2;
}
.column3 {
@include ms-Grid-col;
@include ms-sm3;
@include ms-md3;
@include ms-lg3;
}
.column4 {
@include ms-Grid-col;
@include ms-sm4;
@include ms-md4;
@include ms-lg4;
}
.column5 {
@include ms-Grid-col;
@include ms-sm5;
@include ms-md5;
@include ms-lg5;
}
.column6 {
@include ms-Grid-col;
@include ms-sm6;
@include ms-md6;
@include ms-lg6;
}
.column7 {
@include ms-Grid-col;
@include ms-sm7;
@include ms-md7;
@include ms-lg7;
}
.column8 {
@include ms-Grid-col;
@include ms-sm8;
@include ms-md8;
@include ms-lg8;
}
.column9 {
@include ms-Grid-col;
@include ms-sm9;
@include ms-md9;
@include ms-lg9;
}
.column10 {
@include ms-Grid-col;
@include ms-sm10;
@include ms-md10;
@include ms-lg10;
}
.column12 {
@include ms-Grid-col;
@include ms-sm12;
@include ms-md12;
@include ms-lg12;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
span, .k-dropdown {
border-radius: 5px;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
border-radius: 5px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
.input {
border-radius: 5px;
}
.select {
border-radius: 5px;
}
}When I gulp build the generated scss.ts file is throwing an error for each line where a kendo class is inserted. The error is:
Error - [tsc] src/webparts/otdmpWebPartsCoordinatorDashboard/components/OtdmpWebPartsCoordinatorDashboard.module.scss.ts(8339,30): error TS1005: ';' expected.
The contents of the generated file are as follows:
/* tslint:disable */
require("./ProjectName.module.css");
const styles = {
'k-sr-only': 'k-sr-only_6c461fc7',
'k-theme-test-class': 'k-theme-test-class_6c461fc7',
'k-common-test-class': 'k-common-test-class_6c461fc7',
'k-body': 'k-body_6c461fc7',
'k-hstack': 'k-hstack_6c461fc7',
'k-hbox': 'k-hbox_6c461fc7',
'k-vstack': 'k-vstack_6c461fc7',
'k-vbox': 'k-vbox_6c461fc7',
'k-spacer': 'k-spacer_6c461fc7',
'k-flex': 'k-flex_6c461fc7',
'k-spacer-sized': 'k-spacer-sized_6c461fc7',
<deleted some "k-" styles to save space>
'k-signature-md': 'k-signature-md_6c461fc7',
'k-signature-lg': 'k-signature-lg_6c461fc7',
otdmpWebPartsCoordinatorDashboard: 'otdmpWebPartsCoordinatorDashboard_6c461fc7',
container: 'container_6c461fc7',
header: 'header_6c461fc7',
rowLight: 'rowLight_6c461fc7',
row: 'row_6c461fc7',
column1: 'column1_6c461fc7',
'ms-Grid': 'ms-Grid_6c461fc7',
column2: 'column2_6c461fc7',
column3: 'column3_6c461fc7',
column4: 'column4_6c461fc7',
column5: 'column5_6c461fc7',
column6: 'column6_6c461fc7',
column7: 'column7_6c461fc7',
column8: 'column8_6c461fc7',
column9: 'column9_6c461fc7',
column10: 'column10_6c461fc7',
column12: 'column12_6c461fc7',
title: 'title_6c461fc7',
subTitle: 'subTitle_6c461fc7',
description: 'description_6c461fc7',
button: 'button_6c461fc7',
label: 'label_6c461fc7',
input: 'input_6c461fc7',
select: 'select_6c461fc7',
loading: 'loading_6c461fc7',
'k-animation-blink': 'k-animation-blink_6c461fc7'
};
export default styles;
/* tslint:enable */In older versions of SpFx and Kendo I would just include the kendo css file in the TSX file but that wasn't working so I tried using the scss version instead. Please advise if there is something I have to do to work around this issue.
Thank you
Mark
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
07 Aug 2023
1 answer
607 views
Hi Team,
My apologies if this question seems stupid, and Im sure just I've missed some kind of key info, but Im having troubling understanding how to clear a form after submitting. I've reviewed the Form Advanced scenarios (as referenced in a few tickets) and I can see how changing the initial values works, but thats not what Im trying to do.
I see there is a onResetForm function but it only exists in the context of the formRenderProps, which is fine if your form renders a 'Clear' button, but mine doesnt.
Please advise.
Thanks,
Grant
Konstantin Dikov
Telerik team
answered
on
07 Aug 2023
1 answer
195 views
Greetings,
I'm having some issues with scrolling in Firefox.
When I try to scroll to the bottom, it goes back to the top and sometimes the grid starts flickering (going up and down).
The grid scrolling is working normally in Edge and Chrome but not in Firefox. Please help, thanks!
Jason Li
Wissam
Telerik team
answered
on
07 Aug 2023
1 answer
100 views
Follow the example in Angular:
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/animations/
I'd like to do something similar to this.
Thanks
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/animations/
I'd like to do something similar to this.
Thanks
Wissam
Telerik team
answered
on
07 Aug 2023
1 answer
96 views
I have a data grid that supports grouping, sorting and filtering. I am trying to implement some custom editing functionality which boils down to row edit that is triggered by selecting a row. However the second I add an onRowClick property to my grid, the grouping breaks, this happens even with an empty rowClick function. Is this to be expected or am I doing something wrong?
1 answer
111 views
Is license file for kendo react issued along with telerik Devcraft. If yes where its located and how to use it.
Wissam
Telerik team
answered
on
04 Aug 2023
1 answer
203 views
I've been having trouble building something using the grid.
I have several requirements:
- A grouped table or grid with three levels, having about 50 rows with six to eight numeric columns of percents.
- Sums (aggregates) of the columns at the top level and the second level.
- All of the numeric value cells should be in-cell editable.
- Editing the numeric value cells should update the aggregate numbers.
- Formatting and validation for values should be enforced: cells may only contain values from 0.00% to 100.00% to two decimal places.
I know that's a lot - we *might* be able to flex on the last three, but it would be preferred not to.
My issue is that updating a value updates the Grid's `data` prop, and the implementations I've tried so far seem to have one or two issues:
1) The input delay is quite large (calls to update the row onItemChange recalculate aggregates on every input). Recalculating and changing the state hook for the Grid's `data` prop takes noticeable time.
2) When using a custom cell via `cells={{}}`, updating causes the input to lose focus. If one enters a value and hits the Tab key to focus the next (custom) cell input, updating the Grid's `data` prop causes the Grid to be redrawn. I'm passing `dataItemKey` to the Grid component, and each custom cell has set `key={id}`, but the focus is lost regardless.
I would appreciate any input you could provide, including "You should use <<other thing>>".
Konstantin Dikov
Telerik team
answered
on
03 Aug 2023
1 answer
162 views
Hi Team,
I have a problem with uploading multiple files. I tried to upload multiple files at the same time. And when it is done, the validation message of some files is not consistent. (some files display the size of the file instead of the validation message)
This issue happens in my local, but I can't reproduce it in the demo example of React Kendo Upload Component.
Are there any ideas for fixing this issue?
Note: I used the latest version of the upload component (version @5.16.1)
Thanks.
Wissam
Telerik team
answered
on
03 Aug 2023
1 answer
144 views
Hi,
We use OData to get data, default page size is 10.
When we try to export to excel all pages of data it only exports first 10 records.
How can we export all pages of data ?
Thanks.
Konstantin Dikov
Telerik team
answered
on
03 Aug 2023
2 answers
95 views
Hi.
In your documentation example of the MultiViewCalendar on this page you write "For the custom cell to allow date selection, manually pass or handle the onClick event".
In the code of the example the onClick event is handled in the CustomCell component but still nothing happens if I click on a date that should be a valid selection. I tried it out myself in my code and it doesn't work. Isn't the "handleClick" method in the CustomCell component enough to handle the onClick event?
And another question: Is it also possible to allow to select more than one day in the Calendar component?
Thanks,
Greetings,
Bernd
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Rank 5
Bronze
Bronze
Bronze
answered
on
03 Aug 2023
