Questions on KendoReact Forum

1 answer

714 views

Is it possible to apply custom sort logic to a Data Grid Column

Hi,

Is it possible to apply custom sort logic to a Data Grid Column which is applied when clicking on the Column header? As an example, we have a Date column with nullable values. We would like nulls to be considered highest i.e.

ascending: lowest date value -> highest date value -> null date values
descending: null date values -> highest date value -> lowest date value

In the default sort nulls are considered lowest.

Grid

Sortable

answered on 04 May 2023

1 answer

167 views

Kendo react chart takes time to load

hi Team,

I'm using kendo react chart to plot trends (line chart) like below. It takes some time to plot the lines (Say 1- 2 sec approx). the axis and background is visible and there is delay till lines gets plotted.
Is there any callback function that lets know that graph is completely plotted on the space? it helps to shows loader till then

Charts

answered on 04 May 2023

1 answer

342 views

Kendo React Grid - External filter with custom dropdown options

Greetings,

I'm trying to add a filter that allows the users to select the available options from the table.

I found one example with Custom Filter Cells but I want to implement it to External filter.

Please help, thanks!

Best Regards,

Jason Li

Filter

Grid

answered on 03 May 2023

1 answer

135 views

Scheduler component - confirm dialog before saving when create or edit item

Hi Support team,

I have a request to open a confirm dialog when user create or update item in scheduler.

If end user chooses yes button, it will create/update item and close all dialogs.

If end user chooses no button, it will close confirm dialog and keep create/update dialog still opening.

Please advice how to do it.

Scheduler

answered on 02 May 2023

2 answers

654 views

DropDownList - Get only the ID and not the whole object

I need to find a way to just capture the dropdown id, I don't want the whole object like this in my output. 

Which prop can I use to capture just my selection ID? For example in a traditional HTML select can I ? 
I can't believe kendo doesn't have this solution 

<DropDownList

textField={"description"}

  dataItemKey={"id"}

  value={form?.importLevelId}

  onChange={(evt) => {

  lists.importLevelId = evt.target.value;

  setForm({ ...form, importLevelId: evt.target.value });

}}

  data={integrationSetupCombos?.importLevels}/>

My output:importLevelId:
description: "Tactic"
id: 1

DropDownList

answered on 02 May 2023

1 answer

115 views

For line chart can we plot lines from origin

Hi,

I am trying to plot a line in chart from origin. In below image lines are starting from 8AM. can we plot 7AM at the origin of both axis, so all lines will start from origin 0. here I am trying to show data from 7AM to 8AM right now it is from 8AM. so at starting point it should be start from 0.
Is this possible with line chart

Charts

answered on 02 May 2023

1 answer

82 views

CircularGauge

Hai,

I'm facing an issue where I'm unable to resize my circular gauge as demonstrated below. Can you please advise me on how I can reduce the size of the gauge? Additionally, is there a way to enable a feature where clicking on the circular gauge it will change the percentage , limited to specific values such as 25%, 50%, 75%, and 100%?

I attached my code for your reference. TQ

Gauge

answered on 28 Apr 2023

1 answer

592 views

How to write unit test cases for chart components

How I can I write unit test cases for chart components.
For example, I have pasted one screenshot for seriesVisual. By mocking data it is not covered in coverage. I am using react-testing-library and jest for writing test cases.

Charts

answered on 28 Apr 2023

1 answer

297 views

kendo-react-pdf-viewer : make pdf FitToWidth on load

I just want to set the default page width to 'fitToWidth' instead of 100% on page load. Below is the reference code:

import * as React from "react";
import { PDFViewer, PDFViewerTool } from "@progress/kendo-react-pdf-viewer";
import { SampleFileBase64 } from "./base64Sample";
export const DocumentViewer = (props: any) => {
    const pdfViewerTools: PDFViewerTool[] = ["pager", "spacer", "zoomInOut", "zoom", "selection", "search", "open", "download", "print"];
    
    return (
        <>
            <div>
                {<PDFViewer
                        data={SampleFileBase64}
                        defaultZoom={1}
                        style={{ height: 500 }}
                        tools={pdfViewerTools}
                    />
                }
            </div>
        </>
    )
}

PDF Viewer

answered on 26 Apr 2023

1 answer

83 views

How to make the content of the chart automatically fill the container without being blocked?

As shown in the figure, when I use the Chart component, due to the large content of the label, some text on the top is blocked, but there is still a lot of space at the bottom, I wonder if there is any way to make it better displayed

Charts

answered on 26 Apr 2023