I'm attempting to use kendo-charts but when applying a strict content security policy there are many CSP violations regarding style-src.

This appears to be related to the file render-svg.js, in particular the attempt to set innerHTML:

var renderSVG = function(container, svg) {
    container.innerHTML = svg;
};

Is there any way to avoid this? We cannot set 'unsafe-inline' for the entire application.

Thanks.

Hey there -

I'm trying to persist state of grid (dataState) through refreshes. This grid instance is processing data on the client-side.  I have another grid instance performs data operations on the backend, and the req URL has search params.

My current approach is using URLSearchParams, but both this and react-router location return empty objects. I'm including the code, but I'm currently just trying access the url params. 

const urlSearchParams = new URLSearchParams(window.location.search);
 const params = Object.fromEntries(urlSearchParams.entries());
 console.log(params) // logs {}


  const location = useLocation();
  console.log('location', location)

Finally - is this the best way to approach this? I'd rather not add any libraries/frameworks and it doesn't make sense for us to store this info on the backend. So far I'm trying web APIs like above + localstorage. We do have react-router, but so far I haven't solved this issue. 

Thank you!  

Hi,

I have a requirement where I have to enable editing of only few cells of a row (Please note that for each row different set of cells can be editable). I found that we have a field called as "inEdit" which if true will mark all the cells of that row as editable. My idea is to implement cellRender function where I can enable editing of a particular cell based on certain conditions. 

Could you please let me know how this can be achieved?

Thanks,

Janaki

<div class="tomorrow"
           data-location-id="067285,067285,067285,067285,067285,067285"
           data-language="EN"
           data-unit-system="METRIC"
           data-skin="light"
           data-widget-type="aqi6"
           style="padding-bottom:22px;position:relative;"
        >
</div>

after insertion this tag becomes

<div style="padding-bottom:22px;position:relative;" class="tomorrow"></div>



is there a way to make that so editor keeps any tags on html elements on insert, because i can't predict user input i want to allow any tags on html elements(allowing specific tags won't work here), i know that this is not secure, but only selected users will have access so this is ok for me, could you please provide a code example where Editor keeps all of the custom tags on insert?

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