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,
}
}

Hi,

I am trying to add a right click context menu to the header of a column in the React Grid. Note: The grid is about 500 pixels down the page so it needs to be scrolled to be within view (I think this may be relevant).

I am adding the headerCell:

headerCell={GridColumnHeader}

With this header:

  const GridColumnHeader = (props) => {
    return (
      <div className="k-link" onClick={props.onClick}
           onContextMenu={(e) => {
      e.preventDefault()
      handleContext(e, props.field)
    }}
      >
        {props.title}
        {props.children}
      </div>
    );
  };

The problem is in the handleContext menu, the clientX and clientY coordinates seem off, it looks initially like they aren't taking into account the position the page is in when scrolled.

  function handleContext(e, field) {
    offSet.current = {
      // left: e.clientX,
      // top: e.clientY,
     left: e.pageX,
     top: e.pageY,
    };
    setShow(true);
  }

As you can see, here I use pageX and pageY which seems more reliable. But then I get strange behavior when the menu is displayed and I click another column header (it can jump around a little but I think I might need to universally hide the menu when anything other than the menu is clicked).

Am I doing something wrong, or am I right to use this?

The popup code is below:

      <Popup show={show} offset={offSet.current}>
        <Menu
            onSelect={() => setShow(false)}
          vertical={true}
          style={{
            display: "inline-block",
          }}
        >
          <MenuItem text="Item1">
            <MenuItem text="Item1.1"/>
            <MenuItem text="Item1.2">
              <MenuItem text="Item1.2.1"/>
              <MenuItem text="Item1.2.2"/>
            </MenuItem>
          </MenuItem>
          <MenuItem text="Item2">
            <MenuItem text="Item2.1"/>
            <MenuItem text="Item2.2"/>
          </MenuItem>
          <MenuItem text="Item3"/>
        </Menu>
      </Popup>

I also have this to hide the menu when clicked outside:

  React.useEffect(() => {
    document.addEventListener("click", () => {
      show ? setShow(false) : null;
    });
  }, [show]);

I have a form with a dropdown. Based on what gets chosen in the dropdown, multiple fields in the form should get changed. Code:

https://stackblitz.com/edit/react-ts-m3qyz2?file=index.tsx

This works perfectly but the code is quite messy (see lines 93 - 115). I would prefer to call the onChange handler external like in the lines I have commented out (onDataTypeChange). But this doesn't work because there I don't have access to the formRenderProps.onChange method. How could I achive this?

I have a multi-page form that with upload fields that may need to be revisited to upload or change previously uploaded files. Form inputs maintain their state, but upload is blank when I return to the page after uploading a file. How would I keep the information on the list when I return to the page similar to inputs?

here is what I would like to keep upon returning to the page: