Hi, I have a problem handling all the mention in the title you can take a look at this stackblitz that I modify from the selection docs 

https://stackblitz.com/edit/react-wacgk5?file=app%2Fmain.jsx

the problems are:

1. when filtering the product name field and then removing the filter the total items of the grid became only 10 ( should be 77 ).

2. when changing the page the total items also became 10 and only 1 page remained to select.

what I'm doing wrong or there is a better way to handle this?

I needs to create the inner grid inside the details grid. For example, usually we have master grid detail grid. Here I needs to create one more detail grid inside the details grid in each row. Do we have option to create this multi-level grid.

Hi

I'm looking for a way to generate a PDF from React code server side. The library complains about the missing window object, wich is as expected in an browserless environment. Can I pass any options so it won't need window to translate html elements to groups?

import { Handler } from '@netlify/functions'
import { parseHTML } from 'linkedom'
import { drawDOM, exportPDF } from "@progress/kendo-drawing"

export const handler: Handler = async (event, context) => {
  var test = await getBase64()

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: `Error: ${test}!`,
    }),
  }
}

export async function getBase64(): Promise<string> {
  try {
    const { window, document } = parseHTML("<p>test</p>");
    let group = await drawDOM(document.body, { paperSize: "A4" })
    let dataUri = await exportPDF(group)
    return dataUri.split(";base64,")[1]
  } catch (ex) {
    return ex
  }

KendoReact Grid - When specifying filter = "numeric", the grid column filter will be numeric textbox (accepting only number and have step up/down)

We have a requirement that the lower bound of this filter input cannot be negative value.

1. is there a way to configure Grid or Column to limit this numeric filter ?

2. I think I should be able to prepare a custom component (use filterCell) for this filter (need to specify min/ max attribute). However, I am not sure how to include the numeric filter operation options?

Note - The thing that I am looking for is the output that Martin prepared in ( https://stackblitz.com/edit/angular-gwuwre?file=app/app.component.ts ) for question in Angular forum ( https://www.telerik.com/forums/limiting-numeric-filter-row-column-values )

Thanks,

SmCoup

I wonder if it is possible to set the + and - signs in the master/detail views of the Grid component sticky somehow, so that it stays when scrolling horizontally (see attached screenshot). For some of the other columns it works but how to do this for this column I don't know because there is not really a column for this I could manipulate...

When default KendoReact DatePicker is opened field gains autofocus on open

due to this when you click somewhere else on the page calendar loses focus and automatically closes, however when i use custom calendar props


DatePicker no longer gets focused when it is opened and due to that loses this autoclosing functionality

is there any way to keep this autoclosing functionallity while using custom calendar component?

I would like to accomplish the behavior shown in this example with Kendo React.

$("#grid").kendoTooltip({
  filter: "th:nth-child(2)", // Select the th elements of the Grid.
  position: "bottom",
  content: function(e){
    // Return the text content of the hovered header.
    return e.target.text();
  }
}).data("kendoTooltip");

With Kendo React I'm doing the following

<Tooltip
  filter={(target) => target.matches("th:nth-child(2)")}
  position="bottom"
  content={({ target }) => target.textContent}
  anchorElement="target"
>
  <Grid
    ref={(instance) => {
      if (instance) {
        const columnHeaders = instance.element.querySelectorAll("th:nth-child(2)");

        columnHeaders.forEach((header) => {
          header.setAttribute("title", "something for tooltip to work");
        });
      }
    }}
  >...</Grid>
</Tooltip>

This works fine if I hover over the blank space around the column header text (target = <th>), but if I hover over the column header text (target: <span> within <th>) the tooltip doesn't show. If I make the modification below then it shows, but the position is wrong, the tooltip shows right below the text and not below the <th> element.

<Tooltip
  filter={(target) => target.matches("th:nth-child(2)") || target.closest("th:nth-child(2)")}
  position="bottom"
  content={({ target }) => target.textContent}
  anchorElement="target"
  parentTitle
>
  <Grid
    ref={(instance) => {
      if (instance) {
        const columnHeaders = instance.element.querySelectorAll("th:nth-child(2)");

        columnHeaders.forEach((header) => {
          header.setAttribute("title", "something for tooltip to work");
        });
      }
    }}
  >...</Grid>
</Tooltip>

The example below has the behavior I want to achieve with Kendo React. No matter where I hover within my filter selector it shows the tooltip with respect to the filter selector.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-with-kendo-ui-tooltip

Is it possible for `textField` to lookup a value from a sub object property?

I've read this documentation, and it's possible to set the textField to lookup to an object property. However,  in my case, I'm handling a structured json response, see the data structure below.

I need to set textfield to `member.name`. How do I do this? TIA!

{
  results: [
    { 
     member: { 
       id: 123,
       name: 'John Doe'
     } 
     address: {
      line1: 'aaaaa',
      line2: 'bbbb'
    },{ 
     member: { 
       id: 124,
       name: 'jane smith'
     } 
     address: {
      line1: 'aaaaa',
      line2: 'bbbb'
    },
   }
  ],
pagination: {
 page: 1,
 total: 100,
}
}