Telerik Forums
KendoReact Forum
1 answer
46 views

Hello, 

How can I cutomize header style in Tree List React ? I need to change style background and font color.

 

Any help will be highly appreciated.

 

Vessy
Telerik team
 answered on 02 Oct 2024
1 answer
60 views
If I click outside the Dialog, it won't close. Did anyone solve this problem?
Yanko
Telerik team
 answered on 25 Sep 2024
0 answers
71 views

Hi Folks,

I have been using  Kendo grid with infinite scroll also features incell edit and checkbox operation, It has input box(custom cells), select, checkbox fields.

but this gets really slow when we have more than 50-70 data in the grid.

please suggest how i can work on performance in this scenario.

please find the link below for the code i have folowing.

incell:  https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

checkbox actions:  Customizing the Selection : https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/

2 answers
129 views

Hello, my team and I are having an issue where kendo is not activated when building with github actions. This issue first surfaced when our license expired which led us to believe it is a caching issue. After updating the license in the variables and clearing the actions cache we are not seeing the activation happen successfully even though the same license activates correctly locally, and says it is correct during the github action build step. I have attached a cut down action .yml for reference. Looking for suggestions on additional things to check.

 


# This workflow will build a .NET project
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-net

name: Automated Pipeline

on:
  push:
    branches: [ "master" ]
    paths-ignore:
      - 'docs/**'

env:
    PACKAGE_VERSION: ${{ format('1.0.{0}', github.run_number) }}

jobs:
  build:

    runs-on: windows-latest-l

    steps:
    # Check out code
    - uses: actions/checkout@v4

    # Configure Environment
    - name: Display Package Version
      run: echo "PACKAGE_VERSION = $env:PACKAGE_VERSION"

    - name: Configure .NET
      uses: actions/setup-dotnet@v4
      with:
        dotnet-version: 8.0.x

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: "yarn"
        cache-dependency-path: "**/yarn.lock"

    # Restore Dependencies
    - name: Restore dependencies
      run: dotnet restore ./OurApp.sln

    - name: Yarn install Portal
      run: yarn --cwd ./src/WebApp2Frontend install

    - name: Yarn install App
      run: yarn --cwd ./src/WebApp1Frontend install

    - name: Yarn run tests
      run: yarn --cwd ./src/WebApp1Frontend run test

    # Update Version Numbers
    - name: .NET project version updater
      uses: vers-one/dotnet-project-version-updater@v1.6
      with:
          file: "**/*.fsproj"
          version: ${{ env.PACKAGE_VERSION }}

      # Generate code files

      # Activate Kendo Licenses (App)
    - name: Activate Kendo UI License (App)
      run: yarn --cwd ./src/WebApp1Frontend run kendo-ui-license activate
      env:
        KENDO_UI_LICENSE: ${{ secrets.KENDO_UI_LICENSE }}

      # Activate Kendo Licenses (App2)
    - name: Activate Kendo UI License (App2)
      run: yarn --cwd ./src/WebApp2Frontend run kendo-ui-license activate
      env:
        KENDO_UI_LICENSE: ${{ secrets.KENDO_UI_LICENSE }}

    # Build (runs "yarn run build" in the frontend projects)
- name: Build run: dotnet build ./OurApp.sln --no-restore --configuration Release # Tests - name: Test run: dotnet test continue-on-error: true # Publish - name: Publish WebApp2 run: dotnet publish ./src/WebApp2/WebApp2.fsproj --no-build --configuration Release --output $env:GITHUB_WORKSPACE/artifacts/app2 - name: Publish WebApp1 run: dotnet publish ./src/WebApp1/WebApp1.fsproj --no-build --configuration Release --output $env:GITHUB_WORKSPACE/artifacts/app1 # Upload Artifacts # Octopus Deploy Package # Data Warehouse and Pulumi package already exists # Octopus Deploy Push # Create Octopus Release

Robert
Top achievements
Rank 1
Iron
 answered on 20 Sep 2024
0 answers
78 views
If there is a preexisting value of the form "0x" in the day section of the DatePicker, typing a new two-digit value resets the day value and results in the wrong number.

For example, if the preexisting value is "01" and I go to type 23, after pressing 2, the value will be 12. Then if I hit 3, the value will reset to 03 instead of becoming 23. 

Is there anyway to prevent this behavior?
Thomas
Top achievements
Rank 2
Iron
 asked on 19 Sep 2024
1 answer
48 views
Keyboard Navigation in Kendo React showing 404 page. 
Vessy
Telerik team
 answered on 19 Sep 2024
1 answer
82 views

I threw together the easy "patch-package" on latest v8.2.0 below and it worked.

But it seems like the developers must have excluded this value for a reason that i should watch out for?

Or if not, any chance we can get it added officially?

my underlying motivation: I see in all the onItemChange demos the suggested "change item" approach is to iterate the data array via .map() and change the corresponding object item based on matching a unique id property... of course this is a longstanding pattern that honors React's need for immutability, but once lists get large, there's a performance hit that could be avoided by directly targeting the item by index along with other immutability/copying approaches, e.g. toSpliced() is now available in modern browsers.

I have an active license and I could submit bug/feature if this is better requested thru that channel.

diff --git a/node_modules/@progress/kendo-react-grid/Grid.mjs b/node_modules/@progress/kendo-react-grid/Grid.mjs
index ff03785..3f6cb09 100644
--- a/node_modules/@progress/kendo-react-grid/Grid.mjs
+++ b/node_modules/@progress/kendo-react-grid/Grid.mjs
@@ -191,7 +191,8 @@ const z = class z extends r.Component {
           ...this.getArguments(e.syntheticEvent),
           dataItem: e.dataItem,
           field: e.field,
-          value: e.value
+          value: e.value,
+          dataIndex: e.dataIndex
         }
       );
     }, this.onHeaderSelectionChange = (e) => {


Yanko
Telerik team
 answered on 17 Sep 2024
1 answer
97 views

I found an example in KendoUI for jQuery here:

 

https://docs.telerik.com/kendo-ui/knowledge-base/scroll-to-selected-item

How to do it in React TreeView?

Vessy
Telerik team
 answered on 16 Sep 2024
1 answer
78 views

Hello.

I have a question. I know, Kendo does not officially support shadow DOM. After all. We were forced to use react grid in the shadow DOM. We have a problem that all pop up windows (paging settings, filter opening) are displayed incorrectly. Without styles and without the possibility to serve the event. Do you have a tip on how to treat it?


Thank you.

Vlado
Yanko
Telerik team
 answered on 16 Sep 2024
1 answer
138 views

Hi everyone,

Rendering columns within the `Grid` component using the `map` function is not working as expected. For example:
  • When defining the `GridColumn` properties, such as `cell`, the `className` property doesn't apply as expected. If I remove the cell property from the GridColumn component it works as expected.
  • If I don't explicitly define the `headerCell` property, the filter icon (three dots) isn't visible. Hence, I need to manually add the filter options in the header cell.

Note: Everything works as expected when I define each column component individually, without using the `map` function approach.

Objective: I need to display 20+ columns in the grid, and I want to avoid manually defining each `GridColumn` component. Instead, I would like to dynamically render the columns using the `map` function. In my case, the column headers are custom components, and the column filter functionality should be displayed conditionally.

Please find the attached file with implementation.

I kindly request your help. Thank you.

 

Yanko
Telerik team
 answered on 16 Sep 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?