Telerik Forums
KendoReact Forum
1 answer
243 views

Hello, I wonder if there is a possibility to make filters from this example

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter

but as links or single select items, not checkboxes. Attaching a screenshot of what I'm looking for.

In this example https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells there is a CategoryFilterCell which would be the most similar, but I wonder if there is a way to add it as a column filter like on my screenshot?

Thank you

Filip
Telerik team
 answered on 15 Apr 2022
1 answer
161 views

When saving the pdf with the options forceProxy in true it redirects to the proxyURL you especified.

I want to avoid that and just call it like a request to my back-end server, there I process the pdf recieved by the request and I upload it.

It's there anyway to avoid the redirect of the url and still doing the request with the data of the file while using pdfSave?

Stefan
Telerik team
 answered on 15 Apr 2022
1 answer
387 views

I was wondering if it was possible to override the locale used when using formatNumber with the IntlProvider. In the kendo-intl repo it seems you are able to do the below:

formatNumber(1234.5678, "n2", "de"); 
However, in the kendo-react-intl docs there are only two params for this method, and it doesn't seem to be possible in the react library.

 

Can anyone offer any advice on whether this is possible?


Konstantin Dikov
Telerik team
 answered on 14 Apr 2022
1 answer
318 views

I've been practicing the donut chart documentation but I'm having problems with custom ChartSeriesLabel and Custom ChartLegend, can you provide an example of the sample code I mean.

Stefan
Telerik team
 answered on 13 Apr 2022
1 answer
138 views

Hi,

When using the grid, you can single click rows, shift click a range and ctrl click. These all work fine. I'm creating a wrapper around the grid to return the clicked rows, so this is the code I use to do this:

const onSelectionChange = event => { const newSelectedState = getSelectedState({ event, selectedState: selectedState, dataItemKey: DATA_ITEM_KEY, }); const selectedRows = Object.keys(newSelectedState).map(x => data.find(d => d[DATA_ITEM_KEY].toString() === x.toString())); props.onSelected(selectedRows); setSelectedState(newSelectedState); };

So I loop the data keys returned from the getSelectedState method on my data collection. Great, works fine.

However, when shift selecting a range and then deselecting a single row holding control, the row still remains as selected using getSelectedState (visibly it's unclicked, but not the state object). This is not the case with shift. Shift correctly unselects the rows. I see the event returns a ctrlKey property, so I could probably add my own code around this issue - but it looks like a bug to me? I am using the newest versions of the grid and data tools (kendo-data-tools: 5.2.0 and kendo-react-grid: 5.2.0).

Stefan
Telerik team
 answered on 13 Apr 2022
1 answer
104 views

I'm looking for an approach to drag an image that is clipped within a rectangle that is smaller than the image size.  Essentially achieve what is shown in this example https://codepen.io/jonathan/pen/abNGbE.  

I investigated using the Draggable utility in Kendo React, trying out the StackBlitz example, but can't quite get it right.  I tried setting the HTMLDivElement as the React.useRef

const myimage = React.useRef<HTMLDivElement | null>(null);

and then returning a div component instead of the Button in the example.

return (
      <div style={{overflow:'hidden',height:'100px',width:'100px'}} ref={myimage}>
        <div style={{position:'relative'}}>
        <img
            src="https://lh4.googleusercontent.com/-8tqTFxi2ebU/Ufo4j_thf7I/AAAAAAAADFM/_ZBQctm9e8E/w270-h203-no/flower.jpg"
            style={{position:'absolute',top:0,left:0,border:0}}
        />
        </div>
      </div>
  );

How can I achieve this effect using a Kendo component?

Konstantin Dikov
Telerik team
 answered on 11 Apr 2022
1 answer
142 views

I Need put a button to export datagrid to excel outside of datagrid component.

Not in topGridToolBar.

Any help please?

Stefan
Telerik team
 answered on 11 Apr 2022
1 answer
172 views

Hi,

I want to set an initial filter to my grid like in the sample (where initial filter is: ProductName contains Chef):

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-operators

But I want to use columnMenu fitlers, like the example:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter

So, I downloaded the example from the second link and changed initialState as follows:

  let initialState = createDataState({
    take: 8,
    skip: 0,
    filter: {
      logic: "and",
      filters: [{
        field: "ProductID",
        operator: "neq",
        value: 4
      }]
    }
  });

 

It works fine, the grid starts filtering out the product with ID 4, but if I open the filter it is empty:

 

 

How can I right initialize the columnMenu filter??

Thank you

Stefan
Telerik team
 answered on 11 Apr 2022
1 answer
130 views

Hi folks,

I'm trying to use the Kendo React Drawing API to draw an Image at its' native dimensions. The Image source will be a URL and could be an image not known at code-time but instead specified at run-time.

The documentation found here shows that I first need to specify the Image dimensions before I know what they will be.

const imageRect = new geom.Rect([5, 5], [50, 50]);
const image = new Image('../assets/diego.jpg', imageRect);

 

My issue is that `diego.jpg` may not be 50x50 for example.

How can I use `Image` while also allowing it to be the native image dimensions?

Thanks

Konstantin Dikov
Telerik team
 answered on 06 Apr 2022
1 answer
126 views

Hi, I am new here..

 

I am having trouble on how or what is the best way to render data on _HTML, can anyone help me on this problem?

 

 

this is the current code:

 


Report = (() => {
    let attendance = "";
    const init = async ()=> {
      _HTML.onload();
      _BIND.onload();
    };
    const _HTML = {
      onload : ()=>{
          _UI.renderReport();
      },
      renderReport: () => {
        $("$chart").kendoChart({
          ....
        series:[{
          name: "Total Persons",
          data: counts //dont know why not working
         }]
        ...,
        categoryAxis:{
         categories: parents, //dont know why not working
        }
        ...,
        });
        attendance = $("renderReport").data("kendoChart");
      };
    }
    const _BIND = {
        onload: async () => {
            const _ = _DATA;
            const {parents, counts} = await _.getParents();
            console.log(parents, counts)
            attendance.setDataSource({parents, counts})
            
        }
    }
 })

// the result of console.log(parents, counts) are

 


{
    "parents": [
        "Jokha Alharthi",
        "Vasdev Mohi"
    ],
    "counts": [
        1,
        2
    ]
}

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 04 Apr 2022
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?