Hi,

As the subject suggests I am looking for a way to update multiple cells at the same time within one column (i.e. same data type) of the KendoReact Grid. The first thing that comes to mind is enabling checkbox selection of multiple rows as per Customizing the Selection, and having a field and button external to the grid that updates the column field value for any selected rows.

Are there any other suggested approaches for achieving this without having to implement an external field? For example if you could select and paste a value into multiple cells or perform the update on drag selection?

Kind regards,

David

Is it possible to have both the sort when clicking on the column header and the checkbox filter for dates? The problem I'm having is that I want to format the date, at the moment I do that when I'm getting the data from the API and before passing it to the Grid component. 

API date:

2022-06-23T00:46:53.8066667Z	

Which gets formatted to:

23-06-2022

Because the date is already formatted, this works for displaying the correct formatted date in the grid and in the checkbox filter, and then filtering on the dates as well

      <GridColumn
        field={columnField}
        title={'Modified'}
        columnMenu={(props) => ColumnFilterSearchMenu(rowData, props)}
      />

However, because the date is formatted and turned into a string, this breaks the sorting functionality. As you can see below the table column seems to be sorted on the first number (the day) rather than the entire date. 

Is there a way to have both functionalities?

I've created a quick sandbox env where you can see the issue as well: https://codesandbox.io/s/still-water-186lbh?file=/src/index.js

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.