Questions on KendoReact Forum

1 answer

202 views

Kendo grid column template with locked column(s)

Hello.

My question is. If I use a template for column (props: cell) and locked columns in the same grid. Grid does not behave correctly when scrolling. The body/columns of the grid scrolls, but the headers do not. How to use it correctly? We use version: 5.10.0

Well thank you.

Grid

answered on 10 Aug 2023

1 answer

90 views

How do I use drag and drop to change a Chart position and then save the position in localstorege

import * as React from "react"; import * as ReactDOM from "react-dom"; import { Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartLegend } from "@progress/kendo-react-charts"; import 'hammerjs'; const categories = [2002, 2003, 2004]; const series = [{ name: "India", data: [3.907, 7.943, 7.848] }, { name: "Russian Federation", data: [4.743, 7.295, 7.175] }, { name: "Germany", data: [0.21, 0.375, 1.161] }, { name: "World", data: [1.988, 2.733, 3.994] }]; const areaData = [{ name: "World", data: [3.988, 3.733, 3.994] }, { name: "Germany", data: [2.21, 2.375, 2.161] }, { name: "Russian Federation", data: [1.743, 1.295, 1.175] }, { name: "India", data: [0.907, 0.943, 0.848] }]; const pieData = [{ name: "India", share: 0.24 }, { name: "Russian Federation", share: 0.26, explode: true }, { name: "Germany", share: 0.1 }, { name: "World", share: 0.4 }]; const ChartContainer = () => <> <div className="row mb-3"> <div className="col-6"> <div className="k-card"> <Chart style={{ height: 350 }}> <ChartTitle text="Column Chart" /> <ChartLegend position="top" orientation="horizontal" /> <ChartCategoryAxis> <ChartCategoryAxisItem categories={categories} startAngle={45} /> </ChartCategoryAxis> <ChartSeries> {series.map((item, idx) => <ChartSeriesItem key={idx} type="column" tooltip={{ visible: true }} data={item.data} name={item.name} />)} </ChartSeries> </Chart> </div> </div> <div className="col-6"> <div className="k-card"> <Chart style={{ height: 350 }}> <ChartTitle text="Line Chart" /> <ChartLegend position="top" orientation="horizontal" /> <ChartCategoryAxis> <ChartCategoryAxisItem categories={categories} startAngle={45} /> </ChartCategoryAxis> <ChartSeries> {series.map((item, idx) => <ChartSeriesItem key={idx} type="line" tooltip={{ visible: true }} data={item.data} name={item.name} />)} </ChartSeries> </Chart> </div> </div> </div> <div className="row"> <div className="col-6"> <div className="k-card"> <Chart style={{ height: 350 }}> <ChartTitle text="Area Chart" /> <ChartLegend position="top" orientation="horizontal" /> <ChartCategoryAxis> <ChartCategoryAxisItem categories={categories} startAngle={45} /> </ChartCategoryAxis> <ChartSeries> {areaData.map((item, idx) => <ChartSeriesItem key={idx} type="area" tooltip={{ visible: true }} data={item.data} name={item.name} />)} </ChartSeries> </Chart> </div> </div> <div className="col-6"> <div className="k-card"> <Chart style={{ height: 350 }}> <ChartTitle text="Pie Chart" /> <ChartLegend position="top" orientation="horizontal" /> <ChartSeries> <ChartSeriesItem type="pie" overlay={{ gradient: "sharpBevel" }} tooltip={{ visible: true }} data={pieData} categoryField="name" field="share" /> </ChartSeries> </Chart> </div> </div> </div> </>; ReactDOM.render(<ChartContainer />, document.querySelector("my-app"));

Charts

Drag and Drop

answered on 10 Aug 2023

1 answer

90 views

The triggering of the Grid select method is limited to clicking the checkbox

Can the select function of the Grid be limited to only triggering onSelect by clicking the checkbox? because when the Grid has detail at the same time, clicking any cell will cause the component of the detail to re-render

Grid

answered on 10 Aug 2023

0 answers

69 views

React Spreadsheet Rest Data

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

230 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

105 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

325 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

545 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

183 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

90 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