Hello,

I'm trying to style the Detail Row Template, but I can only style inside the component.  What I'm trying to do is style outside the component, but inside the dropdown (blue area in the screenshot).  And ideally I want to have that color match the parent row's background color.

Following screenshot will explain everything.  Thanks!!  Note:  I was only able to style this area in the screenshot if I inject into .k-detail-row in Chrome.  I don't know where to put it in Angular code because it seems to be between the parent and child components.

Hi there,

Is there any built-in way to close a snackbar/notification bar if the user navigates to another page?

Or, if this isn't the right use case for the notification bar, could someone point me to a better one?

Thank you!

Hi Team,

I am using angular Kendo DropDownTree and all the items of the dropdown is expanded. I have a vertical scroll bar in the dropdowntree. I want to know the scroll position of the DropDownTree and after refreshing of the page I need to retain the scroll position. How can I know the current scroll position and retain the scroll position of DropDownTree after refreshing the screen?

I have a grid that I make a request for and when the number column is selected, it is not displaying the sum in the toolbar.

Here's the example in stackblitz:

https://stackblitz.com/edit/angular-hjbr9g-stgeu8?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.service.ts,src%2Fapp%2Fapp.module.ts

Dear community,

how can I style kendo-dropdown component using built-in customization mechanisms?

I am using in my application bootstrap stylings for Kendo components. I already saw the customization section. I would like to restyle the basic properties of a dropdown such as (but not limited to)

• Background color when the dropdown is rendered
• Padding-inline and padding-block.
• Font color and size
• Background color on focus

I hoped that there would be some variables that I could just override, as if in the case of other components such as buttons, inputs, grid, etc.

I already tried to override lists, as that seemed to be the most logical thing to me. However, it does not seem to be applicable here. Is such customization possible or do I need to override the styles with custom css?

Thanks for any help.

HI, im using cypress testing framework and the component we use are kendo components, for some reason in the browser testing enviroemtn the grid component drop down menu for an option dose not work, the test clicks the component however it dose not open it.  It works fine when im using the app in dev or production however it dose not in the cypress running env.

however this then gose back to the first picture i provided and dose not open up the kendo component

here is the code im trying to run on it 

why is this and how can i fix it so it dose open up in test environment

Hello,

I'm trying to add placeholder text in a multiselecttree element but when nothing is selected I'm not seeing the placeholder text. I'm pretty sure this should be supported, I tried using the same placeholder in a multiselect element and it's working fine.

Am I missing something else here or are placeholders not allowed in multitreeselect?

Here's the code I pulled from the docs site for testing each placeholder: codesandbox_link

Any help is appreciated. Thanks!

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/

I have function for simulating DragAndDrop, if i use that i see hint but if i change position and drop it's not working.
is this even possible? I use DragTarget and DropTarget Directives

function simulateDragAndDrop(element, destination) {
  const mouseDownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
  const mouseUpEvent = new MouseEvent('mouseup', { bubbles: true, cancelable: true })
  const mouseMoveEvent = new MouseEvent('mousemove', {
    bubbles: true,
    cancelable: true,
    clientX: destination.offsetLeft,
    clientY: destination.offsetTop + destination.offsetHeight,
  })

  element.dispatchEvent(mouseDownEvent)
  document.dispatchEvent(mouseMoveEvent)
  const hint = document.querySelector('.drag-hint')
  hint.style.left = `${destination.offsetLeft}px`
  hint.style.top = `${destination.offsetTop + destination.offsetHeight}px`
  document.dispatchEvent(mouseUpEvent)
}