Telerik Forums
KendoReact Forum
1 answer
55 views

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.

 

Konstantin Dikov
Telerik team
 answered on 25 Apr 2022
1 answer
78 views

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. 

 

Konstantin Dikov
Telerik team
 answered on 25 Apr 2022
1 answer
96 views

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!

 

 

 

Konstantin Dikov
Telerik team
 answered on 22 Apr 2022
2 answers
966 views

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>
  );
};
Surrendra
Top achievements
Rank 1
Iron
 answered on 22 Apr 2022
1 answer
1.1K+ views

I'm trying to integrate Typescript into my current project, but I'm unable to use Grid with it.

Here's the sample code:

import React from 'react';
import {Grid, GridColumn} from "@progress/kendo-react-grid";

export default function App(){
    const data = [{id: 1}];
    
    return <div className="App">
        <Grid data={data}>
            <GridColumn field="id"/>
        </Grid>
    </div>
}

Here's the error:
TS2322: Type '{ children: Element; data: { id: number; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Grid> & Pick<Pick<Readonly<GridProps>, keyof GridProps> & Pick<...> & Pick<...>, keyof GridProps> & InexactPartial<...> & InexactPartial<...>'.   
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Grid> & Pick<Pick<Readonly<GridProps>, keyof GridProps> & Pick<...> & Pick<...>, keyof GridProps> & InexactPartial<...> & InexactPartial<...>'.

This error shows for any Grid's prop, not only data, but if there won't be any Grid's prop set, but only a child - Typescript compiles the code.

Is it only happening on my side? 
Thank you for any help. 

Konstantin Dikov
Telerik team
 answered on 20 Apr 2022
1 answer
1.1K+ views

Hi folks,

I've got a question about the Drawing utilities in Kendo React. Specifically, I'm drawing some Text on the Surface and would like that Text to scale to fit within a particular "bounding box".

When creating the Text object, I do not see any option or concept of a bounding box. I only see the ability to set the starting point to draw the Text at and then a way to set the Text's CSS Font properties.

While I could try to come up with some code to calculate a font size that would scale that Text up given a bounding box dimension, I was curious if Kendo React had any support or concept of this already built in? Or perhaps a suggestion on how to do this?

Attached is a screen shot of the Text that I am drawing and then an additionally-drawn bounding box. The box and Text have no relation - they're just two things I'm drawing right now. This shows the box in which I'd like the Text to scale up to fit into, though.

Any ideas? Thanks.

Filip
Telerik team
 answered on 20 Apr 2022
1 answer
56 views

I want to customize the EditorTools message.

Something like EditorTools.Bold.message = 'blah';

Any idea how I can do this for all the messages?

Shane
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 18 Apr 2022
1 answer
107 views

If one column has an array with multiple options in a way as ["item1', "item2", "item3"]. 

I can see that yes if a column has one-to-one it works, but if its one-to-many, how can I make the filter just show unique items and filter by such items, for instance I want to have item1, item2, and item 3 show as different selectable options in the filter and also filter by such.

 

In my example I have the mas 18.0000, 17.000, 18, 19

https://stackblitz.com/edit/react-spxx7p?file=app%2Fmain.jsx

 

 

 

Konstantin Dikov
Telerik team
 answered on 18 Apr 2022
1 answer
125 views

Hello, I wonder if there is a possibility to make filters from this example

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter

but as links or single select items, not checkboxes. Attaching a screenshot of what I'm looking for.

In this example https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells there is a CategoryFilterCell which would be the most similar, but I wonder if there is a way to add it as a column filter like on my screenshot?

Thank you

Filip
Telerik team
 answered on 15 Apr 2022
1 answer
97 views

When saving the pdf with the options forceProxy in true it redirects to the proxyURL you especified.

I want to avoid that and just call it like a request to my back-end server, there I process the pdf recieved by the request and I upload it.

It's there anyway to avoid the redirect of the url and still doing the request with the data of the file while using pdfSave?

Stefan
Telerik team
 answered on 15 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?