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

I migrated kendo-angular-grid from 7.4.0 -> 14.2.0 and kendo-angular-menu from 4.0.3 -> 14.2.0 and observe that now the context menu sometimes causes the whole grid to shift upwards and off screen when displayed.  Examples of normal behaviour (good.jpg) and corrupt behaviour (corrupt.jpg) are attached below.  

If you look at the top attribute in the style applied to the kendo-popup (630px), the value is much too high. If I manually reduce it to say 200px (see corrected.jpg attached) then whole grid shifts back down to normal position.

If I console log the originalEvent.pageY value then this is value I see getting set as the top attribute value for the kendo-popup and isn't taking into account the height of the popup and whether placing it here will cause viewport overflow. Whereas when using the earlier versions of your libraries (see above),  if for example the originalEvent.pageY was reported as 772, the top value for the kendo-popup was assigned a value of 317, meaning the popup would always fit in the available viewport and not overflow it.

Can you please investigate and fix.

Hello,

I have in the past made a parent/Children in AngularJS 1.5.5 using parentId in kendo grid.

this was the result :

Is it possible to obtain the same result in the new angular 17x with Kendo ?

I looked at the documentation but I couldn't find something related to parentId.

Kind regards

Hi,

I am trying to add KendoButton at runtime using NgComponentOutlet. The button rendered successfully but I am not able to set the inner text for it. Any idea how to do that? Here is the code.

Component.html

Component.ts

The above code sets the other inputs properly and it is reflected in the UI component [e.g. themeColor], but not the innerText. Here is the screenshot.

Is there any way to achieve this?

Thank you in advance.

Hi

I'd like to fix an issue we have about the columns using dates, we have a dashboard and when user export the dash to Excel. 

seems like there's no problem or something, however when we proceed to open the Excel file. 

if we take a look to those columns displaying dates,  then we select any of these cells,  right click, "format cell"

Catogory is displayed as "General",  instead of date and any of the possible types-formats

so when user is trying to apply filter in excel, values for date columns are not recognized as dates.

I have been trying to modify the date format like these

 //attempt3

this is how it looks like in the front end,

<kendo-grid-column
    field="pcagatecurrentdate"
    [columnMenu]="true"
    title="{{ getTitle('pcagatecurrentdate') }}"
    tooltip=""
    [locked]="false"
    width="110"
>
    <ng-template
        kendoGridFilterMenuTemplate
        let-filter
        let-column="column"
        let-filterService="filterService"
    >
        <app-date-range-filter
            [field]="column.field"
            [filter]="filter"
            [filterService]="filterService"
        >
        </app-date-range-filter>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
                    <span
                        [ngClass]="{
                            okProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'ok',
                            warningProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'warning',
                            dangerProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'danger'
                        }"
                    >
                        {{
                        dataItem.pcagatecurrentdate != null
                            ? (dataItem.pcagatecurrentdate
                                | date : 'dd-MMM-yyyy')
                            : ''
                        }}
                    </span>
    </ng-template>
</kendo-grid-column>

but at the end all the dates still displayed as "General"

and this is the target I would like to reach

I appreciate any suggestions you may have

Thanks

Victor M.

Hello,

I'm planning on migrating an old AngularJS 1.5.5 (working with KendoUI) to latest angular 17.X with Kendo UI and I have some questions about Odata integration.

Is filtering, paging and sorting working "built-in" with odata ? I couldn't find any documentation forfiltering, for ex, with odata.

Do you have any example ?

Kind regards,

Musab