Questions on KendoReact Forum

1 answer

165 views

Hello Telerik, does the multiselect component have the ability to suggest a search like autocompletebox does? Or does autocompletebox have multiselect mode? and is it possible to do something from this at the moment?

AutoComplete

MultiSelect

answered on 04 Sep 2023

1 answer

460 views

Datepicker issue for leap years

Hello,

Some of our users prefer to type the date instead of selecting it in the datepicker.
When user starts typing data, they usually starts with Date, then month and then Year.

One of your user is trying to enter leap year date in the picker and Kendo datepicker is defaulting to 28th Feb.
User typed 29 for day and when he typed 02 as month, it's changing date to 28 without waiting for year to be entered.

Is there a possibility to restrict this? We want no validation to happen until user enters the whole date. MUI datepicker works in the similar way. is there a way to achieve that in Kendo Datepicker?

DatePicker

answered on 04 Sep 2023

1 answer

187 views

Grid onItemsChange

Hi,

We have a use case in our project where we need to track changes made for the user to provide the batch edit functionality. So we have data and initialData initialized, data is passed to the grid and in onItemsChange we change only the data, and we never touch the initialData except if the data from the server comes back(we make new API call).
But the initialData changes also when we change data.

Here is reproduced example that I got from your page and i just added initialData state. Here we can see that everything changes and not just data={data} that was passed to the grid and updated in onItemsChange function.

Demo: Demo from KendoReact examples

Is this the expected behaviour that initialData, data and even sampleproducts change even though i only want to modify data that was passed to grid, and the one modified in onItemsChange function.

Best regards

Grid

answered on 02 Sep 2023

1 answer

114 views

[Solved] Inner grid bubbles the event with wrong metadata

Code sandbox which reproduces the error: pensive-galileo-ksx7nr - CodeSandbox (you need to click to expand a row, then you will have an inner grid, try to click on items inside and see how outer grid selection changes)

I have a Grid and in details row I have another grid (detailRow={MyCoponentWithAnotherGrid}). When I click on the row within the inner grid, also the outer grid fires the event onSelectionChange. It is normal but inside the event for this outer grid, I have info that the even was fired for the outer grid but the endRowIndex property of the event shows that the item clicked had index from the inner grid. Because of that, when I use

getSelectedState({
          event,
          selectedState: selectedState,
          dataItemKey: DATA_ITEM_KEY,
        });

It returns me the new selection which selects the item under the same index as in the inner grid... but this event is in the outer grid. So If i have a grid like this:

- Item 1
  - Item 1.1
  - Item 1.2
-Item 2

and I click on "Item 1.2", then my outer grid selects the item "Item 2". Is this a bug? Can I somehow prevent event bubbling from the inner grid maybe as a workaround?

Grid

answered on 02 Sep 2023

2 answers

376 views

How to render a Complex JSON Data into KendoReact Grid

Hello,

I'm having trouble with KendoReact Grid data. The data is in a complex JSON format, and I'm not sure how to properly display it on the grid. The JSON data changes dynamically, so I can't predetermine its structure for the return for this format.

 <GridColumn field="ProductID" title="ID" width="40px" />
 <GridColumn field="ProductName" title="Name" width="250px" />
 <GridColumn field="Category.CategoryName" title="CategoryName" />
 <GridColumn field="UnitPrice" title="Price" />
 <GridColumn field="UnitsInStock" title="In stock" />

I'm using the Map function to dynamically show the data, but it's leading to multiple instances of data being displayed as [object, object]

Can you offer some guidance on how to address this problem?

this is my code link.

https://stackblitz.com/edit/react-v7tmhx?file=app%2Fproducts.json,app%2Fmain.jsx

General Discussions

Grid

answered on 31 Aug 2023

1 answer

340 views

[Solved] Warning with simple Grid

Hi.

I get a weird warning when I use a simple DataGrid component:

[webpack-dev-server] WARNING in ../../node_modules/@progress/kendo-react-grid/dist/es/Grid.js 857:8-18
export 'updateLeft' (imported as 'updateLeft') was not found in '@progress/kendo-react-data-tools' (possible exports: BooleanFilter, BooleanFilterCell, ColumnDefaultProps, ColumnMenuBooleanColumn, ColumnMenuBooleanFilter, ColumnMenuDateColumn, ColumnMenuDateFilter, ColumnMenuFilterForm, ColumnMenuFilterLogic, ColumnMenuForm, ColumnMenuItem, ColumnMenuNumericColumn, ColumnMenuNumericFilter, ColumnMenuOperators, ColumnMenuTextColumn, ColumnMenuTextFilter, ColumnResize, CommonDragLogic, DateFilter, DateFilterCell, DragClue, DropClue, EnumFilter, Expression, FILTER_ROW_CLASS, FOCUSABLE_ELEMENTS, Filter, FilterRow, Group, Header, HeaderCell, HeaderRow, HeaderSelectionCell, HeaderThElement, KEYBOARD_NAV_DATA_BODY, KEYBOARD_NAV_DATA_HEADER, KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL, KEYBOARD_NAV_DATA_SCOPE, KEYBOARD_NAV_DATA_ZONE, KEYBOARD_NAV_FILTER_COL_SUFFIX, NumericFilter, NumericFilterCell, Operators, Pager, TABBABLE_ELEMENTS, TABLE_COL_INDEX_ATTRIBUTE, TABLE_PREVENT_SELECTION_ELEMENT, TABLE_ROW_INDEX_ATTRIBUTE, TableKeyboardNavigationContext, TableSelection, TextFilter, TextFilterCell, closestTagName, createFilterComponent, filterBy, getColumnIndex, getGroupIds, getIndex, getOffset, getRowIndex, getSelectedState, getSelectedStateFromKeyDown, getSelectionOptions, isRtl, mapColumns, normalize, orderBy, readColumns, relativeContextElement, setExpandedState, setGroupIds, setSelectedState, stringOperator, tableColumnsVirtualization, tableKeyboardNavigation, tableKeyboardNavigationBodyAttributes, tableKeyboardNavigationHeaderAttributes, tableKeyboardNavigationScopeAttributes, tableKeyboardNavigationTools, unaryOperator, useTableKeyboardNavigation)

My Grid just looks like this:

<Grid data={data} pageable={true}>
    <Column title="Modul" field="id" />
    <Column title="Typ" field="type" />
    <Column title="Aktion" cell={ActionCell} />
</Grid>

So there is nothing special in it. The ActionCell just includes a few buttons inside of a <td></td>

I'm using version 5.16.1

Greetings,

Bernd

Grid

answered on 31 Aug 2023

1 answer

130 views

[Solved] Is it possible to get the order of the moved item

When the board change event is raised, is it possible to get the order (or index) of the moved item in the event data.

I am getting this manually like this:

const handleTaskBoardChange = React.useCallback((event) => {

        if (event.type === "task") {

            setTaskData(event.data);

            // Get new order of moved item
            var allItemsAtDroppedStatus = event.data.filter(x => { return x.status === event.item.status });

            var newOrder = allItemsAtDroppedStatus.findIndex(x => { return x.id === event.item.id }) + 1;

            var data = { id: event.item.id, previousCampaignProjectStageType: event.previousItem.status, newCampaignProjectStageType: event.item.status, order: newOrder, };

            updateCampaignTaskBoardStage(data)
                .then((response) => {
                    loadTaskBoardData();
                })
                .catch((response) => {
                });
        }
    }, []);

I was just wondering if there is something built in that I have missed, if not, this would ideally be included in the event item data for the moved item in order to persist the item orders when saved, it seems like a natural property to have.

Thanks.

note: there is no TaskBoard tag to assign this to.

TaskBoard

updated question on 29 Aug 2023

1 answer

126 views

Is it possible to add both groupable and inline editable row in the same Data Grid?

Can I add the groupable column and inline editing feature both in a Data Grid?

answered on 28 Aug 2023

1 answer

145 views

Scheduler Item Width splits for each day

Hi, I am trying to Implement scheduler with Monthly, Week and Daily Timeline View. The performance of scheduler is really dissapointing when it comes to render large number of slots. After some tweaks with slotDuration and slotDivision, was able to make it work for me.
But there is an issue when using Timeline View. if i have an event that occurs within multiple days period. The Item is divided seperated in parts for each day, because of which the event title is repeated for each item it renders.

After exploring library, tried to implement a custom list of slots rendering for each item which would cover multiple dates for same without repeating, but was unable to achieve it.

const createSlots = (
    startDate: Date,
    endDate: Date,
    durationMinutes: number,
    ogSlot: Slot
  ) => {
    const slots = [] as Slot[];
    debugger;

    const currentSlot = dayjs(startDate);
    const endDateTime = dayjs(endDate);

    let slt = currentSlot;
    let index = 0;
    while (slt.isBefore(endDateTime)) {
      let nextSlotStart = slt.add(durationMinutes, 'minute');
      slots.push({
        start: slt.toDate(),
        end: nextSlotStart.toDate(),
        group: ogSlot.group,
        index: index,
      } as Slot);
      slt = nextSlotStart;
      index++;
    }
    return slots;
  };

  const customSchedulerItem = (props: SchedulerItemProps) => {
    var s = { ...props };
    let customSlots = createSlots(
      props.start,
      props.end,
      60 * 6,
      props.slots[0]
    );

    return (
      <Tooltip openDelay={100} position="bottom" anchorElement="pointer">
        <SchedulerItem
          {...props}
          slots={customSlots}
          style={{
            ...s.style,
            textAlign: 'start',
          }}
        />
      </Tooltip>
    );
  };