Questions on KendoReact Forum

1 answer

1.8K+ views

Infinite Scrolling With Sorting & Filtering

Hey there,

I've been having a tough time getting infinite scrolling to work with sorting and filtering. Because the infinite scrolling splices out of the array of data, I've set up an "original data" state to hold all of the unmutated data. However, this is not working well because the scroll location when you unfilter the data is causing more items to be loaded. I'm sure I'm dealing with a bug on my end, but is there any example of infinite scrolling with sorting and filtering? With a simplified example, I might be able to see what I'm doing wrong on my end.

Thank you!
Janki

Grid

answered on 25 Mar 2022

1 answer

189 views

Are there anyone who using Kendo UI react framework?

What's the Pros / Cons in comparison to other react frameworks?
Are there any pre-made design / prototyping solutions on the market?
If not, will you be interested in having such product for prototyping within Kenda UI guidelines?

General Discussions

answered on 25 Mar 2022

1 answer

472 views

React Tooltip should behave like a span

Hello, I would like to create my own icon component that includes a tooltip. I created a small sample project on stackblitz for this. Unfortunately, the icon and the tooltip don't work quite right in the example project, but that's not important for my question.

My goal would be for the two icon components to be displayed in a line next to each other by default.

After executing, if I assign the style attribute <div style="display: inline-block"> to the div that wraps the span, it works the way I want it to.

I'm assuming the tooltip behind the scenes creates this construct, which I can't directly access in the code via the <tooltip> tag. Is there a way to find out which CSS class one would need to access to enable the desired behavior.

I would be very happy about a solution proposal. Thanks in advance.

Tooltip

answered on 25 Mar 2022

0 answers

158 views

Scheduler - Event is not displayed properly

Hello,

I am facing an issue with the Scheduler. When I add a new event in the Scheduler , the resulting event is not displayed properly. For example, if I create a new event between 9:00 AM and 10:00 AM , it will be displayed on my scheduler between 8:30 AM and 9:30 AM. Then , if i click on the event, change view or reload the page , it will display properly between 9:00 AM and 10:00 AM.

I have noticed that the "display gap" is linked to the slotDuration of the view. I have tried to change the slotDuration from 30 min to 15 min and then the "display gap" was 15 min.

Note that the "display gap" does not appear if i use the default date value when i create an event with 30 min duration for the event. But if i add programmatically a logic like endDate= startDate + 1 hour , then the display gap appears.

What can i do to solve my problem ?

Dev Stack:

- NextJS : 12.0.10

- Kendo-React-Scheduler : 4.12.0

Here is a gif that show the wrong display at first and then when i click on it , it goes back to proper display :

Thank you in advance.

Scheduler

asked on 24 Mar 2022

1 answer

67 views

How can I get custom GridColumnMenuFilter to stay open when selecting dates from non-Kendo DatePicker

Our app uses a custom date picker that is not from Kendo (better matched the UI our designers were going for). When I try to create a custom filter menu I can get the menu and then the calendar to open. When I go to select a date I think the filter menu see that as a click outside of menu and it closes.

Also suspect part of the issue is that the date picker uses moment to format dates so there could be a possible mismatch there, although I think I have done what I can to convert this format as needed.

DatePicker

Filter

Grid

answered on 24 Mar 2022

1 answer

68 views

I would like to have a React ComboBox select the text when the onFocus Event is fired

I am trying to highlight the text in a combobox so that I can highlight the text when a user clicks in the combo box.

Here is a sample of what I am trying to do:

  <ComboBox
                            className='k-combobox'
                            placeholder='Select Center'
                            data={this.state.centerAccessFiltered }
                            textField="centerDisplayName"
                            value={this.state.selectedCenter}
                            filterable={true}
                            onFilterChange={this.filterChange}
                            onChange={(e) => this.changeCenter(e.target.value.centerID.toString())}
                            clearButton={false}
                            onFocus={this.handleFocus}
                        />

    handleFocus = (e) => {
        e.target.element.select()
    }

This works on the Input Control but not on the ComboBox. Is there a way to select the current text when as user clicks on the control?

ComboBox

answered on 24 Mar 2022

1 answer

86 views

MultiColumnComboBox in grid

Are there any React code samples for displaying a grid drop down editor but with multiple columns?

Thanks

Grid

answered on 23 Mar 2022

1 answer

105 views

Multiple X Axis?

Is it possible to have two X axis, one on the top, and one on the bottom?

I'm aware you can have 2 Y axis, but how would you go about doing it for X axis?

Charts

answered on 22 Mar 2022

1 answer

271 views

onblur not working as expected in input

Hello,

I'm having trouble using the onblur in an input because it is not being triggered on loosing focus of the element but on change of the data entered. My code is below for further referene, I was thinking may be the validator is triggering this behavior? some help would be appreciated.

const MyContext = React.createContext({
  updateCompNickname: (value: any) => { },
  updateCompSerialNo: (value: any) => { },
  postCompressorSave: (value: any) => { }
});
/**
* Validator
*/
const inputRegex = new RegExp(/^([a-zA-Z\d\.,%/\-_ ].*)/);
const inputValidator = (value: any) => inputRegex.test(value) ? "" : "Please enter a valid value.";
const NicknameInput = (fieldRenderProps: any) => {
  const { validationMessage, visited, onChange, ...others } = fieldRenderProps;
  const currentContext = React.useContext(MyContext);
  return (
    <div>
      <label htmlFor="nickname-name" className="text-info, label-add-compressors">Nickname</label>
      <Input type="text" name="nickname" placeholder=""
        style={{ height: "30px" }}
        onBlur={currentContext.postCompressorSave}
        onChange={e => {
          fieldRenderProps.onChange(e) // call the Form onChange and then execute any custom logic
          currentContext.updateCompNickname(e.value);
        }}
        {...others} />
      {visited && validationMessage && <Error>{validationMessage}</Error>}
    </div>
  );
};
constAddCompData = () => {
  return (
    <div >
      {<MyContext.Provider
        value={{
          updateCompNickname: updateCompNickname,
          updateCompSerialNo: updateCompSerialNo,
          postCompressorSave: postCompressorSave
        }}
      >
<fieldset className={"k-form-fieldset"}>
                <div className="mb-3">
                  <Field
                    name={"nickname"}
                    component={NicknameInput}
                    validator={inputValidator}
                  />
                </div>
    </div>
  )
}
export default AddCompData

Input

answered on 22 Mar 2022

1 answer

290 views

Adding year view into Scheduler

Hi.

I use the Day, Week and Month view in the Scheduler component. Unfortunatley the component doesn't support a year view which I need so I would like to include that myself from a different source. Question: Is it possible to add a "Year" button to the Scheduler buttons (see screenshot) that would show a custom component in the Scheduler view port when pressed?

Thanks!

Bernd

Scheduler

answered on 21 Mar 2022