Telerik Forums
Kendo UI for Angular Forum
1 answer
161 views

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 

cy.get('div[aria-label="Press SPACE to deselect this row."]').find('div.ag-cell-value').eq(0).click({force: true});

 

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

Yousaf
Top achievements
Rank 1
Iron
 answered on 22 Jan 2024
1 answer
245 views

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/

Hetali
Telerik team
 answered on 19 Jan 2024
0 answers
116 views

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


Mikalai
Top achievements
Rank 1
 updated question on 18 Jan 2024
1 answer
670 views
How can I stop the background color of a row changing when you hover over it?
Hetali
Telerik team
 answered on 17 Jan 2024
1 answer
106 views

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.

Martin Bechev
Telerik team
 answered on 16 Jan 2024
1 answer
280 views

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

Zornitsa
Telerik team
 answered on 15 Jan 2024
1 answer
100 views

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

<ng-container *ngComponentOutlet="currentButton.component; inputs: currentButton.inputs;">  
</ng-container>

 

Component.ts

  get currentButton(){
    return {
      component: ButtonComponent ,
      inputs: { size: 'large', fillMode: 'solid', themeColor: 'primary', innerText: 'Click Me' },
      module: ButtonsModule
    }
  }


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.

Martin Bechev
Telerik team
 answered on 15 Jan 2024
1 answer
463 views

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

  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("dd MMM yyyy HH:mm:ss zzz").format(requestHeaderView.pcagatecurrentdate) : null
  //attempt4
  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy HH:mm:ss zzz").format(requestHeaderView.pcagatecurrentdate) : null
  //attempt5
  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy 07:00:00").format(requestHeaderView.pcagatecurrentdate) : null
  //attempt6
  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy 19:00:00").format(requestHeaderView.pcagatecurrentdate) : null
  //attempt7
  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null
  //attempt8
  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null
  //attempt9
  //pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yyyy'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null

 

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.

Yanmario
Telerik team
 answered on 15 Jan 2024
1 answer
130 views

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

Zornitsa
Telerik team
 answered on 12 Jan 2024
1 answer
84 views

Hello,
I'm using the kendo-grid for angular and in a colum I have date format.

<kendo-grid-column
        field="toDate"
        title="A"
        [width]=160
        [format]=displayDateFormat
        filter="date"
        [style]="{ 'border': '1px solid #888' }"
        >
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-date-filter-cell
            [operator]="'lte'"
            [showOperators]="false"
            [column]="column"
            [filter]="filter"
            [formatPlaceholder]="{
              year: 'aaaa', month: 'MM', day: 'gg',
              hour: 'h', minute: 'm', second: 's', millisecond: ''
            }"
          ></kendo-grid-date-filter-cell>
        </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem.toDate | date: displayDateFormat}}
            </ng-template>
        </kendo-grid-column>

 

The only possible option for the filter is less than equal (<=) the problem is who the filter work like lt (<) and not consider equal value.

If i selecet the filter date 31/01/2024 (in italy whw use dd/MM/yyyy) the grid show only data to 30/01/2024.

The same configuration using 'gte' work fine.

Thanks

LSo

 

 

Martin Bechev
Telerik team
 answered on 12 Jan 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?