Telerik Forums
KendoReact Forum
3 answers
519 views

Hello,

Im trying to create a custom cell with drag and cell selection and its look it is not possible because I dont have the original `<td/>` in the `GridCellProps`.

Here you have an example:

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

I found a "workaround" but I dont know if this is the correct way to do that:

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

In Grid the prop cellRender do you have the original td allowing to override some props but without the need to know all internal props. Would be great if you can do that in the `GridColumn`.

I dont want to override the cellRender in the Grid and i dont want to know about data-grid-col-index.

Any suggestions?

Thanks!

Carlos
Top achievements
Rank 2
Iron
Iron
Iron
 updated question on 27 May 2021
2 answers
239 views

Hello!

PDFExport, pageTemplate has 2 props, pageNum & totalPages.

Is it possible to send some custom values over props to "pageTemplate"?

 

Thank you, Matjaz Reberc

Krissy
Telerik team
 answered on 25 May 2021
1 answer
268 views

Hello,

 

I am trying to display a list of images with buttons that delete them when clicked. I'm using the Upload component and utilizing the 'listItemUI' attribute and it works wonderfully. However, I am trying to reverse the order of the elements displayed so that the most recent is at the top and the least recent is at the bottom.

 CustomListItemUI(e) {
        return (
            <ul id="custom-list-item-UL">
                {e.files.map((el, index) => {
                    if (el.Thumbnail_URL) {
                        return (
                            <li
                                className="k-file"
                                key={index}
                            >
                                <div className="k-file-single">
                                    <img src={el.Thumbnail_URL} onClick={() => this.toggleDialog(el)} />
                                </div>
                                <button
                                    type="button"
                                    onClick={async () => {
                                        this.actualUploader.current.onRemove(el.uid);
                                        await this.props.deleteImage(el.ID);
                                    }}
                                    tabIndex="-1"
                                >
                                    <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                    </span>
                                </button>
                            </li>
                        );
                    } else {
                        return (
                            <li key={index}>
                                <Loader errorsPresent={el.validationErrors} />
                                {
                                    el.ID || el.validationErrors?.length >= 0 ? <button
                                        type="button"
                                        onClick={async () => {
                                            this.actualUploader.current.onRemove(el.uid);
                                        }}
                                        tabIndex="-1"
                                    >
                                        <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                        </span>
                                    </button>
                                        : null
                                }
                            </li>
                        );
                    }
                })
                }
            </ul>
        );
    }
I pass the calling of the above method to the aforementioned 'listItemUI' attribute on the Upload component.

I have tried sorting the data that goes into the <ul> and it doesn't make a difference.

I have tried putting display: flex, and flex-direction: column-reverse, and this works but places the scroller at the bottom with the most early upload (which is also not what I want). Is there some kind of sorting attribute or method I can use to achieve what I want?

Stefan
Telerik team
 answered on 24 May 2021
1 answer
3.8K+ 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
128 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
280 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
236 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
720 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.5K+ 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
535 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
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Styling / Themes
DatePicker
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?