Questions on KendoReact Forum

1 answer

115 views

How to show text-overflowed items in Comobox with virtualization

Hi,

When a combobox has virtualization enabled. If an item's text is too long, instead of wrapping the line, it is now showing ellipsis. I am guessing it wants to keep a fixed height for every item for virtualization purpose. Is there a way to show the full text if its overflowed? For example, show a tooltip when mouse over the item?

Thanks,

Jie

ComboBox

DropDownList

answered on 08 Aug 2023

0 answers

350 views

SharePoint SpFx project SCSS compliation error

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

Styling

Styling / Themes

asked on 07 Aug 2023

1 answer

608 views

How to Reset a form on submit

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

Form

answered on 07 Aug 2023

1 answer

195 views

Kendo React - Grid with Virtual Scrolling in Firefox

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

Grid

answered on 07 Aug 2023

1 answer

100 views

Is it possible to animate dialogs in React like in Angular?

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

Dialog

answered on 07 Aug 2023

1 answer

96 views

Data grid grouping breaks when implementing onRowClick functionality

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?

Editor

Grid

answered on 06 Aug 2023

1 answer

111 views

Does Telerik ultimate Devcraft include license for kendo react

Is license file for kendo react issued along with telerik Devcraft. If yes where its located and how to use it.

General Discussions

answered on 04 Aug 2023

1 answer

208 views

Combining Grid grouping with always-editable in-cell editing.

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

Data Query

Grid

answered on 03 Aug 2023

1 answer

162 views

validation message issues with upload multiple files

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.

Upload

answered on 03 Aug 2023

1 answer

144 views

How to Excel export all Pages in a Kendo React grid?

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.

Excel Export

Grid

answered on 03 Aug 2023