Questions on KendoReact Forum

1 answer

75 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

102 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

123 views

[Solved] 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

380 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

326 views

[Solved] 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

1 answer

258 views

I use the sidebar toggle but why does the kendo reaction chart always break or leave a space if the sidebar is enabled or closed

please give me a solution or code sample

Charts

answered on 21 Mar 2022

1 answer

108 views

[Solved] Inserting non-numeric data into an array for a scatterplot

0

I am trying to display a scatterplot from a variable called data. data should contain the x and y values for the scatterplot. The method below is what I am attempting to do to insert the x and y values, however the graph is showing up blank.


let data = []
for(var i = 0; i < sixth_x.length; ++i){

  data.push({xField: sixth_x[i], yField: sixth_y[i]})

}

x is a string, and y is a number. I realize that x is non-numeric, although upon converting to an int, it still fails to display on a scatterplot. Any suggestions would be helpful

This is my method to display the graph


  <ChartSeriesItem type="scatter" data={data} xField="sixth_x"
    yField="sixth_y"/>
</ChartSeries>

Charts

answered on 18 Mar 2022

1 answer

111 views

drawer item route with parameter for edit data is not working

how can generate drawer item route for add/edit page and list page.please any one can explain me

Drawer

answered on 18 Mar 2022

1 answer

188 views

Plot bands don't work correctly when ChartCategoryAxisItem min is set

Category axis plot bands start behaving strangely when you zoom a chart by increasing the min prop of ChartCategoryAxisItem. Category plot bands are essentially broken if you're setting the min prop to a non-zero value.

https://stackblitz.com/edit/react-zaswls?file=app/main.tsx

This is a version of the first example at https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/plot-bands/ that has been edited to show the problem. When ChartCategoryAxisItem min is set to 5 and max is set to 10, the category plot band from 8 to 10 should be visible, yet it's not.

Charts