Telerik Forums
Kendo UI for Angular Forum
1 answer
325 views

Hello, there is an example how to close the popup on document click (https://www.telerik.com/kendo-angular-ui/components/popup/closing/#toc-on-document-click-or-escape), but the source doest'n loading.I need a best practice solution without triggering the change detection for the whole application.

Regards

Martin Bechev
Telerik team
 answered on 11 Dec 2020
3 answers
1.8K+ views

Hi

Im noticing some behaviors I was not expecting when using the treeview with checkboxes and expandable nodes. 
Some of it could be my understanding of expectations. 
My sample code is here, it's a hierarchy of users with expandable nodes and checkboxes and it shows what keys have been checked, what keys have been expanded and includes buttons for collapsing and expanding and a search.

https://stackblitz.com/edit/angular-cnzlah?file=app/app.component.ts

1. Open the sample, The treeview loads collapsed,
   if i check "User 1", i see it in my list of checked keys (1),
   if i open the "User 1" node using the chevron, i then see more checked keys(1,2,4).  Is this expected behavior ? 
   I would expect after checking "user 1" to see all the keys checked (1,2,3,4) since checkChildren = true. 
   If I expand all then check "User 1" then i do see all the nodes checked (1.2.3.4)

2. Refresh the sample,
   Check "user 1",
    expand the "User 1" node,
    expand the "User 2" node.
    Uncheck user 1",
    collapse the "User 1" node,
    Check user 1",
    expand the "User 1" node, 
    *** now the child nodes are not being checked

3. Refresh the sample, 
     Check "user 1", 
     Click "Expand All" button ... 
     *** now the child nodes are not being checked ....
 

Svet
Telerik team
 answered on 11 Dec 2020
3 answers
7.1K+ views
Hello. Is it possible to hide scroll on grid if data list is short and show when it's big? For example when we filter data list.
I found only this solution:
 
<input type="text"  #filterInput  placeholder="Search" (keyup)="itemsFilter(filterInput.value)" />
 
<kendo-grid class="grid-customized-border"
  [style.height.px]="300"
  scrollable="scrollable"
  [data]="gridView"
  [sortable]="{
    allowUnsort: allowUnsort,
    mode: 'single'
    }"
  [sort]="sort"
  (sortChange)="sortChange($event)"
  [selectable]="true"
  [kendoGridSelectBy]="'id'"
  [selectedKeys]="selectedRows"
  #grid
>
 
itemsFilter(value) {
    if (value) {
      this.gridView.data = this.gridView.data(item => {
        return item.title.toLowerCase().indexOf(value.toLowerCase()) === 0
      });
    }
    setTimeout(() => this.toggleScroll());
}
 
public toggleScroll() {
    if (this.grid) {
      let el = this.grid.nativeElement,
        content = el.querySelectorAll('.k-grid-content')[0],
        table = el.querySelectorAll('.k-grid-table-wrap')[0],
        header = el.querySelectorAll('.k-grid-header')[0];
      if (table && content) {
        if (table.offsetHeight < content.offsetHeight) {
          content.style.cssText = 'overflow-y: auto';
          header.style.cssText = 'padding: 0';
        } else {
          header.style.cssText = 'padding: 0 16px 0 0';
        }
      }
    }
}
Anastasiya
Top achievements
Rank 1
 answered on 09 Dec 2020
1 answer
977 views

I do not want to display Section/Group name on each row. As in this example:

Type Name : Lifecycle

So, instead of Type Name : Lifecycle, I just want to display Lifecycle.

Please help. I am using Angular 8 so prefer not to use jquery if possible.

 

 

Hetali
Telerik team
 answered on 09 Dec 2020
1 answer
207 views

Hello,

 

I'm following your stackblitz example:

https://stackblitz.com/run/?file=app%2Fapp.component.ts  

of a stepper form but when I click the next button it is saying my stepper is undefined, why is this?

 

public next(): void {
        if (this.currentGroup.valid && this.currentStep !== this.steps.length) {
            this.currentStep += 1;
            return;
        }
        this.currentGroup.markAllAsTouched();
        this.stepper.validateSteps(); //this showing as undefined
    }

 

Thanks

Sinead

Martin Bechev
Telerik team
 answered on 08 Dec 2020
1 answer
134 views

Using the built in date filter is not serializing properly.

When the API receives the request I get a 500 error.

Looking at the serialized filter I think the format is wrong:

?page=1&pageSize=10&filter=creationTime~gte~datetime%272020-12-01T19-00-00-05-0%27

this is how I build the query string:

const queryStr = `${toDataSourceRequestString(state)}`;

Svet
Telerik team
 answered on 07 Dec 2020
0 answers
91 views

hi

i I have added a menu to the kendo grid headerTemplate that displays a Popup. When I click on the inside popup, the column  is sorted

How can I disable this?

 
 

 

 

aliasghar
Top achievements
Rank 1
 asked on 06 Dec 2020
5 answers
1.2K+ views
why kendo editor cannot display border table when displaying content ?
Dimiter Topalov
Telerik team
 answered on 04 Dec 2020
5 answers
995 views

     I am using the kendo-chart to display charts in my application.  I need to format the values on the chart to currency.  I have tried to use the format option on the kendo-chart-series-item but that did not work.

 

                <kendo-chart [title]="{ text: selectedCommentDriver?.driverTypeText  + ' Chart' }"  *ngIf="selectedCommentDriver?.driverType === 1">
                    <kendo-chart-series >
                        <kendo-chart-series-item type="column" [data]="(ChartData$ | async) ?.acuityChartData" field="nprImpact"  categoryField="chartLabelText" [labels]="seriesLabels" >
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item>
                        <kendo-chart-category-axis-item-labels [position]="'end'"></kendo-chart-category-axis-item-labels>
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                </kendo-chart>

 

Here is a sample of the bar chart with sample data of 100000.  I would like these values to be $100,000.00

 

Thank you for the help,

Jimmy

Jimmy
Top achievements
Rank 1
 answered on 02 Dec 2020
0 answers
89 views

Hi 

 

I was checking this https://www.telerik.com/kendo-angular-ui/components/data-query/api/FilterDescriptor/#toc-ignorecase and tried to use the gte on my filters like in the following example:

 public onFilter(inputValue: string): void {
        this.gridView = process(this.gridData, {
            filter: {
                logic: 'or',
                filters: [
                    {
                        field: 'mainDate',
                        operator: 'gte',
                        value: inputValue
                    },
                    {
                        field: 'otherDate',
                        operator: 'gte',
                        value: inputValue
                    }
                ],
            }
        }).data;

 

My dates are all formatted in the European date format using a pipe like this in the template:

<ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem[col.field] | date:'dd/MM/yyyy'}}
</ng-template>

but when I am trying to search for a date ex: 21/05/2010 the data are not filtered on mainDate and otherDate dates greater than 21/05/2010. I am not getting any kind of JS error, but the grid is getting empty, like it doesn't find anything mathcing the filter.

If it's not clear, I could try to make an example on stackblitz.

Dimitris
Top achievements
Rank 1
Veteran
 asked on 02 Dec 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?