Telerik Forums
Kendo UI for Angular Forum
1 answer
232 views

I am attempting to functionally create a week picker, but I would like it to dropdown like the standard kendo DatePicker does. Is there a way to do this exclusively with Kendo UI components, or will I need to create my own dropdown button with the selected data as a label for it? Essentially I am attempting to create something like this  below. That will collapse to just the selected range bar when not clicked on

Martin Bechev
Telerik team
 answered on 17 Jun 2022
0 answers
137 views

Hi once again,

This question is about the styling of the 100% stacked bar component. Is there any option to get only the bar that is circled in the image? Or at least any option to remove that white background? I achieved to remove the axis but I have problems with the background. Also, I would like to add some width and height to kendo-chart but only to the bar and not to the background (second image).

Regards,

Jose

Jose
Top achievements
Rank 1
Iron
Iron
 asked on 16 Jun 2022
0 answers
154 views

Hi there,

I was using this component on my app and I noticed that when the first element of the chart-series is 80% or higher, the background area is resized and the bar gets out of the ploting area. However, I tryed to put 80% in another item and it works fine. Is there any option to deny that resize on the first item?

I modify the https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/#toc-100-stacked-bar code to show the problem. Here is the template:

      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[16]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }"[data]="[1]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>

      <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[16]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }"[data]="[1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

Thanks ,

Jose

 

 

Jose
Top achievements
Rank 1
Iron
Iron
 asked on 16 Jun 2022
1 answer
349 views

Hi,

Is it possible to export a master-detail grid to PDF? I've been able to do it in excel with your examples but haven't figured out how to do it with PDF.
Also when is pdfExport event emitted? I'm calling grid.saveAsPDF() but the event doesn't seem to be emitted.

Thanks in advance!

Hetali
Telerik team
 updated answer on 15 Jun 2022
0 answers
118 views

Hello team,

i'm having an issue with kendotooltip component inside my angular application, it's working for desktop version but not for mobile version(although i added onshow="click" event and still not working).

there is many examples in stackblitz for kendotooltip that are not working when changing to mobile version .

i'm using the tooltip inside a child component that is called from other parent components .in fact if i test with a simple exemple it works, but if i add it inside my child component it does'nt work anymore(even if i add an empty div inside the parent component the tooltip dont work anymore).

please contact me for better understanding .

 

linda
Top achievements
Rank 1
 asked on 15 Jun 2022
0 answers
142 views

Hello Kendo team, i'm developing a mobile app using Angular framework and Kendo UI components.

I have a problem with Kendo tooltip ,it is not working on mobile version(it works only on desktop app).there is only some simple exemples that are working, but if i use it inside a parent component it doesn't work . you can contact me if you me to give you the exemple of my code to reproduce the issue.

this is an exemple of stackblitz that isn't working for mobile version ,just to test it you need to inspect and select mobile mode.

https://stackblitz.com/edit/angular-95kb4g?file=src%2Fapp%2Fapp.component.ts

Mejrissi
Top achievements
Rank 1
 asked on 15 Jun 2022
1 answer
290 views
Hello, I would like to achieve the behaviour that the editor has in this page: https://www.telerik.com/kendo-angular-ui/components/editor/ 

When you resize the page, this appears:

 
I'd like the same thing to happen when using a custom Toolbar:

      <kendo-editor #editor formControlName="texthtml" style="width: 52vw; height: 65vh;">
        <kendo-toolbar>
          <!-- BOLD, ITALIC, ECC -->
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>

          <!-- ALIGN TEXT -->
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>

          <!-- LISTS, INDENTATION -->
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>

          <!-- FORMAT, FONT FAMILY AND SIZE -->
          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>
          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>
        </kendo-toolbar>

        <!-- CUSTOM BUTTON -->
        <kendo-toolbar-button text="Special Button" showText="both" themeColor="primary" [disabled]="false"
          (click)="specialFunction(editor, this.selectedParagraph)">
        </kendo-toolbar-button>
      </kendo-editor>

Can this be achieved? 
Martin Bechev
Telerik team
 answered on 14 Jun 2022
1 answer
449 views


 

We are trying to implement the select all option in kendo angular grid column menu chooser (angular 12) as above (the above one is implemented in angular js).. We could not find any corresponding inbuilt customizations provided.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-include-selectall-in-columnmenu  This link refers to kendo jquery which implements the required function . Is there any similar event in kendo angular to implement the same.

 

 

Hetali
Telerik team
 answered on 13 Jun 2022
1 answer
3.3K+ views

Hi,

When I build, I got following message. I use Angular 13.3 and typescript 4.6.2. Is there a way to remove these message? 

  .k-input-label:dir(rtl) -> unmatched pseudo-class :dir
  .k-form .k-form-fieldset>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')      
  .k-form>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-left+* -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-right+* -> Cannot read properties of undefined (reading 'type')
  .k-chat .k-message-list-content>*+* -> Cannot read properties of undefined (reading 'type')

Thank you.

Stoyan
Telerik team
 answered on 13 Jun 2022
4 answers
331 views

Hello,

In our application, we offer the users possibility to customize settings and save them inside MongoDB, and some of those settings are of DateTime/Time type. 

The problem is, that when the user sets a time inside the DateTime Picker (let's say 17 April 2020, 23:59), the value saved inside MongoDB is the serialized one, 2020-04-17T20:59:00.000Z  (I write the ngModel in console and I get Fri Apr 17 2020 23:59:00 GMT+0300 (Eastern European Summer Time), so the serialization is correct considering the time zone, but we need to save in database the exact date the users sets inside the DateTimePicker.

console.log(this.dateModel, JSON.stringify(this.dateModel)) writes
Fri Apr 17 2020 00:00:00 GMT+0300 (Eastern European Summer Time)
'"2020-04-16T21:00:00.000Z"'

What can be done so the DateTimePicker shows the date with the same time as when it is serialized?

PS. We have same functionality in an older application made with AngularJS, but there is no problem because the Date Picker for jQuery UI accepts strings as ng-model.

 

Thanks,

Iuliana

Iuliana Maria
Top achievements
Rank 1
Iron
 updated answer on 10 Jun 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?