Hello there, 

We're having a little trouble hiding the Tooltip on the Column Menu component. In the code, we've wrapped Tooltip around the Grid and set parentTitle to "false". This works as expected hiding the tooltip when hovering over the 3 dots filter icon, but still keeping the tooltip visible on the column header.

However, if you hover slightly around the edge of the 3 dots filter icon, the tooltip is still visible. Please see attached image for reference. 

Would it be possible to hide the tooltip from the Column Menu component completely?

Hi,

When grouping by a column, if some rows have undefined value for that column field. The grid will display an empty row and the row with undefined field is missing in the grid.

https://codesandbox.io/p/sandbox/purple-dream-72dtr2?file=%2Fapp%2Fshared-gd-products.json%3A18%2C4

In my example, I removed "CategoryName" from the first item in shared-gd-products.json. So CategoryName for first item is undefined. The grid shows an empty row as the first row in the grid. See the attached screenshot.

Thanks,

Jie

Is there a way to have a Grid with multiple rows spanning a single parent row and both parent and child rows containing checkboxes. The parent checkbox is checked when one or more eligible child rows are checked.  All the child rows are selected when parent row is checked. Is this design achievable using PivotGrid/Master-Detail Grid.

Below is the screenshot for reference

Hello.

Sorry for the question, but I'm confused. We use React Grid (5.12.0) together with Column menu filter and row filter. I have a problem if the filter is of type [date].
We store the date in the ISO type without Zulu time in the database. After refreshing the page, if the column menu filter of the date type tries to consume a date in the format: [YYYY-MM-DDTHH:mm:ss.SSS], the whole page crashes. This happens when I want to edit or delete a date value. Column menu filter is closed and I don't know how to force the filter to process the given format. Filter data is complex, we use both row filter and column filter together. Iterating everything and formatting the data is difficult. If I define the format above the column, it does not help. How can I solve it?

Here are the screen errors:

Another problem is why the code crashes with this error. I would expect the date picker to display an empty field and the console to report a warning.

Thank you

Hello,

Does anyone know if there are plans to have a configuration for KendoReact date inputs that work similarly to Kendo UI for jQuery's parseFormats?

I am using a DateTimePicker and have the following requirements:

1. The time must be formatted using military time ie HH:MM
2. The user must be able to manually type the year as a two OR four digit year 
3. On blur, the year ought to display as a four digit year (I don't make the rules)

I have been able to accomplish the second point in a DatePicker by 1. Not specifying a format and 2. Adding some logic in the onBlur event so that a 2-digit year is replaced with a 4-digit year.

I have been scratching my head as to how to accomplish this with the DateTimePicker - I need to specify the format for the time format, and that is constraining the year length.

I'm sure I will find a solution eventually, but having an option like parseFormats would be really helpful in this case. Or maybe there is a different config I can use for this?

Thanks!

Hi.

I use the TreeView to display my data and I have added some logic to load the "branches" of the tree dynamically every time the user clicks on the little triangle. That works perfectly. But now I have an addition to solve and I'm a little stuck regarding the "checked" state.

I use the checkboxes infront of the branches to make the branches checkable and I use the onCheckChange event to trigger the handleTreeViewCheckChange function with the checkChildren and checkParents Options both set to true. So far so good. But if I check a parent before I dynamically load the children, the children do not get checked automatically too. I have added to screenshots so you see the status before and after loading the children so you can better see what I mean. So before clicking on the little triangle infront of "Frankfurt" I check the checkbox for Frankfurt. Then I click the triangle to expand Frankfurt and I would like to achieve the children of Frankfurt are checked too after dynamically loading them.

I thought aoubt running the handleTreeViewCheckChange function again after the loading of the children is done, but of course then the TreeViewExpandChangeEvent is not present anymore, so I can't run it. Also I tried to manually create a new itemHierarchicalIndex and add it to the check state but somehow that did not work either. For your reference I have also attached my script.

/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react';
import { ENVIRONMENT, LOCATION } from '@iconag/general-types';
// import { LocationSelectionContext } from '@iconag/context';
import { GLOBALS } from '@iconag/globals';
import {
  handleTreeViewCheckChange,
  processTreeViewItems,
  TreeView,
  TreeViewCheckDescriptor,
  TreeViewExpandChangeEvent,
} from '@progress/kendo-react-treeview';
import {
  parseLocationChildren,
  parseLocationData,
  useReadLocationChildren,
  useReadSingleLocationHandler,
} from '@iconag/dataHandlers';
import { convertLocationDataToTreeData } from '@iconag/scripts';
import { mapTree } from '@progress/kendo-react-common';
import Loading from '../../Loading/Loading';

const textField = 'text';

type CheckedLocationIds = { id: string; itemHierarchicalIndex: string };

type LocalizationTreeSelectorProps = {
  environment: ENVIRONMENT.environment;
  locationURL: string;
};

const LocalizationTreeSelector = (props: LocalizationTreeSelectorProps) => {
  const { environment, locationURL } = props;
  const { LOCATION_ROOT } = GLOBALS;
  const [expanded, setExpanded] = React.useState<string[]>([]);
  const [check, setCheck] = React.useState<
    | any[]
    | (TreeViewCheckDescriptor & {
        ids: any[];
      })
  >({
    ids: [],
    applyCheckIndeterminate: true,
  });
  // const { selectedLocations, setSelectedLocations } = React.useContext(
  //   LocationSelectionContext
  // );
  const [treeData, setTreeData] = React.useState<
    LOCATION.LocationTreeDataItem[]
  >([]);

  const { readSingleLocation, readSingleLocationService, locationData } =
    useReadSingleLocationHandler(parseLocationData);
  const { readLocationChildren, locationChildren } = useReadLocationChildren(
    parseLocationChildren
  );
  const [currentParent, setCurrentParent] = React.useState<string | null>(null);
  const [checkedLocations, setCheckedLocations] = React.useState<
    CheckedLocationIds[]
  >([]);
  const copyDataAndLocation = (locationIndex: string) => {
    const data = treeData.slice();
    let location: any;
    mapTree(data, 'items', (item) => {
      if (item.id === locationIndex) location = item;
    });
    return { data, location };
  };

  React.useEffect(() => {
    if (readSingleLocationService.status === 'init' && locationData === null) {
      readSingleLocation(environment, 'Region', LOCATION_ROOT, locationURL);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
    if (locationData !== null) {
      const treeItem: LOCATION.LocationTreeDataItem =
        convertLocationDataToTreeData(locationData, true);
      if (treeData.length === 0) {
        setTreeData([treeItem]);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [locationData]);

  React.useEffect(() => {
    if (locationChildren !== null && currentParent !== null) {
      const { data, location } = copyDataAndLocation(currentParent);
      location.items = locationChildren.map((childItem, idx) => {
        const parentLocationIsChecked = checkedLocations.find(
          (loc) => loc.id === location.id
        );
        if (parentLocationIsChecked) {
          const newId =
            parentLocationIsChecked.itemHierarchicalIndex + '_' + idx;
        }
        return convertLocationDataToTreeData(childItem, false);
      });
      setTreeData(data);
      setCurrentParent(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [locationChildren]);

  const onExpandChange = (event: TreeViewExpandChangeEvent) => {
    const parentId = event.item.id;
    setCurrentParent(parentId);
    const expand = expanded.slice();
    const index = expand.indexOf(event.itemHierarchicalIndex);
    if (index === -1) {
      expand.push(event.itemHierarchicalIndex);
    } else {
      expand.splice(index, 1);
    }
    setExpanded(expand);
    if (event.item.hasChildren && !event.item.items) {
      readLocationChildren(
        event.item.type,
        event.item.id,
        environment,
        locationURL
      );
    }
  };

  const onCheckChange = (event: TreeViewExpandChangeEvent) => {
    const newCheckedData = handleTreeViewCheckChange(event, check, treeData, {
      checkChildren: true,
      checkParents: true,
      singleMode: false,
    });
    if (checkedLocations.find((locIds) => locIds.id === event.item.id)) {
      setCheckedLocations((checkedLocations) =>
        checkedLocations.filter((loc) => loc.id !== event.item.id)
      );
    } else {
      const newCheckedLocation: CheckedLocationIds = {
        id: event.item.id,
        itemHierarchicalIndex: event.itemHierarchicalIndex,
      };
      setCheckedLocations((checkedLocations) => [
        ...checkedLocations,
        newCheckedLocation,
      ]);
    }
    setCheck(newCheckedData);
  };

  if (readSingleLocationService.status === 'loading') {
    return <Loading spinnerSize="medium" />;
  }

  return (
    <TreeView
      data={processTreeViewItems(treeData, { expand: expanded, check: check })}
      onExpandChange={onExpandChange}
      onCheckChange={onCheckChange}
      expandIcons={true}
      textField={textField}
      checkboxes={true}
      animate={false}
    />
  );
};
export default LocalizationTreeSelector;

The useEffect in line 89 is where the children have been loaded and where I then tried to manipulate the check state. I removed my trials though because they did not work at all.

Any help would be greatly appreciated.

Thanks,

Bernd 

Hi.

In your PDFProcessing component you have the possibility as shown on this page, to add manual page breaks using CSS classes. 

I am using the drawDOM and exportPDF functionalities similar to what is shown here to generate a Base64String of my pages and then push that string directly to a PDFViewer instance so I can generate a PDF on the fly and show it in the viewer. The question is if there is a simliar functionality to add manual page breaks as with the PDFProcessing component if I generate the PDF on the fly?

To show what I've done, I have put my code here.

Thanks for any help.

Greetings,

Bernd

I have two events, event 1 ends at 08.34 and event 2 starts at 08.34, but are not stacking vertically.

If i change the duration of the events to fill a "slotDuration" then i renders correctly. 

How to get the events to stack vertically for shorter events?