Hello,

I am trying to implement a Fade component on to my Window Dialog component as well as make it so when the user clicks outside of the Window it closes it. Kind of like other UI Modals.

      <span className="k-icon k-i-zoom" onClick={toggleWindow}></span>

      <Fade>
      {visible &&
        <Window
          modal={true}
          onClose={toggleWindow}
          initialHeight={420} 
          initialWidth={700}
          initialLeft={300}
          initialTop={130}
        >
          {props.flag === 'bond' && 
          <Input
            name={'Search Bond'}
            label={'Search Bond'}
            onChange={searchChanged}
            className="bond-input"
          />}
          <Grid
            className="bond-grid"
            reorderable
            sortable
            data={bonds}
            rowRender={rowRender}
          >
            <GridColumn field="cusip" title="Cusip" width="98px" headerClassName="bond-header" />
            <GridColumn field="issuer_short_name" title="Name" width="200px" headerClassName="bond-header" />
            <GridColumn field="maturity" title="Maturity" width="100px" headerClassName="bond-header" />
            <GridColumn field="coupon" title="Coupon" width="80px" text="align-right" headerClassName="bond-header" />
            <GridColumn field="bbg_ticker" title="BBG Ticker" width="150px" headerClassName="bond-header" />
          </Grid>
        </Window>}

 

I found a bug with the themes in the Kendo picker components that is breaking the styles of the clear button like so:

It causes the clear `x` to render on top of the dropdown button rather than spaced to the left.

The issue is caused by Chrome not liking a css `calc` function where `+ 0` is used. Removing the + 0 fixes is.

 

This is caused because of this line:

@progress\kendo-theme-default\scss\_variables.scss:439  - `$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;`

but on this line:

@progress\kendo-theme-default\scss\_variables.scss:424 - `$picker-select-border-width: 0 !default;`

You can see $picker-select-border-width is set to 0, which when injected in line 439 adds the +0 which the css calc method dislikes. (there is also an extra space after that factor on line 439).

 

 

Hello,

 

In Kendo UI for jQuery document, there is a section for WebSocket binding.

However, I couldn't find the WebSocket binding example in KendoReact document.

Can you tell me where it is?

 

regards,

 

how to load data dynamically in kendo react grid component?(for example in useEffect() function) thanks

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.