Please provide a solution on how to change theme colors beyond just light and dark modes. I am using Sass and style components, but I would like to implement the ability to select and change multiple colors within a theme. I am also utilizing the Kendo ThemeBuilder to create a custom theme."

If you're looking to implement a theme color change functionality using Sass and style components in conjunction with the Kendo ThemeBuilder, you might want to explore the documentation or resources specific to those tools for detailed guidance on how to achieve your

Hi,

Is there any example about Kendo grid grouping with ODdata ?

I couldn't find example on documentations.

Thanks.

Hello, 

I am trying to style and size the sort arrow icon that Kendo provides in the react data grid. I have attached a picture of the specific arrow I am talking about. I have managed to change the color of the sort icon with the CSS below, howerver I have not figured out how to change the sizing of the arrow here. If possible, I would also like to adjust the icon shape (make it thicker and shorter), and maybe use a custom icon for it if possible. Can you advise me on some possible solutions I could implement? Thank you. 

I have added a custom column menu to my kendo grid. It has a dropdown list element, where users can choose an option and the grid data is filtered. This all works successfully.

I have one issue. When the user clicks on the Filter or Clear Button, the column menu does not disappear. Clicking outside the column menu does not hide the column menu.

I have to click on the column menu again to focus it, then when I click outside the column menu, it disappears.

I cannot get access to the div 'k-grid-columnmenu-popup', as this is controlled by kendo and does not appear in my column menu component.

Has anyone come up against this problem and solved it?

"Currently, I am using a drawer, but the issue is that the content inside the drawer is not responsive. I am attempting to create a wrapper for the content within the page, but I'm encountering difficulties with the CSS not functioning as expected. Could you kindly suggest an appropriate method for designing a responsive page?

========================================================================================

 "I am currently using a wrapper for sharing my code, for example."<wrapper direction="column">

<row>

<div> my page code </div>

<row>

</wrapper>

==============================================================================================

import React, { ReactNode } from "react";

Hi,

I am planning to use React Spreadsheet for one of my projects. Unfortunately, I am unable to bind remote data to spreadsheet. All examples I could find are using static files to set the spreadsheet structure and on my own tests I failed to re-render spreadsheet component when remote data is bound.  Could you please provide an example in that matter?

Here is my code:

  const defaultStructure = {
      sheets: [
        {
          name: t('Summary'),
          mergedCells: ['B1:C1'],
          rows: [
            {
              height: 25,
              cells: [
                {
                  value: t('Please enter customer name'),
                  textAlign: 'center',
                  index: 0,
                },
                {
                  background: 'rgb(167,214,255)',
                  textAlign: 'center',
                  index: 1,
                },
              ],
            },
            {
              height: 50,
              cells: [
                {
                  value: t('Please enter minimum gross salary of your region'),
                  textAlign: 'center',
                  index: 0,
                },
                {
                  value: '',
                  background: 'rgb(167,214,255)',
                  textAlign: 'center',
                  index: 1,
                },
              ],
            },
          ],
          columns: [
            {
              width: 400,
            },
            {
              width: 200,
            },
            {
              width: 400,
            },
          ],
        },
        {
          name: t('Parametric Data Entry'),
          rows: [],
          columns: [
            {
              width: 100,
            },
            {
              width: 100,
            },
          ],
        },
      ],
    }

const [structure, setStructure] = useState(defaultStructure)

    useEffect(() => {
      if (!store?.parameters.isLoaded) return

      const p = store?.parameters.parameters
      const s = defaultStructure.sheets[0]

      defaultStructure.sheets[0].rows[1].cells[1].value = p?.grossWage

      setStructure({ ...defaultStructure })
    }, [store?.parameters.isLoaded])

   
    return (
      <>
          <div className="p-3">
            <div className="card-body">
              <Spreadsheet
                style={{
                  width: '100%',
                  height: 680,
                }}
                defaultProps={structure}
              />
            </div>
          </div>
      </>
    )
  })

Regards,