Telerik Forums
KendoReact Forum
1 answer
3.5K+ views

In the example here:  https://www.telerik.com/kendo-react-ui/components/buttons/button/

you use the "any" type for the event return.  What is the proper  type to use, and if "any" is really correct, please explain why.  I usually think of "any" as the type to use when I don't understand what the proper type I should be using is. (same with newLogs though I'm not using logs, just seems unusual to see "any" used in library docs)

 


const ButtonContainer = () => {
  const [logs, setLogs] = React.useState([]);

  const handleDomEvent = (event: any) => {
    let newLogs: any = logs.slice();

    newLogs.unshift(event.type);

    setLogs(logs);
  };
  return (
    <>
      <Button
        onClick={handleDomEvent}
        onMouseDown={handleDomEvent}
        onMouseUp={handleDomEvent}
        onFocus={handleDomEvent}
        onBlur={handleDomEvent}
        onKeyPress={handleDomEvent}
      >
        My Button
      </Button>
      <EventLog title="Event Log" logs={logs} />
    </>
  );
};

Krissy
Telerik team
 answered on 21 May 2021
1 answer
75 views

I notice that when I set a button background color, clicking on that styled button gives no indication of whether the button is clicked. Is there a proper way to change the color of a button and still have it behave like a button (that is, show indication when clicked).

 

<Button icon="cut" title="On Peak" style={{ backgroundColor: "red" }} >
On Peak
</Button>
Krissy
Telerik team
 answered on 21 May 2021
1 answer
236 views

Hi,

Is it possible to add line marker to the legend, so that if we choose rectangle for marker style we get a little rectangle in the legend?

I can alter the text and color by customizing "labels" prop but it still shows just line, no matter what marker type is selected.

 

Regards,

Vladimir

 

Krissy
Telerik team
 answered on 20 May 2021
1 answer
185 views

Hi,

 

I was wondering if it is possible (and how ;)) to only show a loader if (for example) an API call exceeds a certain amount of milliseconds. Something like this:


if (datanotyetready) {
   <Loader />
}
else {
  // Render a grid or something
}
I expect that I have to do something with an animation, but couldn't figure it out...
Vasil
Telerik team
 updated answer on 20 May 2021
1 answer
644 views

Hey, 

i am using react and the program does not use Jquery. i want to achieve this:

https://stackblitz.com/edit/react-pew4cw?file=app/main.jsx

A way to clear all active filters from a single button above the grid. but while this example works with droplist. ive tried to apply it wo GridColumnMenuFilter and its CheckBox filter. such that the examples (eg, custom component or checkbox) below would have a clear button above the grid that clears filters.

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/

i've also tried to apply the FilterBy using the clear in js but am certain i am implementing that properly. shown in image. i can make use if th eis active to style it so far.

 

 

Stefan
Telerik team
 answered on 19 May 2021
1 answer
1.4K+ views

I want to implement multi select for multiple rows in a grid.

Currently I have this implementation in example docs - https://stackblitz.com/run/?file=app/main.jsx . But in this example only one row is selectable and when I select another row it cancels out the previous selected one.

Can you guys please help me with a work around or is this a limitation of the API where I can select multiple rows at the same time with select all option and manually. I tried making selectable mode to multiple but it didn't help.

 

Stefan
Telerik team
 answered on 18 May 2021
1 answer
468 views

```

<button 
                                        type="button"
                                        className="k-button -k-button-icon k-flat k-upload-action" 
                                        
                                        onClick={(e) => this.actualUploader.current.onRemove(el.uid)}
                                        tabIndex="-1"
                                    >
                                        <span aria-label="Remove" title="Remove" className="k-icon k-delete k-i-x">
                                        </span>
                                        {/* remove (doesnt work yet) */}

                                    </button>

 

```

 

I'm using a ref to access the 'Upload' react element and fire the onRemove method. My assumption is that it will interact with my removeURL using the DELETE method which I've specified. However, I can only get the image to disappear from the state, and no HTTP Request is fired. What can I do to get this HTTP method fired?

Stefan
Telerik team
 answered on 17 May 2021
2 answers
2.1K+ views

We are using the auto complete component that does a fetch for server side data based on the users entered text. We need to take action once they select an item from the list.

I don't see an onSelected event for the Autocomplete box. We did see it on (I believe) the combo box. Image of event attached.

We tried the combo box but didn't get the functionality we were looking for with the typeahead search.

The closest thing I found to working around the issue was to use itemRender and attach the click event to the div, but this is more of a hack as you can click just outside the div and still select what you want without firing the onclick.

 

const itemChildren = (
            //TODO, How can I add the onclick to the LI instead of this div.
            <div onClick={onClickPatientSelect} style={{ width: "100%", backgroundColor: "lightseagreen" }}>
                { li.props.children}
            </div>
        );
        return React.cloneElement(li, li.props, itemChildren);

 

 

Here is the current autocomplete code

<AutoComplete
            data={searchPatientData}
            value={searchText}
            onChange={onChange}
            textField="SearchDisplay"
            placeholder="Search for a patient"
            loading={loading}
            itemRender={itemRender}
        />
Stefan
Telerik team
 answered on 17 May 2021
1 answer
293 views

I am using a Kendo React Grid inside a Kendo React Dialog Window component.

When the Window first displays the user inputs a value in a text input and clicks a button to load the grid. The Grid seems to appear behind the Window. I tried adding the: 

.k-animation-container {
  z-index: 10003;
}
to my App.css file. This doesn't help. Do I need to put the style in the Window component code, or is this different from the animation-container issue/problem?

 

Some additional information:

When I open the Dialog Window I see this:

If I type an order number and click "View" I see this:

Part of the top of the grid where the headers should be and the scroll bar appear. That tells me the data loaded and the React state variable updated and caused the grid to redraw.

If I click the minimize icon in the window header and then the click restore icon I see the data:

I can share the code if it helps.

Thanks!

1 answer
113 views
According to https://www.telerik.com/kendo-react-ui/components/conversationalui/keyboard-navigation/ I should be able to use the keyboard to select suggested actions, but I can see in the DOM that they all have `tabindex="-1"` which makes them not focusable.
Stefan
Telerik team
 answered on 13 May 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?