Telerik Forums
KendoReact Forum
1 answer
150 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
187 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
133 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
130 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
1 answer
120 views

is it possible if I use kendo UI's drawer but not for navigation, but a component such as chart like this design :

and make this button to expanded function ?

Filip
Telerik team
 answered on 04 Apr 2022
2 answers
647 views

Hi team,

I'm using React Grid, and I wanted to know if I can add a dropdown list to certain columns header of the grid. Refer to the below example:

 

Here, the last 4 fields (Supp., Lead Plan, Alt Plan, LPG) have a dropdown list that can have Yes/No or some other values. If we select any value from this dropdown, all the rows only for that column will be auto-populated with the selected value. Is there a way to achieve this?

Thanks

Konstantin Dikov
Telerik team
 answered on 04 Apr 2022
2 answers
452 views

Is it possible to use GridColumn and the footerCell prop and have the footer row export in the Excel export?

I see this example, but it's utilizing the ExcelExportColumn, which doesn't have all of the extra things I want (footerCell, custom cell, header class name, filter, etc) - is there a workaround I'm missing?

Thank you!

Janki
Top achievements
Rank 4
Bronze
Iron
Iron
 answered on 01 Apr 2022
1 answer
149 views

Hi Team,

I am using Kendo Grid React. I want to disable weekend on my Datepicker. Please let me know the property to disable weekend on my Datepicker.

Stefan
Telerik team
 answered on 01 Apr 2022
1 answer
119 views

I am generating a bubble chart in my React app, but all items are the same color. Is there any way to have each category automatically show as a different color? I see the colorfield prop, but I don't want to have to manually generate colors, and the number of categories can vary.

Also I've set the legend visible: true, but the legend doesn't appear. Is it possible to have a legend on a bubble chart?

Stefan
Telerik team
 answered on 01 Apr 2022
1 answer
263 views

Hi.

I have setup this test page:

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

The page shows 2 issues:

1) I implemented an external button that should collapse the "Sub Content" pane to the bottom. But instead of collapsing the "Sub Content" pane by moving the divider to the bottom, the divider stays where it is and the "Sub Content" pane gets collapsed to the top.

2) When you just reload the page in its initial state and then click on the triangle button on the divider to collapse the "Sub Content" pane, it shows the same behavior which I described above. But if you just move the horizontal divider a bit up or down and then click the triangle, the divider moves to the bottom as expected.

Is this a bug or am I doing something wrong and can somehow implement a setting so that the behavior will work as expected?

Thanks!

Greetings,

Bernd

Filip
Telerik team
 answered on 31 Mar 2022
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
DatePicker
Styling / Themes
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
LLM Kit
OTP Input
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?