Telerik Forums
Kendo UI for Angular Forum
2 answers
208 views
I need to customize the Filter and Clear buttons on the popup.  I'd like to change them to Filter and then Clear instead of Clear then Filter and apply some different styling.  I've seen how to customized the "guts" of the popup, but not the surrounding chrome.  Is there a way to do this?
Michael
Top achievements
Rank 1
 answered on 12 Apr 2018
2 answers
2.0K+ views

I have a column with short date time as string like: dd/mm/yyyy . for example: 08/04/2018

when I click on the title of the column name to sort it doesn't sort properly, but makes a mix

my html file:

<kendo-grid #grid="kendoGrid"
                [data]="gridView" id="GridID"
                [pageSize]="pageSize"
                [skip]="skip"
                [pageable]="true"
                [sortable]="{allowUnsort: allowUnsort, mode: multiple}"
                [resizable]="true"
                [sort]="sort"
                [scrollable]="{virtual: true}"
                (pageChange)="pageChange($event)"
                (sortChange)="sortChange($event)">

        <kendo-grid-messages noRecords="no Records">
        </kendo-grid-messages>

        <kendo-grid-column *ngFor="let item of gridColumnData" [headerClass]="'t-head'" [hidden]="item.hide" [field]="item.field" [title]="item.title">
        </kendo-grid-column>

    </kendo-grid>

 

my .ts file:

public sort: SortDescriptor[] = [{
        field: '',
        dir: 'asc'
    }];

public sortChange(sort: SortDescriptor[]): void {
        this.sort = sort;
    }

Devi
Top achievements
Rank 1
 answered on 10 Apr 2018
4 answers
462 views

We want something that is a combination between the ComboBox and the AutoComplete. Basically, we need to have a control that works exactly like the ComboBox about 99% of the time - only allowed items can be selected, we need to know the id of the selected item, an onChange event (or equivalent) must be handled, etc. However, we also have a request that users can retrieve a subset of the items based on what they type into the control. The data must also include an "Any" option that is not returned with the Input data for the parent component.

Currently, we are using the ComboBox with suggest and filterable set to true. We are adding the "Any" in ngOnInit and ngOnChanges as needed by calling the following:

resetItemData() {
  this.allItems = [this.anyItem, ...this.myComponent.items];
  this.filteredItems = this.allItems;
}

The ComboBox uses filteredItems as its data and we are setting the initial value to be anyItem which has an id = 0. We are using the valuePrimitive because we need to run another event when any inputs change on the form, so we need to run the valueChange event on the ComboBox. We are also using the filterChange to filter the items shown based on what the user types in.

When the user types in something that does not match, we are setting the filteredItems to return allItems just as we do at the beginning so that the user can just select something from the list. If the user selects nothing, we set the value to be 0 so that the request will use "Any" because the API will not accept an invalid itemId. 

Everything is working as designed. However, we have a couple UI issues that need to be addressed before we can proceed. 

  1. If the user types in something invalid and switches focus, the text is removed, but "Any" is not shown - even though the value is reset to 0. Is there a defaultValue or some way to programmitically insert text into the ComboBox input?
  2. When the user is typing in text, the popup with the suggestions blocks the bottom 50% of the text in the input. Is there a way to push this popup lower? I looked at the CSS rendered for the popup, but it appears to be calculated based on the position that the ComboBox is in the browser window. I tried adding something to the popupSettings parameter, but it did not seem to recognize my changes. This is slightly annoying when the filteredItems have some items, but it is really a deal-breaker when the user types in something that has no matches because a big empty window blocks the text.

Any suggestions you could give on this would be helpful! I have tried using AutoComplete, but it appears that there are even more issues to address. However, if you know of a way to use that instead of the ComboBox, I am open to that as well.

Thank you for your help!

Christy
Top achievements
Rank 1
 answered on 06 Apr 2018
3 answers
156 views
Hi,

Couple of questions:
1. Is possible to set min-width of the <kendo-grid-column>? 
2. Is it possible to have floating horizontal scrollbar (the bar is always visible even grid bottom is out of viewport)?
Dimiter Topalov
Telerik team
 answered on 06 Apr 2018
1 answer
1.1K+ views

I have been going through the Angular documentation and  found the Dynamic forms in Angular Reactive forms. This would be of big help to me, Since my form has to be able to dynamically set the number of  input controls and input  control types based on the business object model and change validations as per the business logic as well.  Need the kendo form controls instead of normal html form controls to be rendered dynamically.

Please find the below link to which I am referring to.

https://angular.io/guide/dynamic-form

 

Please suggest how this can be achieved through kendo Angular UI, 

 

Regards

Ivan
Telerik team
 answered on 06 Apr 2018
5 answers
1.9K+ views

I had a quick question regarding the employment of DefaultItem and its intereactions with [(ngModel)] and selected values.

I'm currently employing several cascading dropdownlists in a reactive form. I started off following the directions to make have three different sets of arrays - ie. default, dataResult, and selected. All of that seems to work although I found out that if I want to, say, go to another page and come back while inserting the previously selected values back into the dropdownlists from BehaviorSubject services I had make the select items valuePrimitive (to match my form value).

The problem with the above approach is it seems to allow either one or the other - ie. I can either have a defaultItem with a user-defined 'please select X' as the initial state but not be able to re-insert previously selected values on demand (it will always show 'please select X' on tab or page reload) but if I use the primitive approach and use selected in the [(ngModel)] to push the initial value the back part will work, ie. I can load previous values into the dropdownlist, however when no data has been entered into the dropdownlists I will have a blank initial state with the 'please select X' as one of the options rather than the default.

I'm wondering whether there is a way for me to be able to have both 'please select X' as the default value (assuming an object of id and name selected by value id as primitive) and be able to load the dropdownlist by way of programmatic value selection where selectedValue would be a string (GUID) which would still recognize an initial formControl value of "" as referring to the defaultValue of {id: "", name: "please select X"}

Let me know if the above makes sense or if there are any details you need clarified. Thank you!

Ron
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 05 Apr 2018
1 answer
185 views

In KendoUI Builder, we mention about Service URI and Catalog URI. REST service is also created using Progress App Server.

How to display Progress RDBMS data in KendoUI for Angular(4)?

Dimiter Topalov
Telerik team
 answered on 05 Apr 2018
3 answers
813 views

Our client has a request to center-align the tabs on the tabstrip. We currently have them over to the left, and I can see how to use rtl to move them over to the right. Is there a way to move them to the center? We would need the tab content to be to the LEFT and right of each tab as shown in the attached file.

Thanks!

Christy

Dimiter Topalov
Telerik team
 answered on 04 Apr 2018
5 answers
2.1K+ views

Hi,

With reference to this plunker https://plnkr.co/edit/I7tZsoJMrtVVPtR33DZF?p=preview, is there a way to send data from the dialog back to AppComponent only when click on save button?

Thanks.

 

Dimiter Madjarov
Telerik team
 answered on 02 Apr 2018
4 answers
431 views

Hi,

I have stumbled upon two issues when the axis in set to type="log"

The first it that the (X) axis is reversed for some reason. Using "reverse='true'" does nothing to the axis.

The second issue is the axisCrossingValue. For some reason it is not the default 0 but some number bigger than 0 selected by some unclear method. Could you please at least document how that is picked? And why it is not the smallest value in the series?

See issues here https://plnkr.co/edit/zwT7PosqasUqZsJsuEf6?p=preview

Dinko
Top achievements
Rank 1
 answered on 30 Mar 2018
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?