Questions on KendoReact Forum

1 answer

111 views

How to reset query option change of grid based on switch

I have a switch on my view based on that i am loading two grid. But while switching page number are not getting change as query option remembers the same page number.

Is there there any way to re set query options of grid when i perform switching.

General Discussions

answered on 11 May 2020

6 answers

129 views

GridColumnMenuCheckboxFilter panel can't decide position to pop up when it's data is remote

GridColumnMenuCheckboxFilter panel can't decide position to pop up when it's data is remote.

I have added a sample which similar to my real project.

As you can see there are two tables one under the other. I have added a setTimeOut function on my ColumnMenuRemote to simulate my api.

Now follow the steps without scrolling the page:

1) Click the Product Id filter of the Second Table. You will see there is not any problem. Filter panel pops up in proper position.

2) Click the ProductName filter of the Second Table. You will see the panel pops up the wrong way cause it's data isn't ready yet.

This is a problem for me cause I have a dahsboard that full of grids and all my data of filters are remote and filter panels pop up wrong position

so it effects my page style.

SAMPLE => https://stackblitz.com/edit/react-5ozlnq?file=app%2Fmain.jsx

General Discussions

answered on 11 May 2020

2 answers

807 views

[Solved] NumericTextBox with style currency cannot enter negative values

Hi,

I use a numeric texbox control which I have to allow negative values formatted as currency. I use the following formatting options:
  style: "currency",
        currency: "EUR",
        minimumFractionDigits: 0,
        maximumFractionDigits: 0

This displayes the numeric texbox with a nice euro currency symbol. However, when I try to enter a negative value, it will not allow it. I played around with the min attribute, but does not seem to work. When I switch the textbox over to a decimal style it does allow it.Style percentage does not allow for negative values. Can you provide me with instructions on how to allow for negative values in the numeric textbox control for currency style? Thanks again!

Regards,

Ruud

General Discussions

answered on 08 May 2020

1 answer

515 views

[Solved] grid excel export - custom rows?

Is it possible to add arbitrary data before the contents of the grid in the export? For example, if I wanted to put a persons name and today's date, then below that I wanted to show the contents of the grid. Is it possible to add these custom rows to the export?

General Discussions

answered on 08 May 2020

1 answer

181 views

Video call option with Conversational UI

As we are already integrating chat bots and doing all sorts of things with the Conversational UI, can we also have option for the video calling feature with it?
If we can, can I have a small demo for it?

Thank you.

General Discussions

answered on 08 May 2020

1 answer

1.1K+ views

[Solved] Dropdownlist width

Hi,

I've got a dropdown list but the items in that list are wider than the default value. I'm using itemRender and valueRender to change them.

Is there a way to change the k-list-container width, can I add my own class to the popup or specify a width directly to this?

Thanks

General Discussions

answered on 07 May 2020

1 answer

162 views

Editor.d.ts file missing props like value and onChange

Hi Team,

I am not able find property like value and onChange in Editor.d.ts file of kendo react editor. I am using the 3.12.0 version of kendo react editor and only below properties are available in Editor.d.ts file. But as per documentation, editor also have properties like value and onChange.

static propTypes: {
        defaultContent: PropTypes.Requireable<string>;
        defaultEditMode: PropTypes.Requireable<string>;
        contentStyle: PropTypes.Requireable<object>;
        dir: PropTypes.Requireable<string>;
        className: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        tools: PropTypes.Requireable<any[]>;
        onMount: PropTypes.Requireable<(...args: any[]) => any>;
        onPasteHtml: PropTypes.Requireable<(...args: any[]) => any>;
        onExecute: PropTypes.Requireable<(...args: any[]) => any>;
    };

I reinstalled the kendo react editor or even removed the node modules file. Even after that the properties are not available for Editor component.

Please let me know if I am missing something here.

Regards,

Sanjay

General Discussions

answered on 07 May 2020

2 answers

595 views

[Solved] How to load data in current page with React

Hello

I have a grid with many records in my DB. I want to only request the data that will be displayed on the selected page.
Ex. If I navigate to page 5 with a pageSize of 20, I will skip the first 80 records and receive the next 20.
This is working so far, but my issue is that when I receive those 20 records of data ; page 5 will show up empty since the data will only be displayed on page 1.

If i load all the data without splitting them, the program will crash.

I found a solution for angular, jquery (using serverPaging) but not with React.
What can I do to display my data on the specific page I'm on (in React), and basically ignore all the other pages when I'm not visiting them?

Thank you

this is my source code :

import { Grid, GridColumn } from '@progress/kendo-react-grid';

import React from 'react';

import ReactDOM from 'react-dom';

import axios from "axios";

import { filterBy } from '@progress/kendo-data-query';

class GridDocInput extends React.Component {

// c'est valeur sont a gardé uniquement dans le dev

terminalId = window.SERVER_DATA.terminalid;

functionId = window.SERVER_DATA.functionid;

hostname = window.SERVER_DATA.hostname;

funct = window.SERVER_DATA.funct;

// Let's our app know we're ready to render the data

componentDidMount() {

this.getPosts();

}

state = {

filter: {

logic: "and",

filters: []

},

skip: 0,

take: 25,

pageNumber: 1,

posts: [],

total_record: 10000

};

pageChange = (event) => {

this.setState({

skip: event.page.skip,

take: event.page.take,

pageNumber: (event.page.skip + event.page.take) / 25

},()=>{this.getPosts();});

}

render() {

return (

<div>

<Grid

style={{ height: '100%' }}

data={filterBy(this.state.posts,this.state.filter).slice(this.state.skip, this.state.take + this.state.skip)}

skip={this.state.skip}

take={this.state.take}

total={this.state.total_record}

onPageChange={this.pageChange}

pageable

filterable

sortable

filter={this.state.filter}

onFilterChange={(e) => {

this.setState({

filter: e.filter

});

}}

>

<GridColumn field="item_no" title="Code article"/>

<GridColumn field="description1" title="Description" />

<GridColumn field="uom_code" title="UOM code"/>

<GridColumn field="vendor_code" title="Code vendeur" />

</Grid>

</div >

);

}

getPosts() {

axios

// This is where the data is hosted

.post(

this.hostname+`in/ui/xitem.p?terminalid=` +

this.terminalId +

"&Funct=" + this.funct +

"&FunctionID=" + this.functionId +

"&pageSize=25" +

"&skip=" + this.state.skip +

"&take=" + this.state.take +

"&page=" + this.state.pageNumber +"&lastRecord=false"

)

// Once we get a response and store data, let's change the loading state

.then(response => {

this.setState({

posts: response.data.ProDataSet.tt_item,

total_record: response.data.ProDataSet.tt_Misc[0].total_record,

isLoading: false

});

})

// If we catch any errors connecting, let's update accordingly

.catch(error => this.setState({ error, isLoading: false }));

console.log("url: ", this.hostname+`in/ui/xitem.p?terminalid=` +

this.terminalId +

"&FunctionID=" +

this.functionId +

"&pageSize=25" +

"&skip=" + this.state.skip +

"&take=" + this.state.take +

"&page=" + this.state.pageNumber

);

}

export default GridDocInput;

General Discussions

answered on 05 May 2020

8 answers

731 views

[Solved] grid footercell data passing

Hi,

https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-footer-cells

The UnitsInStockCell component directly uses the products data. I don't see a way for the data to be passed through via the FooterCell props. What's are some options for passing the data down through props? Kind of like the sample code below

const UnitsInStockCell = (props) => {

// HERE --- if i wanted to reference the data from props.data instead, how can I do this?

const total = props.data.reduce((acc, current) => acc + current[props.field], 0);

return (

<td colSpan={props.colSpan} style={props.style}>

total: {total}

</td>

);

}

Thanks.

General Discussions

answered on 04 May 2020

2 answers

291 views

[Solved] Combobox datasource refresh

I have created a component which purely renders a kendoReact combobox that uses a datasource made by a SQL webservice (all self contained in the component). I then have this at the top of a form which will display data from the selected combobox item.

My question is if i amend or add a new record the combobox does not know that the data has changed and so does not refresh it's datasource. what is the best way to acheive this?

Many Thanks

General Discussions

answered on 04 May 2020