Questions on KendoReact Forum

1 answer

310 views

How to remove collapse and expand button column in kendo react grid UI

As I shown in the attached jpg file, I want to remove the first column which is showing the expand button (+) using Kendo React. As I'm a new to kendo react I have tried by setting this column width to zero but the css is not applying it. Then I have tried to apply width using the query selector but that was also not worked. I also tried by applying "display: none" to .k-hierarchy-cell, its working and hiding that first column but it is shrinking the next column to its size. Please guide me on this for expanded rows.

Accessibility

Grid

Styling / Themes

answered on 14 Aug 2023

2 answers

325 views

Closing Custom Column menu after clicking Filter/Clear Button

I have added a custom column menu to my kendo grid. It has a dropdown list element, where users can choose an option and the grid data is filtered. This all works successfully.

I have one issue. When the user clicks on the Filter or Clear Button, the column menu does not disappear. Clicking outside the column menu does not hide the column menu.

I have to click on the column menu again to focus it, then when I click outside the column menu, it disappears.

I cannot get access to the div 'k-grid-columnmenu-popup', as this is controlled by kendo and does not appear in my column menu component.

Has anyone come up against this problem and solved it?

answered on 11 Aug 2023

1 answer

275 views

the content inside the drawer is not responsive.

"Currently, I am using a drawer, but the issue is that the content inside the drawer is not responsive. I am attempting to create a wrapper for the content within the page, but I'm encountering difficulties with the CSS not functioning as expected. Could you kindly suggest an appropriate method for designing a responsive page?

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

"I am currently using a wrapper for sharing my code, for example."<wrapper direction="column">

<row>

<row>

</wrapper>

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

import React, { ReactNode } from "react";

import styled from "styled-components";
interface WrapperOptions {
  children: ReactNode;
  direction?: "row" | "column";
}
const StyledWrapper = styled.div<{ direction?: string }>`
  background-color: #ffffff;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: auto;
  flex-direction: ${({ direction }) => direction};
`;
function Wrapper({ children, direction }: WrapperOptions) {
  return (
    <StyledWrapper direction={direction}>
      {children}
    </StyledWrapper>
  );
}
export { Wrapper };

Drawer

Wrappers for React

answered on 11 Aug 2023

1 answer

128 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

71 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

61 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

47 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

154 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

77 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

250 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