Declined
Last Updated: 26 Jul 2023 07:37 by ADMIN

Hello,

Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).

The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.

From UI standpoint: 

  • initially all tree nodes are collapsed

  • user clicks on i.e. 3rd tree node

  • selection is not displayed on any tree node (3rd node expected to be selected)

  • user expands 1st tree node - selection is set on the 3rd tree node

The following warning appears in the browser console. 

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.

    in TreeList (created by wrappedComponent)

    in wrappedComponent (created by wrappedComponent)

    in div (created by wrappedComponent)

    in div (created by wrappedComponent)

    in wrappedComponent

Model is defined as:

const TreeViewModel = types

    .model('TreeViewModel', {

        selectedItemUUID: types.maybe(types.string),

        tree: types.optional(types.array(TreeNodeModel), []),

        isLoaded: types.maybe(types.optional(types.boolean, false)),

        treeTypes: types.optional(types.array(TreeNodeTypeModel), []),

    })

    .views((self) => ({

        get treeCollection(): any {      

            return self.tree;

        },

    }))

Component is defined as:

        return (<>

            {!viewModel.isLoaded && loadingPanel}

            <div className='treeListContainer' ref={stageCanvasRef}>

                {treeListContainerHeight && <TreeList

                    style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}

                    data={viewModel.treeCollection}

                    expandField={expandField}

                    subItemsField={subItemsField}

                    columns={columns}

                    selectedField={selectedField}

                    rowHeight={40}

                    scrollable="virtual"

                />}

            </div>

        </>);

The following workaround allows converting an observable array to a regular array.

    .views((self) => ({

        get treeCollection(): any {      

            return JSON.parse(JSON.stringify(self.tree));    // or self.tree.slice()

        },

    }))

This solution affects performance due to array copy. 

Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.

Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.

Can you please extend KendoReact controls to support observable arrays?

Is there a better solution?


Unplanned
Last Updated: 18 Jul 2023 04:28 by ADMIN
Created by: Tel
Comments: 1
Category: KendoReact
Type: Feature Request
1

Hello,

I am using React Multiselect in my project. I need every item in the multiselect component selectable with checkboxes and multiselect itself filterable. It would be very nice if you add this features to Multiselect component as built in. There is a workaround which I share links below for this but we need to do all this stuff manually.

1. Checkboxes:

 

2. Filterable

 

Thanks

Duplicated
Last Updated: 02 Feb 2022 14:29 by ADMIN
Created by: Bartosz
Comments: 1
Category: KendoReact
Type: Bug Report
0

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way.

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.

 

Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

 

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

 

Example on stack blitz

Completed
Last Updated: 21 Oct 2024 07:24 by ADMIN
Created by: Krystian
Comments: 1
Category: KendoReact
Type: Bug Report
0

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.


Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

Unplanned
Last Updated: 18 Jul 2023 04:31 by ADMIN
Created by: Cole
Comments: 1
Category: KendoReact
Type: Feature Request
2
Per the attached support ticket non consecutive dates at a custom interval are not currently supported by kendo react scheduler. I have a use case that would benefit from being able to display every 7 days so that you can plan and schedule across weeks rather than each individual day.
Unplanned
Last Updated: 01 Feb 2022 11:50 by ADMIN
Created by: Daniel
Comments: 1
Category: KendoReact
Type: Feature Request
1

We'd like the sorting to be correct and not based on the browser settings.

From support ticket:

We've noticed that our grid is not sorting correctly in our local language (Swedish). I've added LocalizationProvider and IntlProvider around it. The translation works fine.

In Swedish it would be sorted: A, B, Å

It's common in software that A and Å is sorted next to eachother but this is wrong.

I've tried using locale "sv" (language) and "se" (country) but neither sorts it correctly.

Reply on support ticket

We are internally using the built-in JavaScript method localeCompare to compare the values:


    if (a.localeCompare) {
        return a.localeCompare(b);
    }
That means that we will compare the data based on the current browser locale. Still, the result can vary based on the machine. In cases, like this one, we can recommend using server filtering the ensure that the results are specific to the Swedish culture regardless of where this is loaded.

Another option can be to log a feature request that will take the culture parameters from the IntlProvider and pass it as a second parameter to the localeCompare function.


Unplanned
Last Updated: 31 Jan 2022 08:53 by ADMIN
Created by: Shannon
Comments: 1
Category: KendoReact
Type: Feature Request
1

Imaging a GridColumn field that is a simple object {name:"My Item", value: 123}. It would be great to be able to define properties of the object as what to display without having to build a custom renderer.

displayField/displayFunction as a callback function with the fieldName of the columns and the dataItem of the row as parameters

const nameDisplay = (field, dataItem) => {

   return "some value"

}

...

<GridColumn field={"name"} displayFunction={nameDisplay}


 

 

Unplanned
Last Updated: 28 Jan 2022 07:22 by ADMIN
Created by: Sebastian
Comments: 3
Category: KendoReact
Type: Feature Request
2
Hi,

I am already using the KendoReact library and consider the scheduler for a new feature. I am confused with the functionality to add  new events. Most other calendars I am used to (Google, Teams, ...) work like this: You select a time range and then a new entry is added from the start to the end. But in KendoReact scheduler I have to double click to add a new event.

Is it possible to get the feature I am looking for? Some kind of setting or so.

Sebastian
Completed
Last Updated: 28 Jan 2022 16:55 by Neil
Created by: Neil
Comments: 8
Category: KendoReact
Type: Feature Request
2
When reorderable is true, our users have complained that it is not possible to highlight text in the kendo grid component for example.
For now we have had to add a settings option for the user to turn the reorderable feature on and off depending on how they want to use the UI.
It would be a lot better user experience if there was on option to only drag the tile by the header, therefor allowing the user to still highlight and copy text areas and such.
Duplicated
Last Updated: 21 Jan 2022 08:56 by ADMIN

 

we have X(cross) for combo box but it is not coming for datetime picker 

Unplanned
Last Updated: 17 Jan 2022 09:57 by ADMIN
Created by: Oliver
Comments: 3
Category: KendoReact
Type: Feature Request
2

Hi,

 

we are currently using the Kendo jQuery PivotGrid in our application. We have already migrated some controls to React in our application and would like to switch the PivotGrid to React as the next control.

In the jQuery PivotGrid there is the possibility to export the configured PivotGrid to Excel. You can see the feature here: saveasexcel

Is this functionality also available with the React PivotGrid? And can you show us an example how to use this feature to export the pivot grid data to excel?

If this functionality doesn't exist yet, when can we expect it? Are there already plans for this or can you already vote for it somewhere?

 

Regards,

Oliver

Unplanned
Last Updated: 17 Jan 2022 05:53 by ADMIN
Created by: Sandeep
Comments: 2
Category: KendoReact
Type: Feature Request
7

We are migrating our legacy application which uses Telerik for Silverlight to react application with KendoReact controls. I am converting one screen which uses RadTreeView which gives us Drag and Drop with Reordering feature. Now, in KendoReact, TreeList control does not provide both the features. 

Here is what we get when we start dragging item in Silverlight control:

 

I am expecting the same behavior in KendoReact: TreeList as we have to achieve the same behavior in our react application. This link has some discussion with support team.

Thanks,

Completed
Last Updated: 22 Dec 2024 17:51 by ADMIN

here is a quick repro: https://stackblitz.com/edit/react-dfwz3q?file=package.json

in package.json just switch @progress/kendo-react-grid from 4.10.0 back to 4.9.0 and the column menu renders.

bug still present up through 4.11, 4.12, and @latest 4.13

Unplanned
Last Updated: 11 Jan 2022 12:00 by ADMIN
Created by: Jeffrey
Comments: 1
Category: KendoReact
Type: Feature Request
0

What I would like to see is a full height Panel anchored to the body tag similar to a drawer, but the panel would allow me to set the Title, Close Button, and Content manually.  My intent is to create forms in the panel or to use the panel to display details of a single row of data.  What you have appears to be geared towards navigation or the display of discrete data only.

<Panel

isOpen={boolean}

hasCloseButton={boolean}

isBlocking={boolean}

footerIsSticky={boolean}

titleIsSticky={booelan}

width={number or string}

panelPosition={"start", "end" - similar to flex positions

header={JSX.Component or string}

title={JSX.Component or string}

/>

<Content>{Placeholder for Content}</Content>

<Footer>{Placeholder for Footer Content}</Footer>

</Panel>

 

The layout would be

------- Top Sticky

Header      Close Icon

</hr>

Title (could be in the sticky or not)

------ End Top Sticky

Content - Scrollable

Footer

Unplanned
Last Updated: 11 Jan 2022 10:59 by ADMIN
Created by: Jeffrey
Comments: 1
Category: KendoReact
Type: Feature Request
0

Right now you have the ability to mark a field "Optional" in the label component.   This is fine unless you have a large form and almost everything is optional.  It will then look cluttered.

On the other hand, you don't have a "Required" option.  

I would like to add a prop for subtext so that I can change the  subtext from "optional" to anything I would like such as * or (Required).

Unplanned
Last Updated: 07 Jan 2022 05:46 by ADMIN
Created by: Daniel
Comments: 3
Category: KendoReact
Type: Feature Request
3

Hi Team,

we are looking the similar functionality in React Grid? Could you implement this feature in feature releases? 


 columns: [
        {
          field: "id",
          width: 80,
          filterable: {
            operators: {
              number: {
                eq: $translate.instant("Is equal to")
              }
            }
          }
        },


Unplanned
Last Updated: 07 Jan 2022 11:11 by ADMIN
Created by: Anjireddy
Comments: 1
Category: KendoReact
Type: Feature Request
3
How to restrict the resize of column after some width like minResizableWidth for min width.
Unplanned
Last Updated: 07 Jan 2022 11:12 by ADMIN
Created by: pradeep
Comments: 0
Category: KendoReact
Type: Feature Request
0

Introduce a Format painter/brush tool that will allow copying the format from one selection to another (as in MS Word for example)

The format painter lets you copy all of the formatting from one object and apply it to another one – think of it as copying and pasting for formatting. Select the text or graphic that has the formatting that you want to copy.

Unplanned
Last Updated: 04 Jan 2022 10:49 by ADMIN
Created by: Thomas
Comments: 4
Category: KendoReact
Type: Feature Request
1

Hi,

I require the ability to use generate a PDF of React content using the PDFExport component, but instead of calling the `save()` function to download a file to the client's disk, return the blob/URI back to the JS which can be processed further.

I tried using the `drawDOM` method, however it doesn't support many of the features I require for `PDFExport`, such as 'Author', 'Title' and most importantly 'pageTemplate'. 

Is there a way I can use the drawDOM method to achieve the same functionality as the core PDF export? If not, could another method be exposed of `saveURI` which returns a promise similar to drawDOM?

In addition, is there any temporary workaround you can think of that would facilitate what I'm trying to achieve? I couldn't spot any event I could intercept to solve this problem.

 

Kind regards,

Thomas

Unplanned
Last Updated: 27 Dec 2021 06:24 by ADMIN
Created by: Nageswar
Comments: 1
Category: KendoReact
Type: Feature Request
7

Hi Team,

we are looking the similar functionality in React Grid? Could you implement this feature in feature releases? 

Kendo jQuery UI : https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.refresh

 pageable: {
                refresh: true,           
            },