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:

Hello,

sometimes happens that a tag is very long and takes all the available width in the multiselect input box.

In such cases it's very difficult to find the right point to click in order to open the option list.

I'd like to add code to open the popup list when clicking on a tag.

I thought of  using the tagRender property to make the tag clickable, but then I don't know what is the most appropriate way to trigger the open event in the multiselect:

const tagRender = (tagData: TagData, li: React.ReactElement<HTMLLIElement, string | React.JSXElementConstructor<any>>) => 
        React.cloneElement(li, li.props,
            [<span key={sizes.indexOf(tagData.data[0])} className="custom-tag" onClick={() => {console.log('li:', li) /*do something to open the list*/}}>{sizes.indexOf(tagData.data[0])}</span>, li.props.children])

Thank you 

Kind regards

Example

Use keyboard arrows and set a time and date result: (Tue Dec 14 2021 01:01:00 GMT+0100 (sentraleuropeisk normaltid)).

Do the same thing but clear input field first, for example with CTRL-a + backspace or delete. Year is now 1980 (Tue Jan 01 1980 02:02:00 GMT+0100 (sentraleuropeisk normaltid))