Telerik Forums
KendoReact Forum
1 answer
135 views
I have a ui kendo grid i want to add a column containing a button when clicking this button i want to export the row dataItem with its detailed information to excel.
Konstantin Dikov
Telerik team
 answered on 17 Jul 2023
1 answer
66 views

unstable selection of embedded tables. If I open row, it jumps to the table, but If I go back, I can't return to the table inside the cell.

demo: Vsj5kn (forked) - StackBlitz, You can open it in a new window and use the tab stop operation.

The order of my operations is: Tab, down arrow, down arrow, Enter, down arrow, down arrow, down arrow,  Shift+Tab, Tab

or Tab, down arrow, down arrow, Enter, down arrow, down arrow, down arrow,  Shift+Tab,  up arrow, up arrow,  down arrow, down arrow, Tab.

Only for the first time, can reach the position of the red circle through the tab stop, and go back, cannot enter it again.

 

 

Thanks a lot for an each help.

Regards,
Sunny Hu

 

Filip
Telerik team
 answered on 17 Jul 2023
1 answer
67 views

when jumping in the title of the table, selection goes under fixed columns and becomes invisible, it scrolls the table to the right after few more jumps.

The demo below is to simulate our business scenario

3oqybd (forked) - StackBlitz (code)

react-t4bmp9.stackblitz.io (Open the page verification tab stops)

As you can see in the picture above, the first and last columns are locked, because the grid's scroll bar is for the entire table instead of the unlocked column.
So when using the tab key to select the fourth and fifth columns, since the width of the Grid has not yet been exceeded, the scroll bar does not scroll, resulting in the selection of the fourth and fifth steps being invisible under the locked column

The scroll bar only scrolls when the tab key reaches the sixth step.

How could I solve this problem? please let me know if you have any questions?

Regards,
Sunny Hu

    


 

 

 

Wissam
Telerik team
 answered on 14 Jul 2023
1 answer
402 views

Hi, i've been migrating a products from JS to TS at work.
As i go through, i faced a type that is not going to be accepted in GridColumn.

My component is currently like below:

export type ClickCellProps = GridCellProps & {
  dataItem: ApprovalListItem
  field: string
}

export interface ClickCellProps2 extends GridCellProps {
  dataItem: ApprovalListGrid
  field: "manager2Name" | "manager1Name" | "typeName"
}

const ClickCell = (e: GridCellProps2) => {
 ...logic
}

<Grid>
  <GridColumn cell={ClickCell} />
</Grid>

I get this error if pass function(both  itself to the cell props:

Type '(props: ClickCellProps2) => JSX.Element' is not assignable to type 'ComponentType<GridCellProps> | undefined'.ts(2322)
GridColumnProps.d.ts(61, 5): The expected type comes from property 'cell' which is declared here on type 'IntrinsicAttributes & GridColumnProps'

(property) GridColumnProps.cell?: ComponentType<GridCellProps> | undefined

 

If I pass event to the function like: `cell={e => ClickCell(e)}` I get: 

Argument of type 'GridCellProps' is not assignable to parameter of type 'ClickCellProps2'.ts(2345)

(parameter) e: GridCellProps

 

I looked on the github repo and tired downgrading ts version and set tsconfig option "skipLibCheck": true but still not get it.

Would you kindly share what is the problem of my code?

tsconfig options as below:


  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "node",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "src",                                  /* Specify the base directory to resolve non-relative module names. */
    "paths": {
      "src/*": ["src/*"],
      "types/*": ["./@types/*"]
    },                                   /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    "typeRoots": ["./node_modules/@types", "./src/@types"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
    "resolveJsonModule": true,                        /* Enable importing .json files. */
    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    "checkJs": false,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  },

Konstantin Dikov
Telerik team
 answered on 14 Jul 2023
1 answer
113 views

Hello Team,

I am using Kendo React Pivot Table version @progress/kendo-react-pivotgrid": "^5.9.0". For downlaoding pivot table as excel, l am using saveAsExcel function given by export-to-excel library and followed this https://www.telerik.com/kendo-react-ui/components/pivotgrid/excel/ documentation.  I want to remove row and column headers from downloaded excel file. I have added screenshot for same. Your little help will be appriciated.

Thank You in Advance

Konstantin Dikov
Telerik team
 answered on 14 Jul 2023
1 answer
106 views

when searching for parent node, the children nodes related to that are not shown, therefore, when there is a lot of drop-down data and there are the same child nodes under different parent nodes, it is difficult to find the desired child node.

M2hxqy (forked) - StackBlitz

Hu
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 12 Jul 2023
1 answer
46 views

the time indicator has crossed the event block, but the event actually happens after that. 

Wissam
Telerik team
 answered on 12 Jul 2023
1 answer
87 views
It is possible to design a Kendo form with drag-and-drop functionality by using the Kendo UI Draggable and DropTarget components. These components allow you to create draggable elements and drop zones, which can be used to create a variety of drag-and-drop form layouts.
Konstantin Dikov
Telerik team
 answered on 12 Jul 2023
1 answer
225 views
Hello everyone, I need help. I have implemented a Modal and I would like to use it like as an <aside> where the content will be a form (multiple fields: combobox, multiselect). The Drawer component is not suitable for this case, and neither is the Dialog, as the Dialog is always centered in the middle of the screen. That's why I have made my own implementation using Kendo's CSS classes.
Here's an example.
9gejxw (forked) - StackBlitz

you may notice that the Combobox's popup doesn't work. Its z-index remains 100, while the Modal's z-index is 1002.

I tried overriding the z-index of the k-animation-container class, but I wasn't successful. What can I do to proceed with this idea?

Gabriel.

Vessy
Telerik team
 answered on 11 Jul 2023
1 answer
64 views

can you please provide an example of kendo react selection grid along with pagination, filtering enabled ?

 

Wissam
Telerik team
 answered on 10 Jul 2023
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?