hello

i have some questions about kendo react grid 

1-how to hide some columns 

2-how to auto adjust width columns to content size

3-dynamically refresh kendo grid data

4-dynamically 

thanks...

 

Hi,

I'm currently building a form which includes some basic text inputs and a RTF editor. I use the KendoReact Editor to offer the cool control with nice copy and paste and formatting options.

I understand from your documentation that this control does not support Html5 form validation. In particular, I need to make this rte field required. As the rest of the form follows the html5 form validation (with all the nice UI hints if you try to submit) I'm looking for a way to accomplish the same with the Editor control. Has anyone accomplished this before?

Hi,

I want to use filter from datatools but I see no option for formating NumericFilter and DateFilter or adding other props like min/max to filters.Is it not possible to customize filters? https://www.telerik.com/kendo-react-ui/components/datatools/filter/

Hi, 

I am working with spreadsheet wrapper component with React.

In my scenario, I want to bind some user data, something like { a : 1234 } to a specific cell or a row or a column, is it possible? Even if I can just bind a string instead of an object that will be okay. Also, I want to bind that data but don't want to show it to users, it should just be accessible through the code.

I tried looking into the API references but not able to find anything like that.

If it is possible, can I get a small example for it?

 

Thank you. 

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>