I'm generating a static site with Next.js. When I do so, I get the "No valid license" message on the page with the Grid. I have a valid key, and everything works fine when running the `dev` server. What steps should I take to get this working with SSG?

Thanks!

My application was recently tested for 508 compliance. I have a cascading dropdown section on one form. First dropdown is a standard dropdown and the second is a filterable dropdown. When I select an option from the first, open the second and type, I am unable to navigate to the options to select one with the keyboard.

I was able to replicate this in the example code by making the second dropdown filterable (NOTE: I'm returning all the data when filtering for simplicity). See below:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DropDownList, DropDownListChangeEvent, DropDownListFilterChangeEvent } from "@progress/kendo-react-dropdowns";
import { dataCategories, dataProducts, dataOrders } from "./data";
import { filterBy } from '@progress/kendo-data-query';

const defaultItemCategory = { categoryName: "Select Category ..." };
const defaultItemProduct = { productName: "Select Product ..." };
const defaultItemOrder = { orderName: "Select Order ..." };

const App = () => {
  const [state, setState] = React.useState({
    category: null,
    product: null,
    order: null,
    orders: dataOrders,
    products: dataProducts
  });

  const categoryChange = (event: DropDownListChangeEvent) => {
    const category = event.target.value;
    const products = dataProducts.filter(
      product => product.categoryId === category.categoryId
    );

    setState({
      ...state,
      category: category,
      products: products,
      product: null,
      order: null
    });
  };

  const productChange = (event: DropDownListChangeEvent) => {
    const product = event.target.value;
    const orders = dataOrders.filter(
      order => order.productId === product.productId
    );

    setState({
      ...state,
      product: product,
      orders: orders,
      order: null
    });
  };

  const orderChange = (event: DropDownListChangeEvent) => {
    setState({ ...state, order: event.target.value });
  };

  const ddlProducts_onFilterChange = (event: DropDownListFilterChangeEvent) => {
    setState({ products: state.products });
  }



  const category = state.category;
  const product = state.product;
  const order = state.order;

  const hasCategory = category && category !== defaultItemCategory;
  const hasProduct = product && product !== defaultItemProduct;

  return (
    <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
      <div>
        Categories
        <br />
        <DropDownList
          style={{ width: '300px' }}
          data={dataCategories}
          textField="categoryName"
          onChange={categoryChange}
          defaultItem={defaultItemCategory}
          value={category}
        />
      </div>
      <div>
        Products
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasCategory}
          data={state.products}
          textField="productName"
          onChange={productChange}
          defaultItem={defaultItemProduct}
          value={product}
          filterable={ true }
          onFilterChange={ ddlProducts_onFilterChange }
        />
      </div>
      <div>
        Orders
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasProduct}
          data={state.orders}
          textField="orderName"
          onChange={orderChange}
          defaultItem={defaultItemOrder}
          value={order}
        />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("my-app"));

Is this a known issue? Please advise.

Thanks in advance

Hello, 

I added a Tailwind drop-shadow to my KendoReact Card components and noticed that any component with adaptive rendering stopped rendering properly and was bound to the Card.

Here is a Stackblitz example. The bottom card with the green background demonstrates the problem.

https://stackblitz.com/edit/react-hb3jww-fkedu8?file=app%2Fmain.jsx,app%2FCustomCard.jsx,index.html

I also came across this about it being more of a CSS issue than one specific to Tailwind.

https://github.com/tailwindlabs/tailwindcss/discussions/9029

I discovered that I could replace "drop-shadow" with "shadow" for my purposes and everything now works as expected. You can close this ticket. I am submitting this because you guys have been really helpful to me and hopefully this helps someone else in case they run into this strange behavior and start pulling their hair out. There is probably a better place to submit this but I had already started down this path before figuring it out on my own.

Thanks,

Julian

 <PDFExport
paperSize="A4"
forcePageBreak=".page-break"
pageTemplate={PageTemplate}
margin={{
top: "6.5cm",
left: "1cm",
right: "1cm",
bottom: "3.5cm",
}}
ref={(pdfExport) => (gridPDFExport = pdfExport)}
>

I am using this type of code, but I have some conditions that can be applied. I am clicking the save print button. The PDF background colour is red. After saving is completed, it can be set to a green colour. How to fix these issue  beacuse I am prrint a PDf is always set a Green color in print time 

Greetings,

I found out that the External filter allows the user to type in the first DropDownList to search for the column name before selecting it.
Is it possible to change the first DropDownList onChange function to delay an action until the user stops typing before triggering the search?

Please help, thanks!

Jason

Hi,

Is there a way to sort the checkboxes when using GridColumnMenuCheckboxFilter? Please see the attached image.

Thanks,

Jie

Hello,

After updating to 7.0.2 all my kendo react packages i have noticed that my form don't reset  values in fields when calling formRenderProps.onFormReset(). Previously on versions 5.19.0 it worked like a charm, i would just call onFormReset and all values would be cleared in all the fields.

I have managed to solve the issue with the key state but it feels like a hack and a workaround since that triggers a rerender and there is a function built in to solve that. I also don't like the ref approach because I can't type the ref in TS. All in all, the best would be if formRenderProps.onFormReset would work like before and clear all the values in all the fields.

Here is demo from your page with all 7.0.2 and it doesn't clear the values:

Form 7.0.2

Here is same example i just changed the @progress/kendo-react-form to version: 5.19.0 and it clears the values:

Form 5.19.0

Best regards.

So here i am after 3 days of struggling with kendo excel sheet, i have this use case that i want to apply. 

I have data that i am showing on kendo spreadsheet. there is the one column under the name values and other columns are disabled,  that values column can be changed and applied at the same time in another column right by its side that is also disabled. 

Also the change in the value column and the new data that has been now modified with the new values in the excel i want it to be saved with me so i can use it.

is it possible in kendoReact spreadsheet ?

if yes, than can any one explain it step wise to me with proper basic code example of the kendoReact spreadsheet that will be great and appreciated. Also i am working on react.

Thanks