Questions on KendoReact Forum

1 answer

182 views

Drag&Drop over Splitter windows / Scheduler issues

Ok, this is a little more complex issue with multiple questions.

1.) I have setup a Splitter Component in a Window Component. In one of the Splitter-Windows I have buttons which I have "enhanced" with the Drag&Drop functionality and that works only inside the same Splitter window, meaning I can't move them from one Splitter window to another. Is it possible to use the DragAndDrop over multiple Splitter windows? See attached screenshot. I have currently put the <DragAndDrop> around the <Splitter> Component like below but it doesn't seem to help.

<DragAndDrop>
    <Splitter
        style={{ height: '100%' }}
        panes={outerPanes}
        orientation="horizontal"
        onChange={splitterOuterChange}
    >
        <WeekCalendarProfiles program={props.item} />
        <Splitter
            style={{ height: '100%' }}
            panes={innerPanes}
            orientation="vertical"
            onChange={splitterInnerChange}
        >
            <WeekCalendar program={props.item} />
            <WeekCalendarChannels program={props.item} />
        </Splitter>
    </Splitter>
</DragAndDrop>

2.) As you can see, in the main Splitter Window I have a Scheduler instance. I have added the drop target for the drag&drop to a CustomViewSlot like this:

    const CustomViewSlot = (props: SchedulerViewSlotProps) => {
        return (
            <>
                <DroppableBox onDrop={handleDrop} id={guid()} selected={selected}>
                    <SchedulerViewSlot {...props} style={{ ...props.style }} />
                </DroppableBox>
            </>
        );
    };

My issue is: How would I be able to get access to the data of the slot where there box would be dropped and trigger an add dialog for an event?

3.) The CustomViewSlot will automatically get assigned to all slots of the calendar view. Is it possible to assign the CustomViewSlot to the 'all day' slots only?

Thanks!

Scheduler

Splitter

answered on 20 Jan 2022

1 answer

108 views

Window does not size based on content

Hi Team,

Looking at this example, the width and height are set, but how can I configure the window to auto-size to wrap its content? Similar to the jQuery version.

Thanks,
Grant

Window

answered on 20 Jan 2022

2 answers

137 views

Architect or designer

Do You have any designer (architect) tool for creating your component?

General Discussions

answered on 18 Jan 2022

1 answer

134 views

Overriding PropsContext

Hi,

So the new PropsContext features look great, but I need some clarification, can they be overridden in the component?

eg:
<DatePickerPropsContext /> contains a min (date) value of today, which is generally fine, however in one instance of the datepicker, I want the min (date) to be tomorrow.I've noticed that any field set in the props context cannot be overridden, am I using this incorrectly, is the props context not meant to be used for default values app-wide?

See example: https://stackblitz.com/edit/react-hba3r8?file=app%2Fmain.jsx

Thanks,
Grant

General Discussions

Wrappers for React

answered on 17 Jan 2022

1 answer

341 views

grid dynamic localization

Hi.

I don't understand well from the docs how to apply different translations for grids.

the only example that I see is https://www.telerik.com/kendo-react-ui/components/grid/globalization/

for Spanish but it is not enough for me, I need Hebrew, Chinese, and so on where I can find all the resources?

and how can I do dynamic change without all the imports like in the example?

General Discussions

Grid

Localization

answered on 17 Jan 2022

1 answer

82 views

Access specific fields in selected rows

My grid is populated from state after an API call. The piece of state is called data.

const [data, setData] = useState([])

Selection is enabled on the grid, so I can create an array of selected rows with:

let allSelected = data.filter((item) => item.selected)

Objects in allSelected have the shape:

[{
  _id: 1234
  selected: true,
  name: "Joe",
},
{
  _id: 1235
  selected: true,
  name: "Jim",
}]

After I perform an operation update on the selected rows, what's the best way to hide those rows?

Is there a method to get the _IDs of the selected rows?
Is there a method to hide a given row by _ID?

I'm looking for some way to filter selected rows from data then update state. Something akin to:

      const filtered = data.filter((item) => !allSelected.includes(item._id))
      setData(filtered)

Thanks!

Grid

answered on 15 Jan 2022

1 answer

100 views

Warning when using animation=true in TabStrip

I have added a TabStrip on a Dialog inside a form and if I don't set the animation parameter for the TabStrip to false I get the attached error in the browser console. Here is the part of my code so you can see what I do:

        <Dialog
            title={t(`channel:${getDialogHeadline(props.mode)}`)}
            onClose={props.cancelForm}
            width={'60%'}
        >
            <Form
                onSubmit={onFormSubmit}
                initialValues={formState}
                render={(formRenderProps: FormRenderProps) => (
                    <div className="k-d-flex-col">
                        <FormElement style={{ width: '90%' }}>
                            <div>
                                <TabStrip
                                    selected={selected}
                                    onSelect={handleSelect}
                                    animation={false}
                                >
                                    {tabPages.map((item, index) => {
                                        return (
                                            <TabStripTab
                                                disabled={item.disabled}
                                                title={item.label}
                                                key={index}
                                            >
                                                {item.content}
                                            </TabStripTab>
                                        );
                                    })}
                                </TabStrip>
                            </div>
...

And here are the kendo packages that I use:

        "@progress/kendo-data-query": "^1.5.5",
        "@progress/kendo-drawing": "^1.16.0",
        "@progress/kendo-licensing": "^1.2.1",
        "@progress/kendo-react-animation": "^4.13.0",
        "@progress/kendo-react-buttons": "^4.13.0",
        "@progress/kendo-react-data-tools": "^4.13.0",
        "@progress/kendo-react-dateinputs": "^4.13.0",
        "@progress/kendo-react-dialogs": "^4.13.0",
        "@progress/kendo-react-dropdowns": "^4.13.0",
        "@progress/kendo-react-form": "^4.13.0",
        "@progress/kendo-react-grid": "^4.13.0",
        "@progress/kendo-react-indicators": "^4.13.0",
        "@progress/kendo-react-inputs": "^4.13.0",
        "@progress/kendo-react-intl": "^4.13.0",
        "@progress/kendo-react-layout": "^4.13.0",
        "@progress/kendo-react-notification": "^4.13.0",
        "@progress/kendo-react-progressbars": "^4.13.0",
        "@progress/kendo-react-tooltip": "^4.13.0",
        "@progress/kendo-react-treeview": "^4.13.0",
        "@progress/kendo-react-upload": "^4.13.0",
        "@progress/kendo-theme-material": "^4.43.0",

I already experienced a similar issue with the TreeView component and got the answer from you that this has been an issue. See https://github.com/telerik/kendo-react/issues/723

Just thought, I'd bring this to your attention that there is the same problem with the TabStrip.

TabStrip

answered on 14 Jan 2022

1 answer

2.5K+ views

testing of RangeSlider using Jest - how to simulate user setting value using fireEvent

I have a range slider within my own functional component, and want to test the user setting the slider values from Jest.

I have tried:

const draggerEles = within(rangeSliderEle).getAllByTitle("Drag")
fireEvent.change(draggerEles[0], { target: { value:7 } }) 

but it errors with "The given element does not have a value setter"

I could be setting the wrong element of course, maybe I should set the slider role elements. But I've tried those as well, to no avail.

How do I find out what setters or events are supported for an element?

interestingly, using:

        act(() => draggerEles[0].setAttribute("aria-valuenow", "7"));

does modify the component

but doesnt seem to cause any re-render!

RangeSlider

answered on 13 Jan 2022

1 answer

82 views

Loop over an array of selected rows

Is it not possible to delete a question?

Grid

answered on 13 Jan 2022

1 answer

197 views

selectedState contains an object - What next?

I copied the sample code at Customizing the Selection to build my first multi-select grid with checkboxes. After I added a button with a handler to log selectedState I see that it contains an object:

{
"1": true,
"2": false,
"3": true,
"4": true,
"5": true
}

Apologies for the naive question, but how does this help me process the selected rows? Are there JS techniques for putting this content in an array? Is there some way to filter an object?

I need to get an array of selected rows to move my project forward. I'm just not clear how to take the default state and use it.

Grid

answered on 13 Jan 2022