I'm using the Kendo React Grid (v 1.0.1). I wanted to show a load indicator manually on certain occasions, but couldn't find out how to do this.

Is there a way to programmatically turn it on/off?

CU, Joe

Hi.

I am going to implement double underline in Editor component of Kendo-React.

In CSS, it can be solved using ::before and ::after.

How would I implement this feature?

Hello there,

I have country codes and the values, how can I use the Map in KendoReact to show something like this, any sample code, thank you!

Hello there, 

Is there a way to show the value/90 in the position below, I did not see any option on the API page, thanks!

So when I was implementing Scheduler I got following error when trying to change events using drag & drop functionality. Take into accounnt that it happens only with events which have same start date

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

You can check the issue here. https://stackblitz.com/edit/react-a2zwzm To reproduce it just move several today's events into another day square. You will get a lot of messages in console.

So, I've been going over the online documentations to make sure that I'm not asking a dumb question here. While there's been mention within the docs that we can set up the value of the license key as an environment variable. The instructions surrounding it isn't clear enough. By 'environment variable' do you mean like how we sometimes would set up a path for an executable in the windows system environment? Or in Ubuntu/Linux we would use .bashrc file. I usually put my environment variables there.

Is that what the docs is referring to?

The other thing that I'm also really curious to ask, when following the "Getting Started" guide within the docs, I was trying to set up an app using "npx create-kendoreact-app". But I encountered an error when it tried to download/install various components. I suspect it might be something to do with the licensing? I could be wrong. (I've attached the image) I'm not sure if this is the normal behavior, or maybe it's just a random, one-time incident.

(Updated) I have given 'npx create-kendoreact-app' another shot. This time I didn't opt for SASS, and everything ran smoothly. Perhaps you might want to raise this issue within your product team. Let them know that it needs to be fixed.

Curious, for all future KendoReact projects, does it mean we have to do two steps?

1. Step One: run npx create-kendoreact-app
2. Step Two: run npx kendo-ui-license activate

I look forward to your clarification on these two issues.

(Updated) Sorry, I seemed to have answered my own question. Yes, the environment variable as stated in the docs meant putting it in an actual Environment Variable on your system.

On Linux: Edit the .bashrc file in your home folder.

On Windows: Just create a new environment variable and call it "KENDO_UI_LICENSE".

I want to leave this here for anybody it might help in the near future. :P

Something seems to have changed between Grid v5 and v7.  Previously, I could set the overall grid text color with a simple style prop on the Grid itself.

<Grid style={{ color: "#000" }} ... />

That no longer works, so now I need to use a custom CSS class like this:

.k-grid-black .k-table-td {
    color: #000;
}

<Grid className="k-grid-black" ... />

Seems I have to use the selector .k-table-td for that class.

This works, however, now any rowRender function can't set a custom color - it gets ignored.

Any suggestions on how to make this work better?  Thanks!

Hello,

I am trying to display text containing html tags (rich text) in the treelist columns. Can you suggest how to do that? Currently it is showing as a string.

Thanks

<Grid
    data={data.map(item => ({
        ...item,
        [SELECTED_FIELD]: selectedState[idGetter(item)]
    }))}
    style={{height: '400px'}}
    dataItemKey={DATA_ITEM_KEY}
    selectedField={SELECTED_FIELD}
    selectable={{enabled: true, drag: false, cell: false, mode: 'multiple'}}
    onSelectionChange={this.onSelectionChange}
    onHeaderSelectionChange={this.onHeaderSelectionChange}
>
    <Column field={SELECTED_FIELD} width="50px"
            headerSelectionValue={data.findIndex(item => !selectedState[idGetter(item)]) === -1}/>
    <Column field="name" title="Name" width="300px"/>
    <Column field="surname" title="Surname" width="300px"/>
    <Column  width="100px" title="Full Name" cell={(props) => (
        <td>
            <div>{props.dataItem.name + ' ' + props.dataItem.surname}</div>
        </td>
    )}/>
</Grid>