Hello All,

I am using treelist component of kendo react, in that treelist i wnated to allow resizing only for some specific columns but not for all the columns is this possible ?

Thanks in Advance..!

I have a grid with columnmenu set to "GridColumnMenuCheckboxFilter". I need to change the CSS of the filter icon based on the open/expanded state of the filter menu. 

I found examples of changing the CSS of the filter icon based on the active state of the filter. But here my requirement is to solely consider the open and close state of the filter menu,

What do I have to do?

https://stackblitz.com/run/?file=app%2Fmain.jsx 

I am using this type of code with a donut chart, but I want to change the animation effect. Please suggest how to change the animation effect in this donut chart and I have one more question: how can I modify this donut chart in this type of img 

I am trying to run the example code from here https://www.telerik.com/kendo-react-ui/components/pdfviewer/ with the same exact file but the PDFViewer is just not loading any document. It component appears in the page, there's no error in the console, but no matter what I do I can't see any data loaded (also checked the onLoad event - it's not triggered). I've also tried to supply an url instead of base64 data and the result is the same 

All of the examples that I am finding online and in your documentation are broken for this situation. I am able to customize all columns in my TreeList component EXCEPT the first column which is the expandable one.

I was trying to use the code found on this StackBlitz that works, but it's using an old version of the treelist and I'm using the latest version (7.4.0):

React (forked) - StackBlitz

And I found this in your knowledge base using 5.12 - which doesn't even work:

Defining custom expand/collapse cell - KendoReact TreeList (telerik.com)

(the expandable icon is not showing - which is the behavior I am experiencing in my code).

Is there a known issue with the TreeList currently?

Hey team, so, I suspect there is something perhaps wrong with the scss files or the css files after I run sass to compile it. I have been trying a few different material related themes that come out of the box (not tinkering). Just to list a few:

• material-lime.scss
• material-lime-dark.scss
• material-sky.scss

I haven't tried the others yet. But one of them seems fine, material-nova.scss appears to be okay after running the sass command. My point being, when I tried to compare my own app and the examples on the website, it always looks different. Especially for the selected RadioButtons.

Also, just a separate but important question. I have been experimenting and trying different approaches to importing the css files after I did a compilation. For example:

sass material-lime.scss material-lime.css

And then after that I would import material-lime.css to my App.js file.

But when the application is doing a hot reload, the changes aren't reflected on the web page. Separately, I have experimented with import the css file in the component's index.jsx file. Sometimes it works, sometimes it doesn't. So I'm really curious as to why it's like this.

Is there a proper method to importing the themes/styles and then seeing the changes reflected on the web page after running npm start?

What is your recommendation?

P.S. At this present point, I clearly haven't tested every single other UI components from the library, so I won't know if there are others that are affected as well. So far, I've only discovered the issue with the RadioButton and RadioGroup components.

HI there,

 I am trying to build custom combobox which offers Add text inputbox, refer the pic for the reference,

with the help of below  example code.

					<ComboBox
						style={{
							width: '180px',
						}}
						id='newx'
						name='newX'
						textField='add new data'
						value={value}
						data={selectedval}
						onChange={(e) => handleChange(e, props)}
						header={
							<span
								style={{
									marginLeft: '60px',
								}}
							>
								<form className='k-form' onSubmit={(e) => e.preventDefault()}>
									<fieldset>
										{/* <div>Name</div> */}
										<TextBox
											value={selectedval}
											onChange={handleChangeval}
											// placeholder='John Smith'
											suffix={() => (
												<>
													{/* {value !== EMPTY_VALUE && ( */}
													<InputClearValue
														onClick={handleAddoperation}
														className={styles.plus}
													>
														<SvgIcon icon={plusIcon} />
													</InputClearValue>
													{/* )}
													 <InputSeparator /> */}
												</>
											)}
										/>
									</fieldset>
								</form>
							</span>
						}
						// footer={
						//   <span
						//     style={{
						//       marginLeft: '60px',
						//     }}
						//   >
						//     footer
						//   </span>
						// }
					/>

Issue encountered:

1. when i click on text input box inside combobox, options  popup closing. ( means i am not able to type or add new contents in text input box) 2. i am trying to implement this with incell. is there any other things to consider wrt Incell edit.

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

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