Questions on KendoReact Forum

0 answers

73 views

Hi,

I am planning to use React Spreadsheet for one of my projects. Unfortunately, I am unable to bind remote data to spreadsheet. All examples I could find are using static files to set the spreadsheet structure and on my own tests I failed to re-render spreadsheet component when remote data is bound. Could you please provide an example in that matter?

Here is my code:

  const defaultStructure = {
      sheets: [
        {
          name: t('Summary'),
          mergedCells: ['B1:C1'],
          rows: [
            {
              height: 25,
              cells: [
                {
                  value: t('Please enter customer name'),
                  textAlign: 'center',
                  index: 0,
                },
                {
                  background: 'rgb(167,214,255)',
                  textAlign: 'center',
                  index: 1,
                },
              ],
            },
            {
              height: 50,
              cells: [
                {
                  value: t('Please enter minimum gross salary of your region'),
                  textAlign: 'center',
                  index: 0,
                },
                {
                  value: '',
                  background: 'rgb(167,214,255)',
                  textAlign: 'center',
                  index: 1,
                },
              ],
            },
          ],
          columns: [
            {
              width: 400,
            },
            {
              width: 200,
            },
            {
              width: 400,
            },
          ],
        },
        {
          name: t('Parametric Data Entry'),
          rows: [],
          columns: [
            {
              width: 100,
            },
            {
              width: 100,
            },
          ],
        },
      ],
    }

const [structure, setStructure] = useState(defaultStructure)

    useEffect(() => {
      if (!store?.parameters.isLoaded) return

      const p = store?.parameters.parameters
      const s = defaultStructure.sheets[0]

      defaultStructure.sheets[0].rows[1].cells[1].value = p?.grossWage

      setStructure({ ...defaultStructure })
    }, [store?.parameters.isLoaded])

   
    return (
      <>
          <div className="p-3">
            <div className="card-body">
              <Spreadsheet
                style={{
                  width: '100%',
                  height: 680,
                }}
                defaultProps={structure}
              />
            </div>
          </div>
      </>
    )
  })

Regards,

asked on 10 Aug 2023

2 answers

240 views

How to implement both drag drop and selection in datagrid

Hi,

I try to implement drag drop row and selection row in datagrid, So I try your demo code https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/.

but when I just add 'selectable' property to the demo code, The drag-drop behavior looks strange, after that, I add all selection code in demo https://www.telerik.com/kendo-react-ui/components/grid/selection/, It is still can not drag drop normally

is it a bug? or currently not support both drag-drop and selection row?

Grid

updated answer on 10 Aug 2023

1 answer

112 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

336 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

573 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

192 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

97 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

94 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

107 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

189 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