Hi,

I am trying to implement the custom tools for color and font size using dropdown list in the editor.

I have an issue when I select some text in the editor, and choose a color or a font size in the custom dropdown, the selected text becomes unselected, so I have to select them again if I want to change the option.

I don't see this issue when I use the default built-in tool like FontSize.

Here is my code:

import {
  Editor,
  EditorChangeEvent,
  EditorMountEvent,
  EditorPasteEvent,
  EditorTools,
  EditorToolsSettings,
  ProseMirror,
} from'@progress/kendo-react-editor';
import { useEffect, useRef, useState } from'react';
import { Button } from'@progress/kendo-react-buttons';

const { EditorState, EditorView, Plugin, PluginKey, TextSelection } = ProseMirror;

const { Bold, Italic, Underline, Strikethrough, Indent, Outdent, OrderedList, UnorderedList, FormatBlock } =
  EditorTools;

const fontSizeToolSettings: EditorToolsSettings.StyleDropDownListSettings = {
  ...EditorToolsSettings.fontSize,
  items: [
    { text: '10', value: '10pt' },
    { text: '12', value: '12pt' },
    { text: '14', value: '14pt' },
    { text: '18', value: '18pt' },
    { text: '22', value: '22pt' },
    { text: '36', value: '36pt' },
  ],
};

const colorToolSettings = {
  style: 'color',
  defaultItem: { text: 'No Color', value: '' },
  items: [
    { text: 'White', value: '#fff' },
    { text: 'Midnight', value: '#232437' },
    { text: 'Sand', value: '#e6e4dc' },
    { text: 'Slate', value: '#6a7885' },
    { text: 'Mint', value: '#6ce3c8' },
    { text: 'Green', value: '#20a786' },
    { text: 'Yellow', value: '#f1c22e' },
    { text: 'Orange', value: '#e79946' },
    { text: 'Red', value: '#c64f27' },
  ],
};

const CustomColor = EditorTools.createStyleDropDownList(colorToolSettings);

const MyColorTool = (props: any) => (
  <CustomColor
    {...props}
    style={{
      width: '100px',
      ...props.style,
    }}
  />
);

// Creates custom FontSize tool.const CustomFontSize = EditorTools.createStyleDropDownList(fontSizeToolSettings);

// Styles the FontSize tool (DropDownList).const MyFontSizeTool = (props: any) => (
  <CustomFontSize
    {...props}
    style={{
      width: '110px',
      ...props.style,
    }}
  />
);

const CommonEditor = () => {

  return (
    <Editor
      tools={[
        MyColorTool,
        [Bold, Italic, Underline, Strikethrough],
        [Indent, Outdent],
        [OrderedList, UnorderedList],
        MyFontSizeTool,
      ]}
      defaultEditMode="div"
    />
  );
};

exportdefault CommonEditor;
   

 

Could you provide me the solution to keep the selected text like the default tool?

Thanks a lot!

Hi, 

We used KendoReact scheduler component with some customizations and we have encountered a problem with the slots that are after 5:00pm. 
The frequency is set by default to weekly and if we set the recurrence days to all days in a week, the last column is not appearing and it only occurs if the schedule starts beyond 5pm. I have tried to adjust the width but it still occurs. 

Attached is the screenshot of the scenario that I explained. 

Hello, 
I found bug in Filtering with Remote Data and Virtualization (https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering/#toc-filtering-with-remote-data-and-virtualization/)

Mouse wheel:
When user is trying to scroll to the bottom of the list he will scroll the same data before last items for 3-4 times until he will be able to see the last element on the list (look for "Paul Henriot" on the list, this item is visible for 3-4 scrolls until last item is visible) 

Keyboard: 
When user is trying to navigate to the last element with keyboard he will reach to the 3rd last element and list will not scroll to the next 2 elements, he needs to go back to the last visible element and navigate down, and repeat this process for 3-4 times until list is scrolled and last element is visible


This bug happens in both ComboBox and DropDownList

I attached 2 videos to showcase this bugs 

Hi,

I have a requirement to pass some custom data to custom pager which I will be using within my custom pager component. I did not find a way to do so. For e.g. in my case I want to pass the number of filtered rows that I get from backend and show that in the custom pager component.  Could you please let me know? 

Thanks for your help!

Janaki

Hi,

I am trying to implement a custom pager which I am able to implement on the lines of your given in your documentation https://www.telerik.com/kendo-react-ui/components/grid/paging/. Please refer to Custom Pager section.

However when I make the grid sortable, the sort icons (up and down arrows) do not appear in the column header. Please look  at the link  https://stackblitz.com/edit/react-7fthgv-hcysax?file=app%2Fmain.tsx which demonstrates the problem. I have set the property sortable to true here both for the Grid and the GridColumn.

I am not sure why the sort icons are not appearing. 

I am using kendo data grid version 5.9.0. If you need any other info please let me know. Any help would be appreciated.

Thanks

Janaki

Greetings,

When I use the bottom scrollbar in the Grid to scroll to the left/right, the header row and the body rows do not synchronize.

It only happens when scrollable is set to 'virtual' and I need it for scrolling vertically.

Is there any way to fix it? Thanks!

Regards,

Jason Li