Questions on KendoReact Forum

1 answer

153 views

Does tree list component of react ui library supports column selection?

I have a requirement to select multiple columns on the tree list. Is there a feature in the existing tree list component of React UI Library?

TreeList

answered on 27 Apr 2022

1 answer

214 views

Kendo UI react framework?

What's the Pros / Cons in comparison to other react frameworks?

Are there any pre-made design / prototyping solutions on the market?

If not, will you be interested in having such product for prototyping within Kenda UI guidelines?

General Discussions

answered on 27 Apr 2022

1 answer

620 views

[Solved] Footer cell colspan

Hi,

I tried to set my footer cell as fully colspanned but it didn't go well.

'

This is what I expected :

Anyone can help about this?

Thanks

Grid

answered on 26 Apr 2022

1 answer

120 views

PDF export issues in chrome browser

Hello,

This is a generic question. We use Kendo React for Export PDF functionality. We use Redux for state management.
On clicking of Export we make bunch of API calls and export all the React components into PDF.
The size of PDF is around 1.2MB
The problem we are facing is, the PDF is downloading perfectly alright in Firefox browser. It is taking around 90-120 seconds for PDF to download.
But we are facing issue in Chromium browsers(Google Chrome and Edge). The PDF is taking around 20 minutes and it is crashing application sometimes.
I cannot create stackblitz sample for this as it would be hard replicating all the things that are happening in background.

I know this is very little information. But can someone clarify if Kendo behaves differently in Different browsers

Thanks and Regards,
Krishna

PDF Processing

answered on 26 Apr 2022

1 answer

659 views

[Solved] Change filter Icon on kendo-data-query

Hi, I am using filterBy from @progress/kendo-data-query to allow filtering of the data displayed in my kendo-react-grid. For more intuitive UI, i'd like to change the icon for this from a filter to a search magnifying glass. Is this possible? I saw some other Q/As related to this but they all suggested editing the css.... my file uses makeStyles instead for styling so I wasn't sure how to proceed. Let me know if you have suggestions for how to do this.

updated question on 25 Apr 2022

1 answer

447 views

Is Kendo UI worth the price now ?

I am considering purchasing Kendo UI Professional, but it's sale price is thousand bucks. Infragistics price is lower at 700$ and it's equally good. So, I am going to purchase that most likely.

Kendo doesn't have some features that i think are basic. I tried to implement a simple tags input control and I couldn't. Had to go back to select2 control.

They don't seem to have any support to S3 in upload control.

These are important in my application and Kendo doesn't provide them out of the box. Bums me out that i have to implement these manually after spending 1000 usd on the control set.

General Discussions

answered on 25 Apr 2022

1 answer

140 views

[Solved] Hours/Minutes fields using NumericTextBoxes

I'm trying to track duration in hours/minutes with separate NumericTextbox fields, where the Hours are increased by 1 if Minutes becomes 60, and Minutes is reset back to 0.

Demo: https://stackblitz.com/edit/react-cdbhuu?file=app/main.jsx
(Click the up spinner for Minutes, as it increases from 0 -> 15 -> 30 -> 45 -> 60)

Updating the Hours is working fine, however the Minutes field remains at 60 until clicking outside of the field. I've tried calling focus/click on the label and other elements, but still can't get those Minutes to reset back to 0.

NumericTextBox

answered on 25 Apr 2022

1 answer

136 views

[Solved] Hide/show columns in React Hooks

Hi all,

I found an example about how to hide and show specific columns (https://stackblitz.com/edit/react-grid-toggle-column-xyixv6?file=index.js)

Unfortunately, which is written in React class that I'm not familiar with at all ...

I would like to know if there are any other solutions or alternatives to realize the same functions but in React Hooks ...

Any suggestions and help are very welcomed and appreciated.

Grid

answered on 25 Apr 2022

1 answer

165 views

PDF export from Grid

Hi all,

I got two questions actually.

I want to know if there's a way to add paragraphs, titles, and images while exporting PDFs from Grid ?

Besides, I don't know why the PDF output of Chinese characters all became garbled and I just can't figure it out.

Any help will be appreciated.

Thanks!

Grid

PDF Processing

answered on 22 Apr 2022

2 answers

1.2K+ views

Getting error when using kendo react data grid "Property 'field' does not exist on type 'IntrinsicAttributes & GridColumnProps

I am creating SPFx app. Here is the code :

React Version : 16.9.0

Kendo versions :

"@progress/kendo-data-query": "^1.5.6",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-react-animation": "^5.1.0",
    "@progress/kendo-react-common": "^5.1.0",
    "@progress/kendo-react-data-tools": "^5.2.0",
    "@progress/kendo-react-excel-export": "^5.1.0",
    "@progress/kendo-react-grid": "^5.1.0",
    "@progress/kendo-react-intl": "^5.1.0",
    "@progress/kendo-react-pdf": "^5.1.0",
    "@progress/kendo-theme-default": "^5.3.0",

import * as React from "react";
import { Grid, GridColumn, GridExpandChangeEvent, GridDetailRow, GridToolbar, GridColumnProps } from '@progress/kendo-react-grid';
import { process, State, DataResult } from '@progress/kendo-data-query';
import'@progress/kendo-theme-default/dist/all.css';
 
export const BizpSettingGrid: React.FunctionComponent<IBizpSettingGridProps> = (
  props: React.PropsWithChildren<IBizpSettingGridProps>
) => {
  const [items, setItems] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);
  const [showAddButton, setShowAddButton] = React.useState(true);
  
  const getKendoColumns=()=>{
    // let cols=props.viewFields.map((itm, i)=> <GridColumn  key={i} sortable={true} groupable={true} filterable={true} /> )
    //let cols=props.viewFields.map((itm, i)=> <GridColumn field ={itm.name} title={itm.displayName} key={i} sortable={true} groupable={true} filterable={true} /> )
    // return cols;
    let cols: GridColumnProps[]=[
      { field: 'ProductID', title: 'ID', filter: 'numeric' },
      {
          field: 'ProductName', title: 'Product Name',
          reorderable: false
      },
      {
          field: 'QuantityPerUnit', title: 'Quantity Per Unit',
          groupable: false
      },
      {
          field: 'UnitsInStock', title: 'Units In Stock', filter: 'numeric',
          reorderable: false,
          groupable: false
      },
      { field: 'Category.CategoryName', title: 'Category Name' }
  ];
    
  }
 
  return (
    <Panel
      styles={{
        commands: {
          backgroundColor: "[theme:themePrimary, default:#0078d7]",
          marginTop: 0,
        },
        scrollableContent: { overflow: "hidden" } /* Add: Jul-01-2021 */,
      }}
      className={`${styles["PanelWrapper"]}`} /* Add: Jul-01-2021 */
      id={props.panelId}
      isOpen={props.showPanel}
      onDismiss={props.onDismissPanel}
      type={PanelType.large}
      closeButtonAriaLabel="Close"
      headerText={props.panelHeading}
      onOuterClick={() => undefined}
      onOpen={() => getItems()}
      // isBlocking={false}
    >
      {/* {props.selectedItem.itemId ==0 &&  ( */}
      {isLoading && <BizpSpinner message="Please wait loading records..."></BizpSpinner>}
      {!isLoading && (
        <React.Fragment>
          <Toolbar actionGroups={toolBarActionGroups} find={false} />
          <Grid
      style={{
        height: "400px",
      }}
      
      data={items}
    >
      
      {getKendoColumns()} 
    </Grid>
         
        </React.Fragment>
      )}
 
    </Panel>
  );
};

Grid

answered on 22 Apr 2022