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))

I have a Grid component with a custom cell property. The input field for the cell is determined dynamically depending on a different field type input. So for example if the dataType is 'string" I display a simple input field, if it is 'enum' I display a NumericTextBox.

The grid and the determination of the input field can be seen here:

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

This is NOT a working application because it is just too big to put here in its full glory... In the index.tsx from line 200 to 251 you see the implementation of the cell ("ValueCell") and in the file CustomInputFields you can find the ChannelTypeInput component. As the FieldRenderProps require a onFocus and onBlur handler, I tried to implement that myself but I guess this is not enough to handle them.

This works perfectly but the issue is that if I try to type into the Input or NumericTextBox, it loses focus after every character and I have to click into it again. How can I get rid of this behavior?

Another question is: The NumericTextBox also allows negative values. Can I somehow specify that only positive values can be added?

Hello,

I'm trying to convert a old application that is now using kendo react wrappers to pure KendoReact.

The issue I'm facing is that the selected values in my model are not objects, but are an array of primitive values.

Is there a way to specify a field to be used as value like it was with valuePrimitive in the old Kendo UI ?

My MultiSelect is declared as following:

<MultiSelect
	ref={listRef}
	data={dataSourceItems}
	dataItemKey={props.dataValueField}
	disabled={!props.enable}
	textField={props.dataTextField}
	value={uiContext.maStore[props.entityName] && uiContext.maStore[props.entityName][props.fieldName] && tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())}
	onChange={changeHandler}
	filter={props.filter}
/>

where maStore is a mobx-state-tree store, and dataSourceItems is a array of objects like:

[
{id: 100, code: "cod1", description: "description 1"},
...
]

and 

tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())

is an array of numbers

Thank you.

Kind regards

Hello Guys

Here I bring another question regarding to Date type on charts when displaying data.

I am supposed to have on X axis the fist and the last label for the dates, but despite of the last date is 2021-10-18T00:00:00+00:00, it is not being shown.

should dates have a special format or something?

Here is the code :

const data = [
  {
    date: '2021-08-02T00:00:00+00:00',
    score: 631,
  },
  {
    date: '2021-08-09T00:00:00+00:00',
    score: 624.25,
  },
  {
    date: '2021-08-23T00:00:00+00:00',
    score: 596.6,
  },
  {
    date: '2021-09-13T00:00:00+00:00',
    score: 505.666656,
  },
  {
    date: '2021-09-27T00:00:00+00:00',
    score: 417,
  },
  {
    date: '2021-10-04T00:00:00+00:00',
    score: 485.666656,
  },
  {
    date: '2021-10-18T00:00:00+00:00',
    score: 548,
  },
];

const ChartContainer = () => (
  <Chart>
    <ChartCategoryAxis>
      <ChartCategoryAxisItem
        majorGridLines={{ visible: false }}
        justified={true}
        categories={data.map((d) => d.date)}
        labels={{ rotation: 'auto', step: data.length - 1 }}
        type="date"
      />
    </ChartCategoryAxis>
    <ChartValueAxis>
      <ChartValueAxisItem
        majorGridLines={{
          visible: false,
        }}
        title={{
          text: 'Scaled Score',
        }}
      />
    </ChartValueAxis>

    <ChartSeries>
      <ChartSeriesItem
        type="line"
        data={data.map((d) => d.score)}
        missingValues="interpolate"
      />
      <ChartSeriesItem
        type="area"
        data={data.map((d) => d.score)}
        missingValues="interpolate"
        color="rgb(214 237 247)"
      />
    </ChartSeries>
  </Chart>
);

Stackblitz live demo

Thanks for your help