Hello,

 

I am trying to develop a very complex stock dashboard like as the bitmex (https://www.bitmex.com/app/trade/XBTUSD) dashboard.

Is it possible to draw a bar chart with a value in a cell in a grid lie as following?

Is it possible to make my dashboard as same as the bitmex dashboard with Kendo UI?

 

Regards,

Hi,

 

In my grid I have both the options filtering and pagination. When I went to page 2 and type something in filter to search it will show filtered record in page 1 but in the pagination I can still see page 1 and page 2. Please find attached screenshot for same. 

 

Scrrenshot 1 (Seact-grid-Pagination-1.png)

I have list of records in gridI

Scrrenshot 2 (React-grid-Pagination-2.png)

I moved to page 2 and try to search record present in page 1 (for example : Parag)I

Scrrenshot 3 (React-grid-Pagination-3.png)

Filtration works and I can see result in page 1 but still I can see page 1 and page 2 both. Please help

//Code

pageChange = (event) => {
this.setState({
skip: event.page.skip,
take: event.page.take
});
}

<Grid
data=
{filterBy(this.state.data, this.state.filter)
.slice(this.state.skip, this.state.take + this.state.skip)
}
skip={this.state.skip}
take={this.state.take}
total={this.state.data.length}
onPageChange={this.pageChange}
pageable={true}
resizable
onItemChange={this.itemChange}
editField="inEdit"
filterable
filter={this.state.filter}
onFilterChange={(e) => {
this.setState({
filter: e.filter
});
}}
>
<GridToolbar>
<button
title="Add new"
className="k-button k-primary"
onClick={this.enterInsert}
>Add new
</button>
  {
this.state.data.filter(p => p.inEdit).length > 0 && (
<button
title="Cancel current changes"
className="k-button"
onClick={() => this.setState({ data: sampleList.slice() })}
>Cancel current changes
</button>
)}
</GridToolbar>
<GridColumn field="Id" title="Id" width="50px" editable={false} filterable={false} />
<GridColumn field="FullName" title="Full Name" cell={DropDownCell} />
<GridColumn field="EmployeeId" title="Employee Id" editor="numeric" format="{0:#####}" filter="numeric" />
<GridColumn field="BirthDate" title="BirthDate" editor="date" format="{0:d}" filter="date" editable={true}/>
<GridColumn field="FirstName" title="First Name" cell={firstNameCell} />
<GridColumn field="MiddleName" title="Middle Name" />
<GridColumn field="LastName" title="Last Name" cell={lastNameCell} />
<GridColumn cell={this.CommandCell} filterable={false} />
</Grid>

In our project we use grouping with virtual scroll. Unfortunately i didn’t find any information in documentation Kendo Grid for React. This two features works correct independently, but do not work together as expected.

Our example.
https://stackblitz.com/edit/react-ii68sw?embed=1&file=app/main.js

Issue 1.
We can’t expand our fields, because “process” function dosn’t support this flag.

Issue 2.
Broken scroll, when we group our tables. If we set rowHeight={0} - scroll works correct, but onPageChange callback return incorrect information about “skip”.

As a result, we want to see the solution that your team provided for angular. Is it possible?
https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-using-virtualization-with-grouping

Hi I have a problem with custom scss build and "x" clear button in ComboBox. With your css '@progress/kendo-theme-bootstrap/dist/all.css' the 'x' has style:

 

When I try to build "@progress/kendo-theme-bootstrap/scss/all.scss" the result is:

 

My problem is that "right: calc( calc( 0.75rem + 16px) + 1px + 6.5px)" is not working in IE11 and the 'x' is on top of an arrow button.

This example:

- was created with "node-sass node_modules/@progress/kendo-theme-bootstrap/scss/all.scss src/common/styles/kendo-theme.css" 

- not using any custom variable

- not using any other css outside of this generated kendo-theme.css

- "@progress/kendo-theme-bootstrap": "4.10.0",

- "node-sass": "4.13.0",

 

Shouldn't be this two code snippets identical?

I'm developing SharePoint Online web parts using SpFx and KendoReact.  I have a form built from the samples/demos that is used for both new (db insert) and existing (db update) items.  I've got the insert working fine but I'm having trouble loading the form with the existing item when one is selected for edit.  I've tried the following to no avail:

<Field name={"Name"} component={ TextInput } label={ "Name" } style={{ width: "100%" }} required validationMessage="Name is required" value={ this.state.port.Name } />

My TextInput class is as follows:

const TextInput = (fieldRenderProps) => {
  const { validationMessage, visited, value, ...others } = fieldRenderProps;
  return (
    <div>
      <Input {...others} />
      {
        visited && validationMessage && !value &&
        (<div className={"k-required"}>{validationMessage}</div>)
    }
    </div>
  );

What is the proper method for loading the properties of a state object into a KendoReact form?

Thank you

 

I have an issue in my GridColumn, need to calculate sum of the cell input data and show in another cell.??!!

Please help me to find out the solution.

Hiii,

I'm using kendo react grid and what i need is if i reorder any column it should save somewhere(hopefully database) and persist on page reload.

Is it possible???

Column resize in grid stopped working when package is updated. I can see that working in 

@progress/kendo-react-grid": "^3.4.1" but it is not working in  "@progress/kendo-react-grid": "^3.11.0",

 

Is there any thing i need to do on that.

Hi,

Kendo React UI components (in my application) and the website (https://www.telerik.com/kendo-react-ui/components/popup/) demonstrating them are not working properly (Only in IE - I am using IE 11). Please see the screenshots attached, it could be observed that nothing is displayed in the example screen and I am not able to navigate to STACKBLITZ when clicking the link.

 

Regards,

Vinod 

 

Hi, 

I have a date picker with a format "dd/MM/yy" https://stackblitz.com/edit/react-igyygx . Is there a way how to force the DatePicker to stay in this century? Because now when I replace the year with a 12 the result is 2012 but 44 will jump to 1944.