Telerik Forums
Kendo UI for Angular Forum
1 answer
134 views

hello,

I have been searching myself silly on how to change just 1 label in an axis.I have searched for hours on how to do this, but can not find it. 

For instance : I have a x-axis that has every month of the year. But I want to change the color of the current month. 

As far as i can tell, I have to do something with the  axisLabelVisualArgs, but for the life of me, I can't figure out how I can change a text's color dependant on a condition.

This is the result I want to get :

Dimiter Topalov
Telerik team
 answered on 18 Nov 2021
1 answer
176 views

Hi,

When a user clicks a cell in the grid, is there any way to get the <td> of clicked cell in order to modify the styling (for example, add a solid border) as a way of highlighting the clicked cell? I would like the cell to remain highlighted until I programmatically clear the highlighting, so that I can highlight more than one cell. Please note this has nothing to do with editing.

I'd appreciate any pointers. Thanks in advance.

Alvin

Dimiter Topalov
Telerik team
 answered on 17 Nov 2021
1 answer
203 views

Hi

 

I am trying to populate Kendo Tile Layout inside Kendo Tabstrip but seems there is a bug when I drag the item. The position of selected tile is broken initially

 

When I click the red circle area to drag, the tile is moving to some strange place(position where you see 'Page Views' tile). This does not happen when I populate tile layout without trabstrip.

 

Any idea how to resolve this? I upgraded Kendo Angular lib to the latest.

* Code is attached.

 

Kind regards

David

Dimiter Topalov
Telerik team
 answered on 17 Nov 2021
1 answer
1.2K+ views
I am trying to use Storybook for an Angular project.  The Angular project is utilizing Kendo UI's kendo grid elements throughout component templates.

The issue is any piece of a component template using a kendo element does not show in the Storybook interface when I am running it.  If I change to standard html elements, the data does display as expected.

What do I have setup incorrectly that is preventing these custom elements from displaying in Storybook?

Any help or ideas would be appreciated and am happy to provide more context to anything.  Some code samples below.

Versions
@angular/core - ^12.1.0<br/>
@progress/kendo-angular-grid - ^5.4.0<br/>
@storybook/angular - ^6.3.4

.storybook/main.js file
module.exports = {
  "stories": [
    "../src/**/*.story.mdx",
    "../src/**/*.story.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  "core": {
    "builder": "webpack5"
  }
}

component story
import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta } from '@storybook/angular/types-6-0';
import DocumentsComponent from './documents.component';

export default {
  title: 'Components/Pages/Documents',
  component: DocumentsComponent,
  argTypes: {},
  decorators: [
    moduleMetadata({
      imports: [HttpClientModule, RouterTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
  ],
} as Meta;

const Template: Story<DocumentsComponent> = (args: DocumentsComponent) => ({
  props: args,
});

export const DocumentsList = Template.bind({});

component template file
<div class="documents">
  <button kendoButton (click)="addNew()" class="add-new" icon="plus" look="flat">Add New</button>
  <h1>Documents</h1>


  <!-- start block added to confirm data was available when rendering -->
  <div *ngFor="let data of gridData">
    <h2>{{data.id}}</h2>
  </div>
  <!-- end block added to confirm data was available when rendering -->


  <kendo-grid
    [data]="gridData"
    [sort]="sort"
    [sortable]="{ allowUnsort: true, mode: 'multiple' }"
    (sortChange)="sortChange($event)"
  >
    <kendo-grid-column field="id" title="ID" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="assignee.username" title="Assignee" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="status" title="Status" [width]="120">
...

Yanmario
Telerik team
 answered on 17 Nov 2021
1 answer
246 views
Hello, 

I was trying to create an error message in the kendo grid and I want the error message to appear inside the grid area, for example in place of  "No records available " text. 
Also, I would like to have the ability to style it (for example red background).

The requirement is to show custom content over the grid data, even if no data is provided.
Hetali
Telerik team
 answered on 16 Nov 2021
1 answer
1.3K+ views

Hello,

We are using Cypress automation to automate UI testing. This involves adding a data-cy="FOO" to a control (grid, button, drop down, etc). We want to be able to get at the controls in a grid like a grid button, hyperlink, page size, etc. I have added tags to the individual grids and columns but this doesn't seem to get at the fine grain controls like I would expect. Does anyone have experience doing this?

Martin Bechev
Telerik team
 answered on 16 Nov 2021
1 answer
111 views

Hello,

Is it possible to add a digital signature block to a PDF file created via PDFExportComponent (kendo-pdf-export) ?

Thank you,

--

Leonid

Martin Bechev
Telerik team
 answered on 15 Nov 2021
0 answers
110 views

Hi team,

     working on kendo filter menu , If input(search) data is empty means the filter button is disabled. my requirement is, its should be enabled. Please assist

amaithi
Top achievements
Rank 1
 updated question on 15 Nov 2021
0 answers
157 views

I am new to Kendo UI because of client requirement. I have faced problem during binding multi column combobox at first place the combobox loads very slow so I applied virtual property to combobox then it does not bind the last column with data

 

here is my ts code


exportclass CreateEsubsidyComponent extends BaseComponent implements OnInit, OnDestroy { /** * Define the Globals Variables */virtual: any = { itemHeight: 50, pageSize: 100// @progress/kendo-theme-default default item height }; }


here is HTML
 <kendo-multicolumncombobox [data]="esubsidyGeneralInputVariables.positiveListData"
                                        id="fundingObject" [listHeight]="300" [textField]="'herstellerbezeichnung'"
                                        [valueField]="'id'" formControlName="fundingObject"
                                        [virtual]="virtual"
                                        [popupSettings]="{
                                          width: '800px'
                                        }"
                                        (opened)="onMouseOverDescription()"
                                        (selectionChange)="selectFundingObject($event)" class="pop-reg-text"
                                        [filterable]="true" (filterChange)="handleMultiComboFilterChange($event)">

                                        <kendo-combobox-column [field]="'id'" [title]="'Id'" [width]="200"
                                            media="(min-width: 740px)">
                                        </kendo-combobox-column>
                                        <kendo-combobox-column [field]="'hersteller'" [title]="'Hersteller'"
                                            [width]="200" >
                                        </kendo-combobox-column>
                                        <kendo-combobox-column [field]="'herstellerbezeichnung'"
                                            [title]="'Herstellerbezeichnung'" [width]="200" media="(min-width: 500px)">

                                        </kendo-combobox-column>
                                        <kendo-combobox-column [field]="'typenbezeichnung'" [title]="'Typenbezeichnung'"
                                            [width]="200" media="(min-width: 565px)">
                                        </kendo-combobox-column>

                                    </kendo-multicolumncombobox>
                                </div>
and data is coming in positiveListdata because when I remove vitual all 4 columns bind properly then again loading is really slow I have attched the json object of data
Kanwar
Top achievements
Rank 1
 updated question on 12 Nov 2021
1 answer
145 views

Dear forum/support,

I'm trying to figure out how to deselect the last item that was selected in my filtered autocomplete list.

To more easily explain the situation I'm facing I edited the example Stackblitz and captured a small video of the issue.

Stackblitz: https://stackblitz.com/edit/angular-9eoskl?file=app%2Fapp.component.ts

You can find the video attached as a ZIP as I couldn't upload the mp4.

The video shows how I auto-select "Volleyball" from the autocomplete values after typing 'volley'. When I type 'ball' I need to have the internal state which item was selected last to be reset inbetween so that I can hit 'Enter' to select 'Baseball'. But instead 'Volleyball' is still selected and pressing 'Enter' will deselect it.

I was hoping that the new focusItemAt method would allow me to do such a thing by calling focusItemAt(null) in an event handler that listens on the autocomplete's 'closed' event. However the focusItemAt method does not really do what I was expecting (still don't know what it really does).

Best regards

Philip

Stoyan
Telerik team
 answered on 12 Nov 2021
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?