Telerik Forums
KendoReact Forum
0 answers
745 views

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

TheN3rdSquad
Top achievements
Rank 2
 updated question on 20 Mar 2024
1 answer
62 views

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!

Konstantin Dikov
Telerik team
 answered on 19 Mar 2024
1 answer
135 views

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

Vessy
Telerik team
 answered on 19 Mar 2024
1 answer
346 views
Hello,
I created a special cell in the grid. When this cell I created is clicked, the onSelectionChange event in the grid does not work.
But it works when I create a normal cell.



In the example below
When I click on the name and surname cells, the checkbox in the grid is marked, but when I click on the Full Name cell, the checkbox in the grid is not marked.

<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>

 

Vessy
Telerik team
 answered on 18 Mar 2024
0 answers
101 views

Hi,

I have a problem with the Tooltip position issue.

If I move the pointer from outside of the chart to a a chart item, the tooltip position is correct

But if I try to hover on a chart item, after that I move the mouse to an item beside it, the position is incorrect now


Do you have any idea about this issue?  Any help would be great.

Thank you

Henry

PS: Please see the behavior in the .zip file (it contains a .gif file to compare 2 cases I listed above)

 
Henry
Top achievements
Rank 1
 asked on 18 Mar 2024
1 answer
55 views

I have kendoreact grid. I have total 8 columns. out of 8, 4 columns are locked. Currently horizontal scroll bar is displaying for entire grid. But i want to show the scroll bar only for un-locked columns. Kindly help.

 

requirement: 

Konstantin Dikov
Telerik team
 answered on 15 Mar 2024
1 answer
186 views

I am trying to fix an issue on an old react application and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x


"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }

Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss .

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />
I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.
export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}


On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.

Is there a specific way in kendo that I can try to overcome this?

Konstantin Dikov
Telerik team
 answered on 14 Mar 2024
0 answers
110 views

I want to change the upload icon in Drag&drop component  to    before uploading the file. 

 

&   after uploading the file

Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 12 Mar 2024
1 answer
134 views

Before I was using

@use '~@progress/kendo-theme-default/scss/variables' as variables;

 

but recently after updating packages, I got jumped by a couple of errors saying there are no color variables in said file.
I found them in the dist folder but all those files also have

@import "all.scss";

 

at the end making me import whole scss files multiple times destroying all my overrides in previous files.

Is there any way I can import all Kendo theme variables to my scss files?

Zhuliyan
Telerik team
 answered on 12 Mar 2024
0 answers
73 views

I am having trouble navigating the grid with a screen reader using table navigation commmands. I think the problem might be my custom cells. Is there anything else that needs returned bessides tds? Here is an example of my grid.

```

<Grid data={transactions}>
        <Column field="name" title="Name" />
        <Column field="amount" title="Amount" format="{0:c2}" />
        <Column
          field="date"
          title="Date"
          cell={(props: GridCellProps) => (
            <td>{new Date(props.dataItem["date"]).toDateString()}</td>
          )}
        />
        <Column field="description" title="Description" />
        <Column
          title="Actions"
          cell={(props: GridCellProps) => (
            <td>
              <button
                onClick={() => {
                  setShowEditTransaction(true);
                  setEditTransaction(props.dataItem);
                }}
              >
                Edit
              </button>
              &nbsp;
              <button
                onClick={() => {
                  setShowDeleteTransaction(true);
                  setTransactionToBeDeleted(props.dataItem);
                }}
              >
                Delete
              </button>
            </td>
          )}
        />
     

</Grid>

```

Thanks in advance.

Chris
Top achievements
Rank 1
 asked on 10 Mar 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?